Frontend - Integrando diseño y desarrollo

A talk i gave, in Santiago de Chile, to show how to integrate design in an agile development team.

Transcript

1. X
   O
   S
   3
   1
   FRONTEND
   INTEGRANDO DISEÑO Y DESARROLLO
   

   View Slide

2. X
   O
   S
   3
   2
   ¿POR QUÉ ESTAMOS AQUÍ?
   

   View Slide

3. X
   O
   3
   PARA
   1. Aclarar procesos
   2. UX vs UI
   3. Diseño Modular vs BUD (big upfront design)
   4. Alineamientos de diseño
   5. Cerrar el circulo “frontend”
   6. Empatía Diseñador/Dev
   

   View Slide

4. X
   O
   S
   3
   4
   HABLEMOS EL MISMO IDIOMA
   

   View Slide

5. X
   O
   S
   3
   5
   UX
   Intuitivo
   Facil de usar
   Satisfactorio
   Navegación simple
   Accesibilidad
   UI
   “Look and feel” (estilos)
   Marca
   Tipografía
   Distribución/Alineación
   Composición visual
   IxD
   Comportamiento
   Interacción
   

   View Slide

6. X
   O
   S
   3
   6
   UX
   UI
   IxD
   iUX
   UR
   ST
   CX
   Service
   Design
   Product
   Design
   UR: User Research
   
   CX: Customer Experience
   
   ST: Strategy
   
   iUX: Interface User Experience
   
   UI: User Interface Design
   
   IxD: Interaction Design
   
   UX: User Experience
   

   View Slide

7. X
   O
   S
   3
   7
   UX
   UI
   IxD
   iUX
   UR
   ST
   CX
   Service
   Design
   Product
   Design
   UR: User Research
   
   CX: Customer Experience
   
   ST: Strategy
   
   iUX: Interface User Experience
   
   UI: User Interface Design
   
   IxD: Interaction Design
   
   UX: User Experience
   

   View Slide

8. X
   O
   S
   3
   8
   CAPAS IUX
   COMPOSICIÓN NAVEGACIÓN INTERACCIÓN
   

   View Slide

9. X
   O
   9
   EL “CORE” DE UX/UI/DEV
   1. Guidelines de OS/WEB
   2. Componentes nativos
   3. Patrones de Navegación
   4. Componentes propios (custom)
   5. Interacciones y Micro-interacciones (motion como UX)
   

   View Slide

10. X
    O
    S
    3
    10
    LA MEJOR FORMA DE HACER “PAIRING” ES
    HABLAR, CONVERSAR, COMPARTIR.
    

    View Slide

11. X
    O
    11
    PO/BA/UX/QA
    1. Usuario Vs. Negocio
    2. Design Factory Vs. Product Design
    3. HDUs ≠ Pantallas
    

    View Slide

12. X
    O
    12
    BA/UX
    1. Necesidad del Usuario
    2. Valor de negocio
    3. Especificación
    4. HDUs Base
    

    View Slide

13. X
    O
    13
    UX/UI
    1. Consistencia
    2. Regiones Base (layout, espacios, distribución)
    3. Navegación Base
    4. Interacción Base
    5. Empty States
    6. Overlays
    

    View Slide

14. X
    O
    14
    UI/DEV
    1. Consistencia
    2. Composable elements
    3. Composable components (Scrolls, flows)
    4. Feedback constante
    

    View Slide

15. X
    O
    15
    UX/DEV
    1. Consistencia
    2. Comportamiento
    3. Movimiento
    4. Patrones
    5. Composición
    

    View Slide

16. X
    O
    S
    3
    16
    Investigación Diseño Desarrollo 16
    

    View Slide

17. X
    O
    S
    3
    17
    PROCESOS
    

    View Slide

18. X
    O
    S
    3
    18
    MVP
    layout navegación
    componentes interacción
    HDUs
    narrativa
    empty states
    overlays
    navegación
    Idea Validación UX IxD UI Desarrollo
    

    View Slide

19. X
    O
    S
    3
    19
    “FEATURES”
    componentes
    HDUs
    navegación
    “Feature” Validación UX UI
    Desarrollo
    IxD
    componentes
    layout
    

    View Slide

