Projeto freelance voltado à criação da base visual e funcional para um sistema de gestão de clínicas.
Fui responsável pela identidade visual, mockups, design system, documentação e handoff.
Uma empresa de tecnologia me procurou para criar a identidade visual e mockups de um fluxo de agendamento para o MVP do seu novo SaaS.
A ideia de construir um Design System pra esse projeto surgiu quando o cliente demonstrou a intenção de continuar expandindo o sistema para outros módulos no futuro.
Pra facilitar meu trabalho, decidi criar uma base reutilizável e flexível, que me ajudasse a manter tudo consistente à medida que o sistema fosse crescendo.
1.
Identidade Visual
Comecei criando uma identidade visual bem enxuta, estabelecendo inicialmente a paleta de cores e tipografia.
2.
Tokens e Variáveis
Com a paleta e tipografia definidas, o próximo passo foi criar a base de variáveis no Figma.
Para organizar os tokens, usei uma estrutura em três níveis: marca (brand), pseudônimos (alias) e papéis (role).
Marca
No nível de marca (brand) eu guardei os valores brutos de cor, tipografia e escala.
Pseudônimos
No nível de psudônimos (alias), são atribuídos nomes aos valores brutos para referência.
Papéis
No nível de papéis (role), as referências recebem função.
As variáveis também foram fundamentais para atender um ponto chave do projeto: o sistema precisava suportar duas visões diferentes.
De um lado, os profissionais, que utilizam o sistema de gestão internamente.
Do outro, os pacientes, que acessam um portal público dentro do mini-site de cada clínica para agendar e acompanhar consultas.
Essa configuração exigia flexibilidade no design, já que cada clínica possui sua própria identidade visual e precisava ser refletida nas interfaces.
Estrutura dos Tokens de Cor
A imagem acima explica a estrutura dos tokens de cor.
As cores neutras, chamadas general, são compartilhadas entre todos os tipos de usuário e aplicadas em elementos como backgrounds, bordas e textos.
Os tokens com system são usados exclusivamente na visão interna do sistema, enquanto os tokens com user armazenam as cores de cada clínica.
No backend, esses tokens user são sempre vinculados à cor personalizada da marca, garantindo que os componentes se adaptem à identidade visual de cada cliente sem perder consistência.
Os tokens de papéis (role) seguem a lógica: surface indica o elemento da interface onde a cor será aplicada, system define o tipo de usuário (clínica ou paciente) e secondary-action representa o estado ou função específica daquele elemento.
3.
Componentes
Para construir os componentes, segui com a metodologia Atomic Design, do Brad Frost.
Escolhi essa metodologia com a intenção de organizar os componentes em diferentes níveis de complexidade, facilitando a manutenção e a reutilização em novos fluxos.
Aqui, mostro como pequenos átomos evoluem até formar organismos completos, como o card de seleção de horário.
4.
Handoff e Documentação
Toda a documentação foi centralizada no Figma, com a especificação detalhada dos componentes, suas variações, estados, e exemplos de uso.
Anotações de Acessibilidade
Para garantir boas práticas de acessibilidade, usei o Web Accessibility Annotation Kit para registrar propriedades de cada componente, como botões, links e imagens, indicando os atributos acessíveis e comportamentos específicos.
5.
Design
Por fim, os mockups mostram a aplicação do Design System tanto no fluxo do usuário profissional quanto na experiência do paciente.
Thifany Brito