El proceso de diseño de la experiencia e interfaz de usuario de una app es una de las tareas que casi siempre necesitamos realizar. Tras más 20 años creando aplicaciones, hemos elaborado una guía con los procedimientos que consideramos más importantes y que han pasado a conformar la metodología de diseño de apps de NTS Seidor.
Una metodología que nos permite optimizar tiempos, obtener resultados mejores y más eficaces, y planificar los recursos y tiempos que serán necesarios en esta fase.
Los pasos de nuestra metodología:
1. El reto de diseño, USP y otros comienzos
Todo proyecto empieza con una necesidad. A veces esa necesidad (o necesidades) está clara y definida para cuando el proyecto llega a nuestras manos. Pero en otras ocasiones hay que hacer un trabajo de estudio de las propuestas y los propósitos que se quieren conseguir con la app.
Aquí entra en juego el primer punto, el Reto de Diseño. En él nos preguntamos el porqué, el cómo y el qué de esta aplicación y debatimos sobre ello. También definimos la USP (Unique Selling Proposition o Propuesta Única de Venta) que sirve para reflexionar acerca de los potenciales elementos que harán atractivo o único el uso de la app y que la diferenciarán de otras similares de la competencia.
O dicho de otra manera, nos sirve para ponernos en los zapatos de la persona que va a utilizar la aplicación y pensar por qué va a querer usarla frente a otras que haya en el mercado que cubran una necesidad similar.
2. Los User/Buyer Persona
User/Buyer Persona es una técnica de marketing con la que buscamos conocer y ponernos en la piel de las personas que van a usar la app. Para ello creamos los perfiles ficticios de las personas que representarán los grupos más amplios de usuarios de nuestra app.
Trabajamos en los diferentes perfiles haciendo plantillas en las que imaginamos características y descripciones de esas personas: necesidades, problemas, objetivos, hobbies, actitudes, comportamientos, etc. Todos estos datos nos permiten crear un perfil de usuario que nos ayuda a empatizar con las personas que usarán la app, a entenderlas mejor y a crear una mejor experiencia de usuario, ya que no es lo mismo, por ejemplo, crear una app para una persona de avanzada edad que tendrá necesidades especiales de accesibilidad, que para un adolescente para el que podemos pensar en retos, estímulos visuales, conexiones a redes sociales…
3. Los mapas de empatía
A veces, como complemento a los User/Buyer Persona, creamos mapas de empatía con el objetivo de conocer más en profundidad a los usuarios. Nos hacemos preguntas como: ¿qué ve?, ¿qué piensa?, ¿qué oye? y profundizamos en sus posibles habilidades, miedos y obstáculos, así como qué resultados o beneficios espera usando la app.
De esta manera, intentamos entender las limitaciones y motivaciones que condicionan el uso de la app y pensamos qué podemos hacer para que esa persona se sienta cómoda y quiera seguir usándola el mayor tiempo posible.
4. Customer Journey Maps
Los Customer Journey Maps son guías que tratan de modelizar las interacciones que realiza una persona desde que le surge la necesidad de usar una app, hasta que se convierte en cliente asiduo, la usa con frecuencia e incluso la recomienda a sus familiares y amigos. Estos pasos, a su vez, están comprendidos por etapas, que nos sirven para definir vínculos con el cliente, conocer su motivación y detectar las posibilidades de fidelización que se puedan ir presentando, así como los pain points o puntos de dolor/desistimiento.
En NTS entendemos la función del Customer Journey como la búsqueda de generar vínculos a largo plazo con el usuario, de manera que la experiencia de uso sea agradable y positiva. Jeff Bezos, CEO de Amazon, dijo: “Si en el mundo offline de los negocios tu cliente queda descontento, este contará su mala experiencia a 6 amigos. Si tus clientes quedan insatisfechos en el mundo online, cada uno de ellos puede que llegue a 6.000 amigos”.
Un Wireflow es un esquema u ordenamiento del contenido de una app que representa su estructura visual. Incluye elementos de interfaz, sistemas de navegación y cómo funcionan en su conjunto, poniendo énfasis en el comportamiento. Se define qué hace cada pantalla, no cómo se ve. En este proceso se tiene siempre presente al usuario, poniéndolo en el centro del proceso de diseño.
Para hacerlo, usamos papel y boli, pizarras, rotuladores de colores y programas específicos. Cualquier medio que nos permita hacer y deshacer rápidamente para poder definir diferentes ideas y opciones que van surgiendo en el grupo de trabajo. En este momento el objetivo no es definir el aspecto concreto de los elementos, tipografías y demás elementos de diseño gráfico, sino definir el flujo. Por ejemplo, dónde va ubicado un botón y qué función realiza (a dónde lleva cuando lo pulso). También, qué secciones y elementos situamos en cada parte de la app y los caminos que se pueden seguir para completar acciones concretas (realizar una compra, conseguir alguna información, …).
Una vez finalizado el Wireflow, se trabajan con más profundidad los Wireframes, una cantidad significativa de pantallas que permitan extrapolar la apariencia final de toda la aplicación. Para este proceso, en NTS aplicamos una serie de buenas prácticas que creemos que son determinantes a la hora de diseñar apps útiles y usables y que tienen como objetivo un usuario feliz y satisfecho. ¿Quieres saber cuáles son algunas de estas buenas prácticas? Hablamos de ello en este otro artículo: UX en apps: guía de buenas, y no tan buenas, prácticas. Y también en este otro: ¿Cómo asegurar una buena UX en nuestra Progressive Web App?.
6. El Moodboard
El Moodboard es un conjunto de imágenes que usaremos en la aplicación con la intención de buscar inspiración y definir el ambiente que queremos transmitir con el uso de la aplicación.
En este punto trabajamos con imágenes y colores para definir uno u otro estado de ánimo según el enfoque que queramos darle o el sector al que pertenece el cliente. Por ejemplo, para una aplicación de uso escolar usaremos colores e imágenes que evoquen diversión, alegría y simplicidad en el uso, mientras que para una aplicación de una entidad bancaria escogeremos colores sobrios e imágenes serias de líneas simples, con las que transmitir la confianza que se necesita para el uso de una app de este tipo.
7. El Style Tile
En el Style Tile se sigue trabajando el ambiente que queremos transmitir, pero mostrando elementos de diseño tangibles. Se profundiza en el lenguaje visual definiendo tipografías, títulos, textos, paleta de colores, estilo de líneas, formas en los elementos de un formulario, botones, galerías de iconos, etc. Con el Style Tile vamos afinando el trabajo que iniciamos con el Moodboard, es decir, decidimos el lenguaje y tono que queremos transmitir pero ya eligiendo elementos concretos y definitivos que usaremos en la construcción de nuestra aplicación.
8. El prototipo y la guía de estilos
Con el camino que hemos recorrido hasta este punto, es el turno de recopilar toda la información y trasladarla a un prototipo, el cual es un diseño en alta definición de una parte significativa de las pantallas definitivas de nuestra aplicación. Dependiendo del proyecto, el prototipo puede ser navegable, para una experiencia más cercana a la aplicación final, o diseños estáticos de cada sección o pantalla.
También generamos un documento con la Guía de Estilos en la que se detallan todos los elementos de diseño usados en la aplicación: tipografías, títulos, textos, botones, estilos de formulario, cabeceras,… Así como su disposición y márgenes a considerar a la hora de construir la app.
Con la Guía de Estilos se pretende crear un documento que resuma las decisiones de diseño tomadas durante todo el proceso, que sirva como base al equipo de desarrollo de la app tanto para la construcción inicial de la aplicación, como en el futuro mantenimiento y evolución de la misma.
El cliente en el centro del diseño de apps
Esta es a grandes rasgos la metodología que seguimos. No siempre todas las fases son necesarias en todos los proyectos, ni la metodología se aplica de manera estricta, ya que, por ejemplo, recibimos peticiones para crear apps de empresas en las que la imagen de marca está bien definida y condiciona muchos aspectos de la app y otras en las que ya existen estudios previos sobre comportamiento del público objetivo, patrones de uso, consumo, etc.
En NTS Seidor somos expertos en soluciones de movilidad para empresas y podemos ayudarte a conseguir dar forma a esa idea que tienes. En todos los casos nuestra metodología se adapta a las necesidades de nuestros clientes.
Relacionado: ¿iOS o Android? En lugar de crear aplicacaciones separadas, Ionic te ayuda a crear apps que se puedan ejecutar en múltiples sistemas operativos
Autora
Elena Rodríguez
Diseñadora UI/UX