20. X
    O
    S
    3
    20
    UN SISTEMA DE DISEÑO
    

    View Slide

21. X
    O
    S
    3
    21
    DISEÑO ATÓMICO
    @BRADFROST
    

    View Slide

22. X
    O
    S
    3
    22
    

    View Slide

23. X
    O
    S
    3
    23
    

    View Slide

24. X
    O
    24
    DEFINIR
    1. Elementos
    2. Regiones de la interfaz (“blockframing”)
    3. Patrones de Navegación
    4. Estrategia de tests con usuarios
    5. Guideline UX/UI Dinámico por plataforma
    6. Refinación de UI iterativa
    7. Propagación de cambios
    

    View Slide

25. X
    O
    S
    3
    25
    PIPELINE DISEÑO
    

    View Slide

26. X
    O
    S
    3
    26
    Investigación Diseño Desarrollo 26
    NEGOCIO USUARIO
    

    View Slide

27. X
    O
    S
    3
    27
    Investigación Diseño Desarrollo 27
    NEGOCIO USUARIO
    

    View Slide

28. X
    O
    S
    3
    28
    Investigación Diseño Desarrollo 28
    NEGOCIO
    USUARIO
    

    View Slide

29. X
    O
    S
    3
    29
    Investigación Diseño Desarrollo 29
    NEGOCIO
    USUARIO
    

    View Slide

30. X
    O
    30
    PANTALLAS VS COMPONENTES
    

    View Slide

31. X
    O
    31
    PENSEMOS EN COMPONENTES
    1. La UI modular
    2. Agilidad en el proceso
    3. HDUs más “lean”
    4. Desarrollo modular
    5. Cambios modulares
    

    View Slide

32. X
    O
    32
    HDUS LEAN
    HDU PANTALLAS COMPONENTES
    

    View Slide

33. X
    O
    S
    3
    33
    Investigación UX Diseño UX
    Análisis y Refinamiento HDU
    Diseño UI
    Sprint de Desarrollo
    2 semanas
    2 semanas
    FRONTEND SPRINTS
    UX/UI
    BA
    DEV
    HDU
    33
    

    View Slide

34. X
    O
    S
    3
    34
    UX/UI
    BA
    DEV
    2 semanas
    2 semanas 2 semanas
    2 semanas
    INVESTIGACIÓN UX DISEÑO UX
    ANÁLISIS Y REFINAMIENTO HDU
    DISEÑO Y REFINAMIENTO UI
    SPRINT DE DESARROLLO
    HDU
    INVESTIGACIÓN UX DISEÑO UX
    ANÁLISIS Y REFINAMIENTO HDU
    DISEÑO Y REFINAMIENTO UI
    SPRINT DE DESARROLLO
    HDU
    INVESTIGACIÓN UX DISEÑO UX
    ANÁLISIS Y REFINAMIENTO HDU
    DISEÑO Y REFINAMIENTO UI
    SPRINT DE DESARROLLO
    HDU
    FLUJO
    

    View Slide

35. X
    O
    S
    3
    35
    UX/UI
    BA
    DEV
    2 semanas
    2 semanas 2 semanas
    2 semanas
    INVESTIGACIÓN UX DISEÑO UX
    ANÁLISIS Y REFINAMIENTO HDU
    DISEÑO Y REFINAMIENTO UI
    SPRINT DE DESARROLLO
    HDU
    UX/UI UX/UI
    HDU
    U
    SPRINT DE DESARROLLO
    HDU
    UX/UI UX/UI
    HDU
    UX/UI
    SPRINT DE DESARROLLO
    HDU
    FLUJO
    

    View Slide

36. X
    O
    S
    3
    36
    Investigación Diseño Desarrollo 36
    

    View Slide

37. X
    O
    S
    3
    NEGOCIO
    37
    Investigación Diseño Desarrollo 37
    NEGOCIO
    USUARIO
    USUARIO
    

    View Slide

38. X
    O
    S
    3
    38
    GRACIAS :D
    @_juanmnl
    

    View Slide