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
Arlequim Design System
Arlequim Technologies
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 da Arlequim Technologies, uma empresa de desktop virtual em nuvem.
O nosso time era formado por 3 designers, um gestor de projetos e uma estrategista, e desde o início, buscamos atender às necessidades do cliente através de uma abordagem que incluiu 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.
Funções
Validações com stakeholders.
Criação de wireframes.
Criação de conceito gráfico.
Aplicação de UI.
Criação de Design System.
Tempo de execução
3 meses (2023)
Processo
1/4
Entendendo expectativas e definindo objetivos
Após imersões com stakeholders e colaboradores dos setores de marketing, desenvolvimento e comercial, identificamos os principais desafios que nosso projeto se propunha a resolver. A empresa, que oferece uma solução inovadora de "computador dentro do computador" por meio de desktop virtual em nuvem, enfrentava obstáculos significativos:
Erros de usabilidade
Interface dos usuários (neste caso, aqueles que controlavam o parque máquinas e faziam o gerenciamento do sistema nas empresas contratantes) não era intuitiva em termos de usabilidade.
Visual antigo
O visual do sistema estava muito desatualizado, sem refinamento estético de modo que não refletia o os valores de inovação da empresa nem o momento de escala do produto.
Ausência de autonomia
O momento da empresa era de crescimento e escala do produto. Havia assim a necessidade de estabelecer novas bases visuais e componentes bem documentados para que o time interno de produto pudesse dar andamento em novos módulos e funcionalidades com autonomia.
Inconsistência
Havia problemas de padronização e consistência em novas funcionalidades e interfaces.
“Temos dificuldades na criação de novas telas”, “Nosso design é muito engessado no código”, “Não fazemos protótipos de alta fidelidade ainda, mas queremos”, “O sistema precisa ser mais intuitivo”.
Essas frases apareceram logo na primeira reunião com stakeholders, realizada presencialmente na sede da empresa. A partir delas foi que entendemos que o desafio que tinhamos pela frente envolvia redesign de parte do que já possuíam, e a criação de um Design System.
Ainda no inicio rodamos outras 3 conversas importantes:
Com time de desenvolvimento:
Desde o inicio ficou decidido que uma empresa terceira iria implementar o DS que desenhássemos. Essa conversa inicial foi importante para estabelecer combinados de handoff, que em resumo diziam respeito à forma de entrega e documentação no figma, bem como a decisão por implementarem em Vue.js.
Com o time de marketing:
Esta conversa importou, dentre outros motivos, pra entendermos o posicionamento estratégico da marca do cliente. Nela soubemos também que um manual de marca estava em vias conclusão o que posteriormente acabou orientando aspectos de id visual do produto.
Com time de comercial:
Este era um time que fazia as primeiras tratativas técnicas com os clientes do produto, e foi legal conversar com eles pois possuíam diversos feedbacks de usabilidade.
Processo
[02]
Priorizando telas, analisando usabilidade e criando wireframes
Após a fase inicial, colaboramos na seleção das telas principais do sistema, sobre as quais conduzimos uma análise de usabilidade. Essa análise foi fundamental para o repensarmos a estrutura base do sistema, que incluiu novos layouts para menus, headers e outros componentes. Posteriormente, traduzimos essas melhorias em wireframes mais detalhados.
<1>
Após imersões com stakeholders e colaboradores dos setores de marketing, desenvolvimento e comercial, identificamos os principais desafios que nosso projeto se propunha a resolver. A empresa, que oferece uma solução inovadora de "computador dentro do computador" por meio de desktop virtual em nuvem, enfrentava obstáculos significativos com relação ao produto:
Entendendo expectativas e definindo objetivos
>
O visual do sistema estava muito desatualizado, sem refinamento estético de modo que não refletia o os valores de inovação da empresa nem o momento de escala do produto.
Visual antigo
>
Interface dos usuários (neste caso, aqueles que controlavam o parque máquinas e faziam o gerenciamento do sistema nas empresas contratantes) não era intuitiva em termos de usabilidade.
Problemas de usabilidade
>
O momento da empresa era de crescimento e escala do produto. Havia assim a necessidade de estabelecer novas bases visuais e componentes bem documentados para que o time interno de produto pudesse dar andamento em novos módulos e funcionalidades com autonomia.
Ausência de autonomia
>
Havia problemas de consistência nas interfaces já existentes e uma preocupação de que despadronização permanecesse a medida que o produto evoluísse.
Iconsistência
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.
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.
Entendendo expectativas e definindo objetivos
Processo
[01]
A partir de imersões com stakeholders e colaboradores dos setores de marketing, desenvolvimento e comercial, identificamos os principais desafios do projeto. A Arlequim, que oferece uma solução inovadora de "computador dentro do computador" por meio de desktop virtual em nuvem, enfrentava obstáculos significativos.
Erros de usabilidade
A interface dos usuários (neste caso, aqueles que controlavam o parque máquinas e faziam o gerenciamento do sistema nas empresas contratantes) não era intuitiva em termos de usabilidade.
Visual antigo
O visual do sistema estava muito desatualizado, sem refinamento estético de modo que não refletia o os valores de inovação da empresa nem o momento de escala do produto.
Ausência de autonomia
O momento da empresa era de crescimento e escala do produto. Havia assim a necessidade de estabelecer novas bases visuais e componentes bem documentados para que o time interno de produto pudesse dar andamento em novos módulos e funcionalidades com autonomia.
Inconsistência
Havia problemas de padronização e consistência em novas funcionalidades e interfaces.
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.
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.
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.
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.
