Selecione Página

Design de interface do usuário e estudos de caso

Bem-vindo ao meu portfólio de UX Design.

Esta parte do meu portfólio inclui 3 estudos de caso de IU, de pesquisa para maquetes de alta fidelidade:

  • App padoca: aplicativo de e-commerce para padaria brasileira em Montreal, QC
  • Florista NYC: site responsivo para Florist NYC, uma floricultura com sede na cidade de Nova York, EUA.
  • Comida saudável: projeto social para ajudar as pessoas a aprenderem a preparar refeições mais saudáveis. Incluindo designs para um aplicativo e um site responsivo.

Projeto de app de Padoca

Cliente

  • Padoca Pâtisserie Montreal

Serviços

  • UI para aplicativo

Entregas

  • Maquetes de baixa fidelidade
  • 1ª rodada de pesquisa de usuário
  • Ajustes e protótipo de alta fidelidade
  • Guia de estilo

Experimentando serviços de entrega incorretos com parceiros terceirizados, o Padoca 's proprietários decidiram que começarão a entregar seus produtos sozinhos.

Com um aplicativo totalmente novo, eles puderam controlar a entrega e outras opções, além de ter dados importantes sobre as preferências de seus clientes.

O aplicativo os ajudaria a oferecer melhores opções de entrega e melhorar o desenvolvimento de produtos para seus negócios.

Sobre concorrentes

Montreal conta com cerca de 6 outros competidores em Padocacampo de, mas ninguém tem um aplicativo exclusivo. Eles usam principalmente o telefone para receber pedidos de serviços de terceiros, como Foodora ou Uber Eats. Ou você pode mandar um e-mail para eles.

Nenhum deles oferece pedidos online por meio de seu próprio site.

Quem são os clientes da Padoca? Criação de personas para um melhor entendimento.

Após realizar pesquisas sobre os clientes da Padoca, crio 2 personas, a partir de características que se destacaram nos formulários coletados. O método de pesquisa usado aqui foi um formulário de 10 perguntas criado no Formulários Google. Foi enviado diretamente aos clientes que aceitaram respondê-lo nas horas vagas.

jornada dos usuários e primeiros modelos

Com as 2 personas em mente, era hora de entender como as pessoas usariam o aplicativo durante um dia normal. Era preciso considerar o jornada dos usuários para construir algo, era fácil e rápido de usar em um dia normal de trabalho. Durante a pesquisa, os clientes desejam ver dois recursos (apresentados nas personas): reserva de mesa e pedido online.

Primeiro criei exemplos de jornadas de usuários para imaginar como Philippe usaria o aplicativo em um dia agitado depois do trabalho, no metrô ou no ônibus voltando para casa.

Para ler uma jornada do usuário mais detalhada com base na personalidade de Philippe, clique em aqui.

Depois de uma compreensão clara do jornada do usuário, ficou mais fácil pensar e desenvolver algumas telas de maquete. Elaborei basicamente dois conjuntos de sugestões para submeter à aprovação dos clientes. Tive que pensar em como incorporar as necessidades dos consumidores em um design atraente.

wireframes

Padoca's os proprietários tinham uma ideia clara do caminho a seguir neste aplicativo. Considerando todos os aspectos da pesquisa do usuário, era hora de projetar os primeiros wireframes no Figma. Achei importante fazer outra pesquisa para validar os wireframes. Também mostraria se eu sempre estive no caminho certo. 

O conceito original com 3 colunas ...

… Foi alterado após a pesquisa do usuário.

O mesmo para a tela de revisão….

… Onde a opção de alterar o pedido foi adicionada.

Assista aos testes de vídeo lo-fi:

PROTÓTIPO DE ALTA FIDELIDADE E TESTES FINAIS

Com os 5 testes em mente, o protótipo de alta fidelidade foi criado. Também fiz testes depois, para validar algumas alterações feitas. Vou compartilhar as telas feitas, mas você pode testar o protótipo funcional completo clicando aqui.

Projeto de site responsivo da florista NYC

Florista NYC é uma pequena floricultura localizada na cidade de Nova York, EUA. Eles precisavam de um site responsivo para mostrar e vender online. Por se tratar de um mercado concorrido, o desafio aqui foi incorporar alguns recursos e serviços que os usuários gostam, mas não encontram nos sites de outras pequenas floriculturas.

Cliente

  • Florista NYC Inc.

Serviços

  • UI para site responsivo

Entregas

  • Pesquisa de usuário
  • Maquetes de baixa fidelidade
  • Ajustes e protótipo de alta fidelidade

