Introdução

Olá leitor do Medium! Neste estudo de caso de UI UX, mostrarei meu design de aplicativo móvel. “Stash&Store” é o nome da minha segunda aplicação móvel. É composto por várias funcionalidades que ajudam o utilizador a encontrar um espaço de arrumação adequado para os seus artigos e/ou a rentabilizar o seu excesso de espaço. Aspirava ser inovador e criativo e tornar este aplicativo o mais fácil de usar, intuitivo, funcional e único possível.

Problema

Ao iniciar o projeto, eu tinha um problema específico em mente que pretendia resolver. No entanto, depois de pensar um pouco mais, percebi que “Stash&Store” poderia efetivamente ser um aplicativo multifuncional resolvendo problemas um pouco diferentes para vários tipos de pessoas. A seguir, são problemas que aspirei resolver de alguma forma:

• Falta de espaço de armazenamento nas casas das pessoas
  No mundo moderno, as pessoas carecem de espaço de vida e muito menos de armazenamento.
• Preços elevados de unidades de armazenamento e armazéns
  Quem pensa em alugar espaços de armazenamento é muitas vezes desencorajado a fazê-lo devido aos altos preços de aluguel. Armazéns especializados muitas vezes podem ser muito caros.
• Excesso de espaço deixado sem uso
  As pessoas que possuem um excesso de espaço às vezes ficam apenas com as despesas de seu espaço não utilizado.

Consciente dos problemas mencionados acima, comecei a pesquisar. A primeira coisa que fiz foi, como sempre, analisar as aplicações e produtos da concorrência. Ao fazer isso, tive algumas ideias sobre o que poderia adicionar ao meu aplicativo, mas, mais importante, encontrei falhas e deficiências nos aplicativos de competição. Meu objetivo final era criar o melhor e mais exclusivo aplicativo para esse fim! Além de inspecionar os aplicativos da concorrência, eu queria conhecer o usuário. Ao longo de todo o processo de design, pensar no utilizador e nas suas necessidades foi a minha principal prioridade.

Persona do usuário

Depois de abordar minuciosamente os principais problemas que meu aplicativo resolveria e conduzir uma extensa pesquisa sobre as necessidades de usuários em potencial, a próxima etapa foi identificar a persona de usuário ideal.

Debate

Depois de identificar a persona do usuário, participei de algumas sessões de brainstorming. Nesta fase, tomei nota de quase todas as ideias que me vieram à mente. Fiz essas anotações no FigJam e depois as transferi para uma página especial do Figma especialmente designada para essas ideias.

Como você pode ver na captura de tela acima, havia uma seção para puro brainstorming, enquanto também havia seções para partes principais específicas do aplicativo.

Mapa UX

Depois de ter várias ideias, construí um mapa UX. Existem três cores de quadro, cada uma representando uma parte distinta do aplicativo.

Quadro inspirador

Em relação aos elementos de interface do usuário do meu aplicativo, criei um grande quadro inspirador que compreende um grande número de várias telas e fotos de diferentes aplicativos. Apesar de talvez ser um pouco contra-intuitivo, inspirei-me em aplicativos de viagem, aplicativos de mídia social, aplicativos de culinária, aplicativos de navegação etc. Prestei atenção a todos os elementos da interface do usuário - cores, campos de entrada, menus, ícones, botões, fontes, ilustrações, cartões, etc. Em essência, todos os aplicativos compartilham uma boa quantidade dos mesmos elementos de interface do usuário.

Salvei várias fotos do Dribbble, Mobbin, Behance e plataformas semelhantes na minha página “Inspiration Board” no Figma. Eu categorizei todas as fotos por sua finalidade. Dessa forma, havia várias seções distintas contendo diferentes tipos de tomadas.

