Fernando Lins

Sobre

Sou um designer gráfico especializado em interfaces digitais e um aficionado da simplificação de experiências confusas e tediosas.

Prezo por projetos graficamente minimalistas que entregam valor, clareza de uso e acessibilidade. Acredito que ideias complexas podem ser executadas através de projetos bem estruturados com base em pesquisa com os usuários.

2019 - Blue Digital
Projetista de Experiência do Usuário
2015 - Tabmedia
Head de UX Design
2014 - Silent Circle
Projetista de Interfaces Sênior
2008 - Google
Designer de Interfaces

Voltar ao menu ↑

Caso - Design System para Banco Digital

o Problema

O cliente, um banco digital brasileiro, havia desenvolvido um design system para seus aplicativos mobile mas não contemplou nele suas ferramentas internas, que são utilizadas em computadores desktop e notebooks. Estas ferramentas eram manipuladas somente através de APIs sem interface gráfica e não tinham uma linguagem visual, paradigmas de interface ou padrões de interação estabelecidos.

o Processo

Os responsáveis pelas ferramentas internas e seus usuários foram entrevistados como primeira parte do processo. Eles demonstraram o funcionamento de cada ferramenta e suas expectativas de usabilidade, assim como benchmarks. Como resultado das entrevistas em pessoa e das pesquisas feitas por formulário foram identificadas as jornadas e uma lista de funcionalidades com maior prioridade.

Através de design sprints adaptados para a realidade dos projetos e suas equipes foram projetadas soluções para cada um dos itens na lista de prioridades, primeiramente com wireframes de baixa fidelidade, depois com protótipos navegáveis em alta fidelidade no Figma, e finalmente a implementação dos componentes em sistema atômico com os desenvolvedores front-end.

Sessões de treinamento e de feedback dos projetos alimentaram os sprints seguintes para desenvolver melhorias e aumentar o alinhamento entre a experiência de uso dos softwares e o modelo mental dos usuários.

os RESULTADOs

  • Os projetos ganharam visibilidade entre os times internos e facilitaram a transição de ferramentas de terceiros para ferramentas internas.

  • A biblioteca de padrões de interface e a disseminação do design system entre as equipes permitiu que funcionalidades fossem implementadas em apenas 2 dias úteis, da especificação, desenho do fluxo, programação do front-end até os testes de QA.

  • As APIs passaram a ser desenvolvidas refletindo a facilidade existente na interface gráfica e a integração com o front-end.

  • Os erros de deploy se tornaram menos comum dada a camada de segurança que foi adicionada pelo desenho de fluxos que impedem erros dos usuários e validam as alterações antes de serem enviadas.

Wireframe de baixa fidelidade utilizado para fazer pesquisas com os usuários: entender suas necessidades no dia-a-dia para aumentar a velocidade de execução das tarefas era o objetivo.
Protótipo em alta fidelidade no Figma: Os casos de uso da interface foram definidos em documentação viva utilizando componentes inteligentes e modulares (design atômico).
Protótipo em alta fidelidade no Figma: Era importante para as equipes economizar tempo em tarefas repetitivas e configurar diversos assets do ambiente de uma vez só. As telas permitem adicionar e remover assets de acordo com a necessidade do desenvolvedor e pré-visualizar o resultado antes de enviar dados sensíveis em ambiente de produção.
Telas de sistema interno para banco digital
Fluxos de navegação do sistema no Figma
Telas de sistema interno para banco digital

Voltar ao menu ↑

Caso - UX e UI para VST de Produção Musical

o Problema

O cliente me contatou querendo melhorar a usabilidade e organização do seu software VST para engenharia de som. Softwares VST são auto-contidos e rodam dentro de outros softwares de produção musical. Geralmente competem com diversas outras soluções de mercado e necessitam traduzir conceitos complexos de engenharia de áudio para os usuários.

o Processo

Primeiramente os fluxos de funcionamento do software foram elencados de acordo com o seu manual de instruções. A revisão do manual trouxe à tona conceitos e fluxos que poderiam ser confusos ou que não tinham uma tradução adequada na interface. Isto também levantou algumas preocupações quanto à tecnicalidade dos textos do manual e dos rótulos utilizados na interface do software.

Separando a execução do projeto de acordo com grupos de funcionalidades, as telas foram redesenhadas de maneira a organizar os elementos provendo assim uma melhor arquitetura de informação e acessibilidade onde funcionalidades similares se encontrariam vizinhas e fluxos completos de manipulação do som pudessem ser vistos de uma vez só, sem necessitar trocar de abas e adivinhar quais controles afetavam ou não o som.

Para que a interface e a linguagem fosse coesa dentre os diversos softwares da empresa, foi desenvolvido um guia de identidade e de interface com componentes inteligentes que adaptam o layout a diferentes tamanhos de tela e configurações dos próprios softwares.

os RESULTADOs

  • A criação de uma biblioteca de componentes promoveu a unificação dos estilos de interface, controles e padrões de fluxo entre os softwares da suíte.

  • Os termos que foram substituídos elucidaram o funcionamento de funcionalidades que eram desconhecidas para os usuários, uma vez que estes raramente lêem os manuais de instrução.

    Como efeito paralelo, o próprio desenvolvedor resolveu redesenhar alguns fluxos internos do software para que a lógica do código ficasse também mais fácil de entender e fazer manutenção.

  • A identidade visual do projeto ajudou a firmar atualizar a percepção da empresa como atual e inovadora.

Guia de cores e componentes para desenhar as interfaces dos softwares VST seguindo as cores da identidade e um estudo de contraste.
Protótipo em alta fidelidade no Figma: A pesquisa indicou que os usuários preferem interfaces escuras para trabalhar em seus estúdios e à noite. O teste de contraste indicou boa legibilidade nos setups dos clientes.
A interface representa o fluxo do som, atravessando os controles e as tabs da esqueda para a direita, sendo a primeira tab representativa do primeiro passo e alteração do som, e a última tab o último processamento. In > Processamento > Out.
Telas de sistema interno para banco digital

Voltar ao menu ↑

Outros Projetos

Voltar ao menu ↑

Voltar ao menu ↑

Contato

Entre em contato comigo, vamos falar sobre novos projetos e parcerias!

E-mail

+55 11 972097807

Voltar ao menu ↑