Clientes da florista NYC Inc.: criando personas para um melhor entendimento.

Realizei pesquisas online para conseguir clientes de floriculturas na área de Nova York (você pode ver a pesquisa e os resultados aqui) Era importante ter pessoas que compram flores online, mas também pessoas que pretendem comprar mas não confiam 100% neste tipo de serviço. O objetivo aqui era entender quais recursos as pessoas gostariam de ter para comprar flores online. E especialmente algo que poderia fazer Florist Inc.o site da empresa se destaca da concorrência.

algumas ideias de maquete com base nas primeiras pesquisas do usuário

Antes de perceber os primeiros wireframes em Adobe XD, Esbocei algumas idéias no papel para obter alguns visuais rápidos sobre os problemas a resolver. Como os usuários querem escolher e comprar rapidamente, um design claro com formatos diferentes para as imagens foi o caminho a percorrer. Visualmente, era mais eficiente navegar de uma seção para a outra. Minha hipótese foi validada por algumas pesquisas para o teste de protótipo.

Para as primeiras maquetes, desenvolvo pequenas seções onde as fotos seriam colocadas para tornar o processo de compra fácil e rápido. Como as pessoas às vezes desejam comprar de última hora, é importante dar-lhes ótimas sugestões na página inicial ou apresentar uma maneira fácil de escolher. Os usuários identificaram que um link para a mídia social seria ótimo para ter inspiração e ideias.

PROTÓTIPO DE ALTA FIDELIDADE E TESTES FINAIS

Nas galerias a seguir, você pode encontrar os protótipos de alta fidelidade para o site responsivo. No topo, adicionei os modelos para a versão desktop. Na parte inferior, foram adicionadas as maquetes da versão para smartphone. Para essas maquetes, mantive pontos que se destacaram durante a pesquisa: Florista NYC clientes de mídia social e sugestões para compra rápida.

para o bem social: app e site de comida saudável

Aplicativo e site da Healthy Food é um projeto de bem social para ensinar as pessoas a preparar alimentos mais saudáveis. Com base em algumas pesquisas, tentei projetar algo para servir a clientes básicos: pessoas que precisam cozinhar para si e / ou suas famílias; e pessoas que precisam cozinhar algo para ocasiões especiais, para impressionar familiares e convidados em um jantar especial, por exemplo. 

projeto

  • Ajude as pessoas a preparar refeições mais saudáveis

Serviços

  • IU para aplicativo e site responsivo

Entregas

  • Pesquisa de usuário
  • Maquetes de baixa fidelidade
  • Ajustes e protótipo de alta fidelidade

Personas criadas após pesquisa do usuário

Realizei pesquisas online para entender melhor o que motivaria as pessoas a cozinhar de forma mais saudável. O ato de cozinhar leva tempo e custa dinheiro. Descobri basicamente dois grupos: um que quer / precisa cozinhar regularmente e o outro que quer cozinhar para ocasiões especiais. 

As duas personas apresentadas aqui sintetizaram esses 2 grupos e me ajudam a projetar recursos para o aplicativo e depois para o site servir a ambos.

Aqui abaixo você tem mapas de viagem e declarações de problema criado para ajudar a idealizar os primeiros esboços:

algumas ideias de maquete com base nas primeiras pesquisas do usuário

A loucos oitos foram o primeiro passo para começar a ter algumas ideias claras sobre como projetar e apresentar os recursos do aplicativo e do site.

Para as primeiras maquetes em Adobe XD, Desenvolvi seções onde as fotos seriam colocadas para inspirar os usuários a aprender como preparar aquela refeição.

Aqui está o mock-up para a tela inicial em 3 versões: celular, tablet e tela de desktop.

protótipos de alta fidelidade para aplicativo e site

Após a idealização e as primeiras maquetes, era hora de desenvolver protótipos de alta fidelidade adicionando fotos e alguns textos verdadeiros.

Um dos desafios aqui foi projetar o aplicativo e o site e manter a consistência da marca. No aplicativo, precisei adicionar nas telas algumas funcionalidades que em um site podemos colocá-las de forma diferente, seguindo outro arquitetura.

Este é o fluxo de trabalho básico para algumas telas do aplicativo em um breve clipe de filme:

Seguindo aqui, você tem algumas telas do site, e como elas devem se ajustar (desktop e tablet).

Escolho para a versão tablet o menu de hambúrguer. Aqui você pode ver o Início e o receitas rápidas Páginas.

Obrigado pelo seu interesse no meu trabalho!

Estou disponível para aluguel ou freelance
Portfólio de web designContato