Trilha UX Design How we figured out we had a SRE team at - Documentação consistente de UI, como diminuir a fricção entre Design e Desenvolvimento!

1. ©2017 Evino. All rights reserved.
Documentação consistente de UI
Como diminuir a fricção entre Design e Desenvolvimento!
Por Juscieldo (Lavi) Santos • Product Design Lead at Evino

2. Documentação consistente de UI
©2017 Evino. All rights reserved.
Agenda
• Entendendo o seu Time
• Criando Comunicação
• Visibilidade é a Chave
• Toolbox
• Documente a UI
• Motion. Muito além da interface
• Unificar

3. Documentação consistente de UI
©2017 Evino. All rights reserved.
Entendendo o seu time

4. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Entender o setup do time, e como ele está distribuído dentro
das competências da empresa e do produto, é fundamental
para o plano de ação de documentação de design.
As competências (perfis) e como seu time é estruturado irá dizer
quais serão as melhores ferramentas para aprimorar e
documentar seu processo de design.
Observe antes de agir

5. Documentação consistente de UI
©2017 Evino. All rights reserved.
Entendo as áreas e seus papéis;
Produto TechDesign
TDC2017 SP

6. Documentação consistente de UI
©2017 Evino. All rights reserved.
Criando comunicação

7. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Product Design Team
Envolva os desenvolvedores no dia a dia do time de Design.
Seja nas discussões mais técnicas, seja no discovery ou no
próprio momento de conceituar e criar interfaces

8. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP

9. Documentação consistente de UI
©2017 Evino. All rights reserved.
Visibilidade é a chave

10. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Claro como cristal
Os erros de implementação de design começam bem antes da
UI propriamente feita.
Torne visível seu trabalho em todos os canais possíveis e sempre
alinhe as expectativas com os engenheiros envolvidos no
processo.

11. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Software Jira
Design
Backlog

12. Documentação consistente de UI
©2017 Evino. All rights reserved.
Toolbox

13. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Pessoas antes de ferramentas
As ferramentas e softwares são apenas um reflexo da sua capacidade
de comunicação cross-team, existem uma série de ferramentas que
atendem a diferentes propósitos.
Cabe ao time de design escolher as ferramentas que mais fazem
sentido dentro do contexto do qual os engenheiros e os designers
estão envoltos. Todo designer precisa se comunicar antes de
documentar.

14. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
CraftSketch Slack JiraAxure Zeplin Notion.so Dropbox & Abstract
+
Biblioteca de AsssetsInterface Comunicação VisibilidadeWireframes Especificação Documentação Versionamento
Evino Design toolbox

15. Documentação consistente de UI
©2017 Evino. All rights reserved.
Documente a UI

16. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Pessoas antes de ferramentas
Não basta apenas criar a interface, ela precisa ser explicada nos
mínimos detalhes. E explicar não é apenas conversar com o
engenheiro, a documentação precisa ser tangível para ser consultada
a qualquer momento.

17. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Documentação Evino Design Team
Specs Pixel Perfect Pixel Perfect Layout

18. Documentação consistente de UI
©2017 Evino. All rights reserved.
Motion. Muito além da UI

19. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Quando um vídeo vale mais
que 1000 telas
• Mostre componentes separados para diminuir
complexidade na execução.
• Interação com mobile e fluxo complexos podem
ser facilmente demonstrados.

20. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Quando usar:
FramerPrinciple
Curva de aprendizagem altaCurva de aprendizagem baixa
• Precisa de agilidade;
• Sem fluxos complexos;
• Interações objetivas;
• Demonstrar interação.
• O projeto é longo;
• Fluxos complexos;
• Testes fidedignos;
• Interações Apps nativas.

21. Documentação consistente de UI
©2017 Evino. All rights reserved.
Unificar

22. Documentação consistente de UI
©2017 Evino. All rights reserved.
TDC2017 SP
Estruture de Pastas
Crie um workflow de pastas
que todo este material e
assets seja facilmente
acessados e visíveis dentro
do workflow do seu time.

23. Documentação consistente de UI
©2017 Evino. All rights reserved.
Um presente

24. ©2017 Evino. All rights reserved.
Cheers!