Projeto de redesign: plataforma on-line de ensino de beleza

Projetar um aplicativo responsivo para conectar professores de beleza e entusiastas da beleza, do conceito ao protótipo.

Função

Estagiário de design UX/UI

Função

Estagiário de design UX/UI

Função

Estagiário de design UX/UI

Setor

Beleza e comércio

Setor

Beleza e comércio

Setor

Beleza e comércio

Duração

1 ano (2021)

Duração

1 ano (2021)

Duração

1 ano (2021)

móvel
móvel
móvel

Etapa 1. Análise do aplicativo atual

Utilizando insights da metodologia Design Sprint, conduzimos uma série de mini-sessões para aprofundar os problemas, utilizando sessões iniciais e a matriz de certezas, suposições e dúvidas. Embora o cliente tivesse ideias iniciais para resolver o problema, dedicamos tempo para explorar melhor a experiência atual do usuário, mapeando os pontos problemáticos, os objetivos e os riscos.

Etapa 2. Análise da concorrência e análise heurística

  • Nossa análise da concorrência forneceu insights valiosos sobre como outras plataformas de aulas de beleza on-line navegavam na jornada do usuário. Isso nos permitiu identificar nossos diferenciais exclusivos e apontar as áreas em que estávamos faltando.

  • A análise heurística informou nosso processo de redesenho, nos ajudando a reduzir as complexidades do usuário e a criar uma plataforma mais simples e fácil de usar.

Etapa 3. Criação de protopersonas e remodelagem do fluxo do usuário

  • As proto personas foram desenvolvidas com base no conhecimento das partes interessadas devido à insuficiência de dados do usuário no início. Essa abordagem nos permitiu avançar apesar da falta de informações diretas do usuário.


  • Dedicamos um tempo significativo à iteração do fluxo do usuário, estabelecendo uma base sólida antes de nos concentrarmos no design do layout. Esse fluxo de usuário foi crucial para orientar a conversa, apoiar os desenvolvedores e agilizar a criação dos wireframes finais. Comparamos os fluxos de usuários Free e Premium para refinar nosso design, pois tínhamos diferentes proto personas.

Etapa 1. Análise do aplicativo atual

Utilizando insights da metodologia Design Sprint, conduzimos uma série de mini-sessões para aprofundar os problemas, utilizando sessões iniciais e a matriz de certezas, suposições e dúvidas. Embora o cliente tivesse ideias iniciais para resolver o problema, dedicamos tempo para explorar melhor a experiência atual do usuário, mapeando os pontos problemáticos, os objetivos e os riscos.

Etapa 2. Análise da concorrência e análise heurística

  • Nossa análise da concorrência forneceu insights valiosos sobre como outras plataformas de aulas de beleza on-line navegavam na jornada do usuário. Isso nos permitiu identificar nossos diferenciais exclusivos e apontar as áreas em que estávamos faltando.

  • A análise heurística informou nosso processo de redesenho, nos ajudando a reduzir as complexidades do usuário e a criar uma plataforma mais simples e fácil de usar.

Etapa 3. Criação de protopersonas e remodelagem do fluxo do usuário

  • As proto personas foram desenvolvidas com base no conhecimento das partes interessadas devido à insuficiência de dados do usuário no início. Essa abordagem nos permitiu avançar apesar da falta de informações diretas do usuário.


  • Dedicamos um tempo significativo à iteração do fluxo do usuário, estabelecendo uma base sólida antes de nos concentrarmos no design do layout. Esse fluxo de usuário foi crucial para orientar a conversa, apoiar os desenvolvedores e agilizar a criação dos wireframes finais. Comparamos os fluxos de usuários Free e Premium para refinar nosso design, pois tínhamos diferentes proto personas.

heurística
heurística
heurística
persona
persona
persona

Etapa 4. Wireframes e prototipagem

  • Após a pesquisa inicial e o desenvolvimento da persona, comecei a projetar wireframes de baixa fidelidade usando o Miro. Esses wireframes, tanto para aplicativos móveis quanto para desktop, foram criados em estreita colaboração com a equipe para garantir o alinhamento com as necessidades do usuário e as metas do projeto.


  • Para a próxima fase, estabelecemos um guia de estilo abrangente, incluindo tipografia, cores, ilustrações e logotipos. Todo o protótipo foi desenvolvido no Figma, incorporando elementos interativos para facilitar a entrega perfeita aos desenvolvedores. Isso permitiu testes completos com as partes interessadas e os usuários, garantindo que o design atendesse aos padrões de usabilidade e estivesse pronto para o mercado.

Etapa 5. Apresentação final e entrega

  • Preparou e entregou especificações de design e ativos para a equipe de desenvolvimento, garantindo uma transferência tranquila e fornecendo suporte durante os estágios iniciais do desenvolvimento do aplicativo.

wireframes
wireframes
wireframes
móvel
móvel
móvel
final
final
final

Reflexões

Esse projeto foi uma oportunidade inestimável de aplicar os princípios de design de UX/UI em um ambiente do mundo real, contribuindo para um produto que promove a conectividade social e a exploração de campos de beleza. Ele me desafiou a pensar de forma criativa sobre como atender às necessidades e preferências do usuário, aprimorando minhas habilidades em pesquisa, design e colaboração. A experiência ressaltou a importância do feedback do usuário no processo de design e o impacto de um design bem pensado no envolvimento e na satisfação do usuário.

Experimente no Figma

A etapa final envolveu a publicação dos componentes em F͟i͟g͟m͟a͟. Isso foi feito para facilitar o acesso de todos os usuários e desenvolvedores.

Reflexões

Esse projeto foi uma oportunidade inestimável de aplicar os princípios de design de UX/UI em um ambiente do mundo real, contribuindo para um produto que promove a conectividade social e a exploração de campos de beleza. Ele me desafiou a pensar de forma criativa sobre como atender às necessidades e preferências do usuário, aprimorando minhas habilidades em pesquisa, design e colaboração. A experiência ressaltou a importância do feedback do usuário no processo de design e o impacto de um design bem pensado no envolvimento e na satisfação do usuário.

Experimente no Figma

A etapa final envolveu a publicação dos componentes em F͟i͟g͟m͟a͟. Isso foi feito para facilitar o acesso de todos os usuários e desenvolvedores.

Outros projetos