Também fiz questão de deixar notas na forma de comentários de Figma nas fotos para me lembrar exatamente do que chamou minha atenção. Eu sabia que só precisava reajustar e imitar os trabalhos de vários outros grandes designers para deixar meu aplicativo ótimo! Os aplicativos nos quais me inspirei eram usados ​​principalmente em todo o mundo e foram projetados por alguns dos melhores especialistas do mundo!

wireframes Lo-Fi

Eu criei três seções de wireframe. O primeiro é universal e é o processo de integração. As outras duas seções eram wireframes de diferentes visualizações de aplicativos , uma para hosts e outra para clientes . Depois que o aplicativo é baixado e o usuário se registra, ele ainda pode alternar facilmente entre os dois. Nas capturas de tela abaixo, é visível que quase todas as telas foram introduzidas neste wireframe.

Depois de concluir os wireframes, tive uma ideia muito mais clara de como continuaria com o projeto. Além disso, para não esquecer meus pensamentos durante o wireframing, deixei comentários Figma em certas áreas da tela para me lembrar de meus planos para um elemento de design específico.

Sistema de design

O tipo de letra que usei em combinação com a cor do tema provou ser a melhor solução. Esse tom de cor verde invoca confiança, otimismo e positividade geral na mente dos usuários. Por outro lado, DM Sans como tipo de letra transmite uma sensação de modernidade, profissionalismo e clareza. As linhas limpas e os cantos arredondados dão ao aplicativo uma sensação amigável e acessível, enquanto as bordas afiadas sugerem uma sensação de precisão.

Para aumentar a produtividade no processo de design, criei estilos de texto e cores. Dessa forma, ficou mais fácil e rápido decidir a cor de determinados elementos da interface do usuário e decidir a fonte que usaria em determinado local. A criação de estilos também me ajudou imensamente mais tarde a fazer modificações no design.

Em relação aos ícones, para manter um design consistente em todo o aplicativo, usei um único pacote de ícones e um tipo de ícone. O nome do pacote de ícones é “Heroicons” e continha quase todos os ícones que eu precisava em um formato SVG (vetor). Os ícones que não encontrei, desenhei com uma pen tool no Figma. Garanti que eles fossem consistentes em tamanho e traçado com os ícones do pacote de ícones mencionado anteriormente.

Fonte do pacote de ícones:
https://heroicons.com/

Quando se trata de ilustrações que usei, elas também foram tiradas da mesma fonte de ilustração. Mais uma vez, a consistência na interface do usuário é muito importante!

Fonte das ilustrações:
https://storyset.com/time

Design final

Conforme mencionado no capítulo “Lo-Fi wireframes”, “Stash&Store” compreende duas visualizações de aplicativos . A primeira é voltada para o cliente e o cliente é o tipo de usuário que busca armazenamento para alugar pelo app. Essa visualização do aplicativo deve ajudar o cliente a encontrar ofertas de armazenamento facilmente. A segunda visualização do aplicativo é designada para anfitriões que desejam alugar seus espaços. Neste caso, o “Stash&Store” atende o usuário de formas específicas que facilitam o gerenciamento de suas ofertas.

O processo de integração em si é relativamente o mesmo para todos os aplicativos. Nesse caso, é claro que o usuário tem duas opções principais - registrar-se ou fazer login. Ao criar uma conta, os usuários são solicitados a especificar o uso pretendido para "Stash&Store". Isso está incluído porque o usuário pode ter interesse em apenas uma visualização do aplicativo. De acordo com sua escolha, ele continua com o processo de inscrição.
Aqueles que procedem como anfitriões são solicitados a listar imediatamente sua oferta ou pular essa parte e voltar a ela mais tarde. Os anfitriões também teriam que tirar uma foto de seu cartão de identificação emitido pelo governo para verificar sua identidade.
Ainda assim, o único processo de verificação obrigatório para todos os usuários é a verificação de e-mail.

