JOY DESIGN SYSTEM
Redesign de interfaces e a construção de um Design System light e dark mode.
OVERVIEW
O projeto, realizado na Catarinas Design, teve como objetivo a construção de um Design System e a modernização da UI da plataforma de uma empresa de desktop virtual em nuvem. Desde o seu início, buscamos atender às necessidades do cliente através de uma abordagem estratégica, que incluiu pesquisa qualitativa em rodadas de conversa com diferentes setores da empresa, mapeamento das áreas prioritárias do sistema, revisão de usabilidade, criação de um novo visual dark e light mode e a implementação de um Design System.
MEU PAPEL NO PROJETO
Minha participação no projeto foi de ponta a ponta, envolvendo:
-
Entrevistas e validações com stakeholders
-
Criação de wireframes.
-
Criação de conceito gráfico.
-
Aplicação de UI.
-
Criação de Design System.
*O nosso time escalado para execução desse projeto contou com um Gestor de Projetos, uma UX Strategist, eu e mais 2 UX Designers.
TEMPO DE EXECUÇÃO
X meses
Joyter App UX Design
Joyter
Criamos um aplicativo (mobile), gamificado, de inteligência emocional focado em ansiedade.
E um Design System.
Overview
Realizado na Catarinas Design, o projeto teve como objetivo a construção de um app cuja finalidade é estimular as pessoas em atividades de autocuidado emocional, com foco em alívio de ansiedade.
Nosso desafio, baseado na pesquisa, foi construir uma solução cujo valor para as pessoas não se restringisse apenas ao alívio de crises emocionais pontuais, mas que contemplasse um benefício maior: o envolvimento das pessoas em autocuidado a longo prazo.
Em termos de solução digital, optamos pela gamificação como forma de engajamento.
Funções
Liderado por mim, minha atuação no projeto foi de ponta a ponta: desde a fase inicial de descoberta até a criação da interface, incluindo a construção de um Design System.
Atualmente, tenho acompanhando a fase de implementação junto aos devs.
Tempo de execução
12 meses (mai. 2023 - mai. 2024)
Entendendo expectativas e definindo objetivos
Processo
[01]
As primeiras reuniões foram essenciais para compreendermos que o propósito deste projeto era desenvolver um produto cujo valor entregue às pessoas seria a redução dos sofrimentos emocionais associados à ansiedade e a promoção de uma vida orientada para o bem-estar.
Logo de início ficou claro uma das maiores expectativas do stakeholders: eles já haviam um outro app semelhante rodando no mercado, mas enfrentavam problemas de retenção - os usuários assinavam, utilizavam o app por pouco tempo, e cancelavam.
Decididos a não tentar corrigir o produto que já possuíam, contaram com a gente para construir um produto novo do zero com uma concepção nova projetada para o engajamento. De inicio ainda sem nome, hoje essa solução é a Joyter.
Em termos de processo de Design, nessa etapa inicial de imersão, realizamos algumas atividades para nos contextualização e aprofundamento do time.
Análise do app que já possuiam
Fizemos análises no app que o cliente já possuía, e encontramos possíveis problemas de fluxo e usabilidade. A partir dessas análises nós levantamos dúvidas que foram exploradas posteriormente na etapa de pesquisa.
Análise de pesquisa prévia
Os Stakeholders já haviam realizado entrevistas e rodado um questionário com alguns dos usuários do app que possuíam. Nesta etapa imersiva ouvimos as gravações e analisamos os dados quanti a fim de nos contextualizarmos mais sobre o tema de bem-estar emocional e motivações dos usuários na utilização do app.
Análise de comentários na app store
No Google Play identificamos e categorizamos as principais dores e reclamações das pessoas com relação a experiência que tinham utilizando o app - isso foi bem importante pois conseguimos aprofundar essas questões na etapa de pesquisa.
Processo
[02]
Descobertas da pesquisa: motivações e comportamentos de uso.
Neste etapa de pesquisa nossos objetivos eram claros:
-
Identificar quais as causas associadas ao desengajamento dos usuários e consequente baixa na métrica de retenção e churn.
-
Identificar que valor os usuários enxergavam no uso inicial do app.
-
Entender contexto e como utilizavam o app.
-
Identificar dores.
-
Identificar oportunidades de melhoria.
Pós matriz CSD e criação de Plano de Pesquisa: Entrevistamos 8 pessoas (3 assinantes, 3 não-assinantes e 2 ex-assinantes do app). Devido ao tema sensível das conversas (vulnerabilidade emocional e ansiedade) todas pessoas entrevistadas preferiram que as entrevistas não fossem por video-chamada, mas por ligação telefônica.
Como resultado da pesquisa obtivemos as seguintes descobertas:
Motivação de busca e uso do app: fragilidade emocional.
Pessoas em estado de fragilidade emocional e desamparadas buscavam um espaço de acolhimento onde pudessem conversar e compreender os seus problemas.
São pessoas que tem, ou já tiveram, experiência com psicoterapia formal, mas anseiam por cuidado para além dos momentos em que estão no consultório.
A possibilidade de ter a mão o celular como instrumento de alívio de ansiedade (com técnicas e conversas programadas) a qualquer hora e momento entregava bastante valor aos usuários.
Havia problemas graves de continuidade no fluxo
Um relato recorrente nas entrevistas foi o de que as pessoas se sentiam "sem saber o que fazer depois" de realizarem alguma atividade terapêutica ou terem uma conversa no app. Assim, sentiam falta de uma experiência unificadora das atividades soltas no app, careciam de um senso de continuidade.
O comportamento imediatista como modelo de explicação do churn e não conversão.
Na medida em que sentiam alguma melhora com a experiência do app, diminuíam ou interrompiam o uso. Assim o churn dos assinantes, e não conversão de não-assinantes, estavam associados a melhora emocional momentânea.
A forma com a qual usavam o app, estava em sintonia com a forma com a qual o enxergavam.
O app não tinha nenhuma proposta de uso a longo prazo, ou seja, nada nele proporcionava o engajamento. Era assim que os usuários utilizavam o app, era assim que eles enxergavam o app. Daí a oportunidade de ter o autocuidade a longo prazo como proposta de valor do negócio e consequente aumento da retenção do produto.
Escolhemos as telas-chave para redesign com base na complexidade, frequência de uso e quantidade de componentes específicos que a interface demandava.
Nevagamos no sistema, printamos e organizamos os fluxos e suas respectivas telas através de prints no Miro. Ali fizemos análises de usabilidade indicando o que seria preciso melhorar com base em heurísticas.
Com seleção de telas e análises feitas, partimos para materialização das novas soluçôes de arquitetura da informação e componentes em Wireframes de alta fidelidade.
Modernizando o visual e criando o Design System
Processo
[03]
Na etapa final do processo, focamos na criação de uma nova interface visual (UI) e na elaboração do Design System. Para a nova UI, realizamos debates internos importantes sobre light e dark mode, definição de componentes e documentação.
UI Dark e Light Mode
Foi importante garantir que a versão light mode não fosse a versão espalhada, mero reflexo do dark. Dessa forma, garantimos uma experiência otimizada para ambos os modos, levando em consideração questões de acessibilidade para ambos os temas.
Mapeamento de componentes
O Design System incorporou novos componentes derivados das novas UIs, além de incluir diversas famílias de componentes fundamentais para capacitar o time interno de produto a expandir o sistema conforme necessário.
Documentação
Além da criação dos componentes, definimos Design Tokens, e elaboramos uma documentação abrangente, detalhando suas respectivas anatomias.
Novas UI's
Durante a fase de criação da interface do usuário (UI), iniciamos com a elaboração de um conceito gráfico alinhado às diretrizes do brandbook, porém, flexibilizamos em certos aspectos para atender às demandas do produto. Um dos principais desafios foi manter a consistência da paleta de cores da marca, especialmente ao desenvolver os modos light e dark, priorizando a acessibilidade. Nossa abordagem resultou em uma UI que reflete a identidade da marca, garantindo funcionalidade e uma experiência de usuário otimizada.
Design System
.png)
Começamos a criação do Design System pela definição das variáveis semânticas de estilo (Design Tokens), que abrangeu cores, fontes, border radius, opacidade, sombras, Inline & stack spacing e spacing inset.
A partir dos Design Tokens, criamos os Componentes.
A lógica de construção foi partir de Base Components (componentes menores e indivisíveis) para a construção dos Components (mais complexos).
Ao todo, o DS ficou composto por 32 famílias de componentes, contemplados seus respectivos estados (default, hover, disabled, pressed, error e outras variações), em Light e Dark modes.
Ainda, cada componentes contou com descritivo de "O que são" e "Pra que servem" bem como representação visual das anatomias.
No fim, um dos designers carinhosamente batizou o DS como Joy.
No fim, aprendizados...
Durante o desenvolvimento deste projeto, adquiri aprendizados que contribuíram significativamente para minha prática profissional. Uma das experiências mais enriquecedoras foi a habilidade de articular conversas com uma variedade de stakeholders, incluindo desenvolvedores, membros do departamento comercial, marketing e o time de produto. Essa diversidade de perspectivas e necessidades exigiu uma comunicação clara para garantir que todas as partes estivessem alinhadas aos objetivos do projeto.
De um ponto de vista mais técnico, enfrentamos um desafio significativo ao definir os aspectos visuais de light e dark mode. Esta questão exigiu uma imersão em leituras e estudos para compreender as melhores práticas e garantir uma experiência de usuário coesa em ambos os temas. Este processo destacou a importância da pesquisa detalhada e da experimentação iterativa para alcançar resultados satisfatórios.
Por fim, um recurso que gostaria de ter explorado mais, mas não foi possível neste projeto, é o uso de variables nos tokens do Design System. Esta é uma funcionalidade que reconheço como fundamental para a eficiência e consistência do design em projetos futuros.