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:

Double Diamond Design Process

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

Insights o Conclusiones

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:

The Golden Circle sobre 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:

Mínimas soluciones viables

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:

Visualiza el SITE MAP 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.

Visualiza el Flowchart

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.”

Caso práctico de Las Leyes UX aplicadas a DIDITASK-VISUALIZAR HACIENDO CLIC AQUÍ

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.

Esta es la visualización de los símbolos creados.
Visualiza el Design System en DSM (Design System Manager)

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:

Accede al TEST DE USUARIOS

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.

Matriz de Feedback

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