About Me

Resume

Contact

About Me

Resume

Contact

Burger App

Projeto do Certificado Profissional de UX Design do Google

Client

Volt Industry

Services

Visual Design

UI & UX Design

Industries

Travel

Duração

January 2023

Burger App

Projeto do Certificado Profissional de UX Design do Google

Client

Volt Industry

Services

Visual Design

UI & UX Design

Industries

Travel

Duração

January 2023

Paper Wireframe

Começar a desenhar o aplicativo no papel me deu a liberdade de criar várias ideias e soluções para o produto. Nesse momento, não fiquei preso a nenhuma ferramenta, por conta disso, a idealização do produto fluiu melhor. Além disso, os elementos que chegaram aos wireframes digitais, estavam mais adequados para lidar com os pontos problemáticos do usuário. Para a tela inicial, priorizei um processo de pedido rápido e fácil para ajudar os usuários a economizar tempo.

Digital wireframes

À medida que a fase inicial de design foi se desdobrando, me certifiquei de basear os elementos de tela no feedback e nas descobertas da pesquisa com os usuários.

Low-fidelity prototype

A partir dos wireframes digitais, criei um protótipo de baixa fidelidade. Conectei todas as telas que criei, para que o protótipo pudesse ser utilizado em um estudo de usabilidade.

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

Usability study: findings

Conduzi duas rodadas de estudos de usabilidade. As descobertas do primeiro estudo me ajudaram a orientar os wireframes a mockups. No segundo estudo utilizei um protótipo de alta fidelidade e descobri quais aspectos dos mockups precisavam ser refinados.

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

1 - Os usuários querem uma maneira mais fácil de escolher entre entrega e retirada;

2- Os usuários querem um botão de carrinho no menu;

3- Os usuários querem mais opções de personalização;

1 - Users want a easier way for choosing between delivery and pickup;

2- Users want a cart button on the menu;

3- Users want more customization options;

"Eu adoraria se o 'endereço de entrega' e a seção 'forma de pagamento' fossem
na mesma página"

"I would enjoy if the 'delivery address' and 'payment method'
section were in the same page"

"I would enjoy if the 'delivery address' and 'payment method' section were in the same page"

Mockups

Os primeiros designs não permitiam que os usuários procurassem os hambúrgueres escrevendo seus nomes ou mesmo outros termos relacionados. Depois do estudo de usabilidade, adicionei uma barra de pesquisa na parte superior da tela inicial, corrigindo esse problema.

O segundo estudo de usabilidade revelou frustração com o fluxo de checkout, pois os usuários não podiam escolher entre entrega ou retirada, nem escolher entre pagar no app ou na entrega. Também adicionei um botão de carrinho à tela inicial.

Key Mockups

High-Fidelity prototype

O protótipo final de alta fidelidade apresentou fluxos de navegação facilitado para a busca de um hambúrguer específico ou outros itens. Também atendeu às necessidades dos usuários, já que, poderiam escolher entre a opção de retirada ou entrega, pagando no app ou na hora do pedido.

Accessibility considerations

1- Ícones usados para tornar a navegação mais fácil.

2- Acesso fornecido para usuários com deficiência visual através da adição de texto alternativo às imagens para leitores de tela.

3- Criação de uma diferença distinta entre os tamanhos dos elementos ou seleções de cores.

Takeaways

O BurgerApp permite que os usuários com uma agenda apertada peçam comida de maneira rápida e fácil.

Uma citação de um dos colegas que participaram dos testes colegas: “Foi uma experiência muito legal e prazerosa usar o burgerapp. O conceito é muito direto. A navegação pelas páginas é muito fácil de entender.”

O que eu aprendi

Ao projetar o BurgerApp, aprendi que as primeiras ideias para o aplicativo são apenas o começo do processo. Estudos de usabilidade e feedback de colegas influenciaram cada iteração dos designs do aplicativo.

Próximos passos

1- Realizar outra rodada de estudos de usabilidade para validar se os pontos problemáticos que os usuários experimentaram foram efetivamente abordados.

2- Realizar mais pesquisas com usuários para determinar novas áreas de necessidade.

Dribbble

Instagram

Claudio Henrique UX