Imagem da parte de dentro de uma geladeira

iFridge

Fornecendo um onboarding fluido em uma geladeira smart

UX designUI DesignSeleção de vaga

Sobre

O projeto visa aprimorar a experiência de interagir com uma geladeira smart pela primeira vez. Considerando todos os perfis de usuários, o onboarding deve ser fluído, evitar falhas e redundâncias, para tornar este processo mais eficiente.

Projeto

Este projeto foi desenvolvido para seleção de uma vaga de emprego.

Métodos e técnicas

Pesquisa desk, matriz CSD, mapa mental, moodboard, fluxo de interação, crazy eights, wireframe e protótipo de alta fidelidade.

Ferramentas

Sketch, Miro, papel e caneta.

Imagem com fundo preto e a marca iFridge na cor branca

Logo do iFridge que criei com base na estética do projeto

Descoberta

Devido à pouca informação disponível sobre geladeira smart, recorri à notícias e vídeos de reviews sobre o produto feitos por alguns usuários. Algumas percepções que tive:

  • Usuários não gastam tempo na geladeira
  • Interfaces poluídas e funções escondidas repelem os usuários
  • Só interagem com funções básicas
  • Grande parte se arrepende de ter comprado uma geladeira smart por não saber usar

Dentro do recorte pesquisado, poucos realmente gostam de interagir com a interface da geladeira, e ainda assim necessitam espelhar funções no aplicativo do celular.

Após levantar os pontos de atrito do usuário, busquei entender mais sobre o produto.

Gif de uma mulher na frente de uma geladeira smart.

Vídeo do Youtube por MideSimone - https://youtu.be/C3D-LMR2cX8?si=zkDSVaSzjV81PhOK

Entendimento

Fiz uma pesquisa de mercado para conhecer os modelos de geladeira smart existentes e quais funcionalidades são oferecidas. Fiquei impressionada com as possibilidades que existem nesse tipo de produto!

Anotei o que havia de comum entre os modelos e estruturei um mapa das funcionalidades para ter uma visão completa dos caminhos possíveis e assim direcionar minhas decisões.

Para afunilar o entendimento, pesquisei sobre boas práticas em onboarding de sistemas e organizei os insights gerais em uma matriz CSD.

Imagem com uma lista em tópicos conectados por linhas coloridas

Mapa da estrutura de funcionalidades

Definição

Selecionei 3 funcionalidades que considerei essenciais para entregar valor ao usuário no onboarding:

  • Conexão com dispositivos
  • Personalização
  • Configurações gerais

Estabeleci alguns requisitos para tornar o onboarding mais interessante, como a necessidade de ser interativo e ter animações demonstrando como fazer uma tarefa, além de ser um processo rápido para não perder o engajameto do usuário.

Fluxo

Com base nos requisitos, montei o fluxo do onboarding pensando em ser rápido e objetivo. Por considerar ser uma das etapas mais importantes, realizei muitos ajustes até estar satisfeita, tendo construído vários fluxos distintos no processo.

Imagem com o fluxograma das etapas do onboarding

Fluxo do onboarding

Moodboard

Para direcionar a construção do design, determinei palavras-chave e imagens que representam a atmosfera da solução. Embasei a estética e tom de voz do onboarding em características como aconchegante, criativo e moderno.

Imagem com palavras ao centro e várias fotos ao redor em um fundo branco

Moodboard representando a atmosfera da solução

Ideação

Utilizando a técnica do Crazy Eights pude gerar diversas ideias em pouco tempo para a solução. Gosto muito dessa técnica pois sempre explora minha criatividade ao máximo.

Busquei utilizar poucos textos e destacar a tarefa a ser realizada, mas mantive o cuidado de pensar no layout da tela e nas funcionalidades exibidas, mesmo que não fossem abordadas no passo a passo do onboarding.

Imagem com desenhos em folhas de papel

Os momentos de ideação são os que mais gosto, especialmente quando acontecem em grupo

Design

Utilizando wireframes, projetei as telas com foco em uma navegação simples e acessível. Testei diferentes opções de layout para atingir o objetivo mas com base no que já havia no mercado para permanecer a familiaridade com esse tipo de sistema.

Imagem com sete retângulos representado as telas

O foco é uma navegação simples e acessível

Layout

Para dar vida à estrutura resolvi trabalhar com base no design system da Apple, o Human Interface Guidelines, por ter conhecimento em lidar com essa biblioteca e considerar visualmente agradável. O objetivo também é expandir a experiência com iOS e oferecer um visual familiar ao usuário.

Imagem com quatro telas do sisema da geladeira smart

Algumas telas do iFridge

Devido ao curto prazo do projeto não foi possível aplicar testes com o usuário mas ainda vejo oportunidades de melhoria, como:

  • Analisar o contraste dos botões em laranja
  • Aplicar motion nas microinterações
  • Enxugar a central de Notificações

Protótipo

Estou disponibilizando o link para acessar o protótipo navegável e qualquer feedback é bem vindo!

Protótipo iFridge

Aprendizados

Encurtar processos fornecendo a maior entrega de valor ao usuário exige um poder de síntese muito grande. Esse desafio impulsionou demais meu pensamento crítico e minhas habilidades de prototipação, pois além de criar um fluxo que pudesse atender à proposta, escolhi trabalhar com o design system da Apple para criar uma interface inovadora.