PART II: DISEÑANDO UNA APP DE GESTIÓN DE TAREAS PARA NIÑOS EN COLABORACIÓN CON LOS PADRES | CASO UX MOBILE
Propósito de la APP, Site map, Flow diagram, Flowchart, Prototipo racionalizado, UI, User Testing
En primer lugar, recapitulamos la investigación y la estrategia vista en la PARTE I: Cómo construir una experiencia de usuario+herramientas UX aplicada al negocio de juguetes. Y en segundo lugar, expongo la creación y solución de la app.
ESQUEMA DOUBLE DIAMOND DESIGN PROCESS PARA LA APP:
FASE 1. MAPEAR EL RETO & OVERVIEW
Os dejo las plantillas creadas con un diseño enfocado al negocio de juguetes para los que no os hayáis leído la parte I. Las herramientas a continuación corresponden al Double Diamond Design Process de las dos primeras fases:
fase 1: Mapear o Descubrir
fase 2: Explorar o Definir
BRIEFING
FASE 2. EXPLORAR
UX RESEARCH & INSIGHTS
SCOPE CANVAS
PROPUESTA A CLIENTE
Empezamos con la fase 3: Construir las potenciales soluciones a los problemas del usuario.
FASE 3. CONSTRUIR
3.1 EL PROPÓSITO DE LA APP: THE GOLDEN CIRCLE
Si nos situamos en un entorno real tras la investigación y estrategia UX. ¿Cómo venderemos nuestro producto?
En este vídeo de Simon Sinek explica la teoría The Golden Circle o Círculo Dorado sobre la cual mi aplicación estará basada:
Aplicamos la teoría del Círculo Dorado a la app que la llamaremos DIDITASK APP:
Este esquema representa las mínimas soluciones viables, es decir las soluciones más pequeñas que permiten logran con éxito los resultados deseados, que tendrá DIDITASK APP:
3.2 SITE MAP
A continuación estructuro en un árbol de contenido la app o también llamada la arquitectura de la información de la aplicación. Este site map ha sido creado en Mindnode:
3.3 FLOW DIAGRAM
Los diagramas de uso se deben realizar sobre los casos de uso o escenarios hechos en la investigación. Este diagrama está hecho para dos de los escenarios:
El padre 1 no tiene instalado la app
El padre 2 tiene instalada la app
Este diagrama de flujo fue creado en AXURE. Aunque hay mucha herramientas que podéis usar como: Whimsical, Realtimeboard, Mindmeister.
3.4 FLOW CHART
Navega por la app con la herramienta Overflow, te permitirá contar la app de una manera más original como las pantallas están conectadas y su estructura. Además está basada en el Flow Diagram previamente hecho pero de forma visual.
3.5 PROTOTIPO RACIONALIZADO
En este punto explicamos el por qué del diseño anterior fundamentado en las Leyes UX o como menciona Carlos Beneyto en su artículo de Leyes UX con casos prácticos: “La recopilación de leyes o normas de diseño que los diseñadores deben tener en cuenta a la hora de pensar y mejorar la experiencia de usuario.”
3.6 VISUAL DESIGN
Antes de hacer esta fase, deberíamos hacer un test con el prototipo previamente creado. Una vez testado el prototipo con usuarios iniciamos el UI. En mi caso no me dio tiempo, aunque si fui teniendo feedback de lo hecho anteriormente.
En el visual o UI (interfaz del usuario) damos color al prototipo de la app y genero las correctas interacciones para facilitarle al usuario el viaje en la app.
Finalmente, creo un DESIGN SYSTEM en el DSM (Design System Manager) de Invision.
TIP: Para crear el DSM tenéis que descargaros el plugin para Sketch y crear Symbols en Sketch para que se sincronizen en el DSM.
ITERACIÓN DEL PROTOTIPO
1. USER TESTING
1.1. Test en remoto
Podemos hacer un test en remoto con la herramienta de analítica MAZE, proporciona ayuda para definir: objetivos, misiones, recoger insights y saber cómo los diseños han rendido a las sesiones hechas en esta herramienta.
Lo mejor de MAZE es que permite analizar el diseño a través de : heatmaps/mapas de calor, success rates/ratios de éxito o miss-clics/olvido de clics. Sólo hay que mapear los objetivos y descubrir cómo el usuario interactúa con el prototipo.
También puedes importar tu prototipo desde Invision, Sketch o Marvel. En mi caso, lo he importado desde Marvel.
Anímate y participa en el test:
1.2. Análisis del Test en remoto
Una vez obtenido el resultado hay que hacer un informe, donde estableceremos una guía y responderemos a:
¿Pueden los usuarios navegar con éxito en el diseño a través de una tarea?
¿Son mis elementos y componentes visuales, incluyendo los textos e iconos, claros?
¿Cuánto necesita un usuario para completar una el proceso de onboarding?
¿Donde se confunden los usuarios en el onboarding?
2. MATRIZ DE FEEDBACK
Cómo explica Thinkersco: “a través de la matriz de feedback conseguimos información, sugerencias, críticas o ideas nuevas procedentes del usuario.”
Esta matriz de feedback nos permite testear para poder mejorar el propotipo y saber que funciona y no.
FASE 4. SOLUCIÓN
PREVIA DEL PROTOTIPO Y MARKETING
Los vídeos ayudan mucho a visualizar el producto para tener una previa de los que nos encontraremos en la app.
El objetivo es: tener el mayor número de descargas y un mayor ROI (Retorno de la Inversión). Y no sé vosotros, pero antes de descargarme una app, suelo siempre visualizar el vídeo. Este formato potenciará la promoción de la app debido a:
fomento de una mayor credibilidad
conocimiento del concepto de la app por parte de los usuarios
visualización de la propuesta de valor
una mayor retención de la información de la app por las imágenes
PROTOTIPO A MOSTRAR
Puedes probar el prototipo en Marvel:
FORMAS DE PRESENTAR EL PROTOTIPO A LOS DESARROLLADORES
HERRAMIENTA ZEPLIN
Si los desarrolladores usan esta herramienta podrán:
MODO PDF
Aunque este método para un diseñador es más lento, también es eficaz, aunque puede inducir a más errores.
Colocar el diseño y las especificaciones a la derecha: tipología de letra, colores, explicación UX, algo de CSS.
TIPS PARA QUE EL DISEÑO ESTE ALINEADO CON EL DESARROLLO
Recordar que los diseños tienen que estar en base al framework utilizado por los desarrolladores. En mi caso he usado el siguiente Grids y el diseño es para iOS:
Columns
6 columnas
Witdh: 345px
Total Witdh=345pt
Offet/Margins=15pt
Gutter Witdth=9pt
Column Width=50pt
Rows
Gutter Height=12pt
Row Height=5pt*Gutter Height
Este post es la parte II del proyecto Dideco que se compone de III partes.
También podéis ver la presentación aquí.
Clica aquí para ver la PARTE I: CÓMO CONSTRUIR UNA EXPERIENCIA DE USUARIO+HERRAMIENTAS UX APLICADAS AL NEGOCIO DE JUGUETES
Clica aquí para ver la PARTE III: CÓMO HACER UN ANÁLISIS HEURÍSTICO+OPTIMIZACIÓN WEB DE DIDECO
Podéis seguirme en Twitter: @sotomayorstudio o Linkedin si os interesan estos temas.
CHECK MY WEBSITE: sotomayorstudio.com
