Sobre

Novo design do aplicativo mobile e web para parceiros do Mata Larica que atua como app de delivery em Bambuí.​ O objetivo foi proporcionar uma melhor experiência para os restaurantes que vendem seus produtos pelo Mata Larica.

Minha Função

UI/UX Designer

Duração do Projeto

3 meses

Entregáveis

Personas
Style Guide
Protótipo Interativo
Handoff
Documentação

O processo

O primeiro passo foi entender a demanda e quais frameworks de design poderiam ser aplicados. Para entender melhor foi realizado um briefing com o CEO da empresa, após a análise foi criado um Kanban para visualizar as demandas que se deram em:

Discovery

Após entender a demanda, pude entender que o projeto se daria em uma biblioteca de componentes e a realização de um protótipo navegável. Buscando entender as demandas do mercado, realizei uma desk research  e uma análise de competidores sobre os produtos similares ao Mata Larica.

Após a desk research e a análise de competidores, foi possível tirar alguns insights:

Primeiras Impressões:.

  • O iFood e Zé Delivery possuem telas iniciais amigáveis e intuitivas.
  • O aiqfome possui um design simples e leve, mas peca no contraste dos ícones.
  • O UaiRango possui muitas informações, o que pode tornar a experiência massante.

Funcionalidades:

  • Os competidores do Mata Larica oferecem diversas funcionalidades, como filtrar por categoria, preço e tempo de entrega, favoritar restaurantes, acompanhar o pedido e usar cupons de desconto, assim como o Mata Larica.
  • O Zé Delivery se destaca por oferecer a opção de filtrar por marca de bebidas e participar do programa Zé Fidelidade.

Usabilidade:

  • O iFood possui interface fácil de usar, navegação fluida e design responsivo.
  • O aiqfome possui um design simples e leve, mas peca no contraste dos ícones.
  • O UaiRango possui muitas informações, o que pode dificultar a navegação.
  • O Zé Delivery possui interface fácil de usar e design divertido.

Fluxo do Usuário Cliente:

  • O Mata Larica possui um fluxo de usuário cliente similar ao iFood, aiqfome e UaiRango.
  • O Zé Delivery possui um fluxo específico para bebidas, com a opção de filtrar por marca.

FluConsistência:

  • O iFood e UaiRango apresentam alta consistência entre plataformas e dispositivos.
  • O aiqfome possui consistência entre plataformas, mas com problemas de legibilidade e acessibilidade.
  • O Zé Delivery possui alta consistência entre plataformas e dispositivos.

Design:

  • O iFood possui design moderno, limpo e atraente.
  • O aiqfome possui design simples e leve, mas peca no contraste dos ícones.
  • O UaiRango apresenta design simples com muitas cores, mas com problemas de acessibilidade.
  • O Zé Delivery possui design divertido e atraente.

Considerações Finais:

O Mata Larica tem potencial para competir com seus principais concorrentes, ainda mais focando em usabilidade, acessibilidade, consistência e design do aplicativo. 

Proto Personas

Buscando entender quem são os usuários do Mata Larica, criei 3 proto personas:

Site Map

Para entender como fucionava o fluxo do aplicativo do Mata Larica – Parceiros, criei um site map, buscando entender como os usuários navegavam pelas funcionalides e qual seria minha proposta.

Documentação

Ainda durante o briefing foi solicitado uma biblioteca de componentes, para que houvesse padronização em futuros desenvolvimentos, tanto pro app do cliente quanto pro parceiro, pensando nisso gerei algumas documentações importantes para que tudo dentro do sistema se converse.

Ideação

Para criar a biblioteca de componentes (style guide), criei um moodbard, levantei todas as cores que seriam necessárias (Primárias, destaques, neutras e de feedbacks), criei as tipografias de base e de highlight, defini padrões de bordas, sombras e espaçamentos. Com a base definida, comecei a criar os componentes.

Após a biblioteca de componentes pronta, dei inicio ao desenvolvimento das telas para o protótipo navegável.

Entrega

Após a apresentação e alguns ajustes, fiz um handoff de toda parte visual para entregar ao desenvolvedor, com o objetivo de facilitar o desenvolvimento e diminuir o máximo as dúvidas. Um exemplo do que foi entregue: