Design Evolutivo focado na Experiência do Usuário

Transcript

1. Design Evolutivo 

   em

   Ambientes Ágeis

   

   com foco na Experiência do Usuário"
   

   View Slide

2. View Slide

3. HAITI!
   Contexto
   País mais pobre das Américas.
   

   View Slide

4. CLIENTE PIH!
   Contexto
   Saúde de qualidade pra quem mais precisa.
   

   View Slide

5. MIREBALAIS!
   Contexto
   Tecnologia e infraestrutura de alto padrão.
   

   View Slide

6. NOSSO TIME!
   Contexto
   2 BAs 1IM 3TW DEVs 4PIH DEVs 2UX
   

   View Slide

7. OPEN MRS!
   Contexto
   Electronic Medical Record (EMR)
   

   View Slide

8. NO INÍCIO TUDO ERA TREVAS!
   

   View Slide

9. UX & AGILE!
   Necessidades de UX
   Como encaixar num projeto em andamento?
   = ?
   

   View Slide

10. PRIMEIRA FASE"
    

    View Slide

11. DEFININDO

    PERSONAS!
    Conhecer as
    pessoas e entender
    suas rotinas.
    

    View Slide

12. JORNADA

    DO USUÁRIO!
    Os passos de cada
    tipo de usuário a fim
    de finalizar uma
    tarefa, dentro e fora
    do sistema.
    

    View Slide

13. FLUXO DE

    TELAS E 

    NAVEGAÇÃO!
    Parte de software da
    jornada do usuário
    mais detalhada.
    

    View Slide

14. TRABALHANDO

    COM SUPOSIÇÕES!
    

    View Slide

15. " "PRIMEIRA FASE"
    "
    " "1 mês de duração
    Personas
    Jornada do Usuário
    Fluxo de tela e navegação
    

    View Slide

16. SEGUNDA FASE"
    

    View Slide

17. SKETCHES!
    Testando conceitos
    em tempo record.
    

    View Slide

18. MOCKUPS!
    Salvando vidas, uma
    estória por vez.
    

    View Slide

19. PROTÓTIPOS!
    Prototipagem &
    validação rápida
    

    View Slide

20. PROTÓTIPOS • MELHOR AMIGO !
    

    View Slide

21. TESTES COM

    USUÁRIOS!
    Gravação de voz,
    video e mouse
    Arquivistas do hospital Lacolline
    Clínicos do Haiti/US
    Técnico de radiologia
    Gerente do hospital
    

    View Slide

22. Exemplo video
    TESTES COM

    USUÁRIOS!
    

    View Slide

23. Navegação - mensagens de sucesso, breadcrumbs
    e atalhos
    Conteúdo - melhor tradução e mais instruções
    Formato password e navegação por teclado
    TESTES COM USUÁRIOS!
    Conclusões
    

    View Slide

24. GUIA DE

    ESTILO!
    Cores, tipografia, botões
    e elementos gráficos
    pré-definidos.
    

    View Slide

25. GUIA DE

    ESTILO!
    

    View Slide

26. FRAMEWORK SASS !
    Estilo modular
    Funções
    Variáveis
    Mixins
    

    View Slide

27. FRAMEWORK SASS !
    Arquivo único
    Compila todos
    estilos
    

    View Slide

28. " "SEGUNDA FASE"
    "
    Iterações de 2 semanas
    Mockups / Sketches
    Protótipos Rapidos
    Teste com usuários
    Guia de estilo
    Framework SASS
    

    View Slide

29. RESULTADO"
    

    View Slide

30. FUTURO DO OPENMRS?!
    

    View Slide

31. GUIA DE ESTILO APLICADO!
    

    View Slide

32. !FEEDBACK USUÁRIOS!
    Navegação por teclado foi de fácil aprendizado.
    Icones intuitivos.
    Médicos acharam fácil de acessar informações
    pelo dashboard do paciente.
    Alertas e feedback das ações são bastante im-
    portantes.
    

    View Slide

33. !FEEDBACK CLIENTE!
    Não houve reclamações dos usuários quanto ao
    sistema. Isso significa que foi um sucesso.
    A interface é tão simples e de fácil utilização
    que não foi preciso
    mostrar aos usuários como fazer as tarefas
    apenas mostrar o que estava disponivel para se
    fazer.
    

    View Slide

34. @glauberamos!
    @nataliarsand!
    

    View Slide