André Matiazzo
Wavy
2017Ajudei a refazer a interface do Wavy, um produto da Movile para empresas que se comunicam por SMS. O projeto também se preocupou em adaptar a interface para receber outros dois canais: email e voz.
O que fiz
- Arquitetura da informação
- Design de interação
- Identidade visual
- HTML + CSS
- Escrita
Histórias e sistemas
Aprendi com Mills Baker que designers precisam alternar entre story thoughts e system thoughts o tempo todo enquanto projetam interfaces digitais – levar em conta o que os usuários esperam do sistema e o que faz sentido dentro dele mesmo.
Como sistema, o Wavy já era bem pensado pelos desenvolvedores backend. Sua interface, nem tanto. Ela era distante dos modelos mentais das pessoas que usavam o produto, o que fazia com que muitas funções e áreas dele fossem descobertas apenas por tentativa e erro.
Um exemplo de sistema virando história
As opções de relatórios (16, ao todo) tinham nomes perigosamente parecidos. Na nova hierarquia, as mesmas informações seriam acessíveis a partir de um único lugar, o que diminuiria a ocorrência de casos anteriores como: "será que é esse o relatório que eu quero? puts, não".
Escrita
Lidar com uma plataforma de três anos de idade é lidar com nomes conhecidos por quem a construiu, por quem fala dela e por quem a usa. Me atentei à forma como as pessoas nomeavam as entidades do Wavy para manter a consistência por todo o produto, introduzir novos termos e também questionar decisões tomadas no passado.
Frontend
Lá pelo terceiro mês do projeto, comecei a usar mais o tachyons em alguns projetos pessoais – como esse site – e sugeri que o adotássemos para o Wavy. Já estávamos trabalhando com a modularização dos elementos da interface, mas eu sentia que, usando tachyons, seríamos forçados ainda mais a reduzir nossas variações e a manter o visual consistente por todo o projeto.
Em duas semanas, eu e Hudson traduzimos tudo o que já havíamos feito de frontend nesses três meses para a nova versão.
O CSS escrito em tachyons convive com outros, escritos para elementos visuais mais complexos e que aparecem com frequência ao longo do Wavy. O caminho para modularização não era o que mais nos agradava, porque a desvantagem em usar essa biblioteca é o custo da manutenção de todos os objetos – que precisam ser atualizados página à página.
Identidade visual
Type heavy
Começar o projeto com a restrição (criada por mim mesmo) de que a identidade visual deveria se apoiar em tipografia reforçou a atenção aos detalhes: a dose errada transformaria os elementos numa mancha encharcada de texto.
À esquerda
Para que identidade visual ficasse mais elegante, decidi também que os objetos da interface flutuariam para a esquerda. Um dos problemas dessa decisão foi que em telas muito largas, nas quais você precisava de um objeto mais à direita, era quase inevitável que ele ficasse à deriva.
Estudo em que os inputs até ficaram bonitinhos, mas muito parecidos. As pessoas mal sabiam diferenciá-los.