Depois de concluir o processo de inscrição do cliente, os usuários são direcionados para a tela Explorar, que também serve como guia inicial. A partir daqui, eles podem procurar armazenamento inserindo um local desejado e podem filtrar os resultados da pesquisa. O mapa exibe os pinos de localização do armazenamento disponível. Ao clicar em um deles, na parte inferior da tela aparece um cartão com informações gerais sobre aquele armazenamento.
Outro recurso importante nesta guia é o recurso “Colocar um ponto”. Ao clicar no botão no canto inferior direito, um pequeno alfinete localizador aparece no centro da tela. Ele permanece no centro enquanto o usuário percorre o mapa. Quando o usuário coloca o pino no local desejado e pressiona o botão inferior direito novamente, todos os locais de armazenamento próximos ao pino inserido aparecem na tela.

Depois de encontrar o armazenamento adequado, os clientes podem enviar uma solicitação de disponibilidade online. Como visto na segunda tela acima, os clientes selecionam a data de início desejada e também podem escrever uma nota para o host. É importante mencionar que ainda cabe ao host aprovar totalmente a solicitação do cliente.
Uma coisa que introduzi no aplicativo que ajuda os clientes a decidir sobre o armazenamento são os chips de conquista . Esses chips aparecem na tela de armazenamento e representam uma forma de garantia ao cliente de que o armazenamento encontrado é seguro e confiável. Os hosts são aqueles que obtêm essas fichas por meio da verificação da conta e de um determinado número de transações feitas.

Depois que o cliente reserva um espaço para alugar, ele pode encontrar o negócio na segunda guia - meus aluguéis. Nesta aba, eles têm uma visão geral de todas as ofertas que fizeram. Ao clicar num dos cartões abre-se um ecrã onde a pessoa pode ver o seu negócio mas mais importante, onde pode editar e/ou cancelar a sua reserva. Em ambos os casos, eles são solicitados a confirmar sua ação para não cometer uma ação acidental.

“Mensagens” é a terceira guia deste aplicativo. Também está presente na exibição do aplicativo host porque é mais ou menos universal. O usuário pode pesquisar nos chats, excluir conversas ou arquivá-las. Além disso, no caso da visualização do aplicativo dos clientes, os usuários podem enviar perguntas frequentes pré-geradas (conforme mostrado na terceira cena acima).

As telas de perfil para ambas as exibições de aplicativos são relativamente semelhantes. Na parte superior de ambas as telas está o botão que altera a visualização do app. Pretendia que este botão fosse facilmente acessível. Além disso, se o anfitrião não tiver verificado totalmente sua conta, ele será lembrado e incentivado a concluir a verificação. Esse é o propósito daquele botão verde vibrante na parte superior da segunda tela.

Na visualização do aplicativo dos anfitriões, uma das coisas mais importantes é o gerenciamento de reservas. Para garantir uma experiência perfeita para os hosts, priorizei o design de um sistema intuitivo de gerenciamento de solicitações que permite que eles visualizem e gerenciem solicitações com facilidade.

Adicionar e editar ofertas também é crucial para os hosts. Deve ser fácil adicionar espaços, editar listas e ver avaliações.

Em relação à aba “mensagens” na visualização dos hosts, ela é a mesma para ambas as visualizações do app. No entanto, os chats são divididos/separados entre as duas visualizações diferentes do aplicativo.

Conclusão

Resumindo, o aplicativo Stash&Store foi projetado para resolver o problema de opções de armazenamento seguras e acessíveis para pessoas que precisam de espaço extra para seus pertences. Por meio do aplicativo, os locatários podem encontrar e reservar espaços de armazenamento facilmente, enquanto os anfitriões podem monetizar seu espaço não utilizado.

Se você gostou do meu estudo de caso, bata palmas 50 vezes neste artigo.
Dica profissional: tente segurar o botão de palmas :)

Contato

Sinta-se à vontade para entrar em contato comigo :)
[email protected]
https://www.linkedin.com/in/danis-okic-745a4919a/
https://www.instagram.com/danees6/