27 Jun
Mano abocentado la interfaz de una aplicación móvil en un post-it, es una parte del proceso de diseño

La importancia de seguir un proceso de diseño

Diana Hidalgo Marín
Hago, enseño y aprendo diseño.

Los recursos y herramientas no hacen que un diseño tenga éxito, ni siquiera la experiencia, sino el método.

Al margen de modas y tendencias e incluso de las novedades del vertiginoso sector que es el diseño web, los recursos de los diseñadores siempre son los mismos. Nos manejamos con formas y contraformas, movimiento, colores, tamaños y jerarquía, tipografía, composición, psicología e iconografía; luego en web, trasladamos todas esas decisiones a elementos más concretos, como menús, imágenes, formularios, botones… Y las herramientas siempre son las mismas también: papel y lápiz, Axure, Sketch, Marvel, Zeplin, Photoshop, etc.

Pero no son los recursos ni las herramientas los que hacen que nuestro trabajo sea un éxito o no. Utilizar Helvetica o Sketch no nos hace mejores. La clave tampoco es la técnica para emplear dichos recursos. Ni siquiera la destreza o la experiencia, puesto que cada proyecto o cliente es un mundo por descubrir y lo que funcionó con uno no tiene por qué ser efectivo con otro. Está demostrado que lo verdaderamente importante no es más que, junto a la ilusión y un buen equipo, cumplir un conjunto mínimo de procedimientos. Un método que, efectivamente, garantiza buenos resultados.

Se trata de un proceso flexible puesto en práctica, validado y contrastado que ayuda enormemente a conseguir los objetivos de cualquier proyecto.

Antes de nada, para poder empezar, hay que contar con una descripción exhaustiva de los objetivos validada por cliente en colaboración directa. Se hará un listado detallado de requisitos que deberán quedar reflejados en un documento de alcance, que servirá de referencia para todo el equipo. Es muy posible que al principio sea difícil definir ciertas tareas que irán tomando forma sobre la marcha pero, además de evitarlas en la medida de lo posible, hay que asegurarse de que no se invertirá trabajo en ellas sin concretar antes para no sufrir pérdidas.

Además, en aquellos proyectos que lo permitan, las tareas de diseño que sean susceptibles de ser medibles, contarán con un indicador libre de subjetividades que determine si el trabajo en conjunto cumple los objetivos o no.

Una vez que disponemos del documento de alcance y las acciones a realizar están priorizadas, se puede pasar a la acción:

Fase UX (Experiencia de usuario)

1. Investigación

Hay que empezar a conocer al cliente y sus usuarios o consumidores. Haremos un estudio etnográfico a través de entrevistas, cuestionarios o de observación, tomando notas de campo y registrando dichas actividades en vídeo o audio 📹.

Cuando la relación cliente–usuario sea eminentemente digital, el seguimiento será monitorizado con herramientas de análisis como Google Analytics, SemRush y similares, pero aún así los cuestionarios y el feedback directo a través de tests o reviews será necesario para ir definiendo el Buyer Persona que nos interesa.

🤓 Puede que quieras saber algo más: «¿Qué es un buyer persona?»

2. Conceptualización

En este punto pasamos a volcar todos los datos que hemos recopilado en el paso anterior para construir nuestro perfil de usuario.

En muchos casos, será interesante realizar también stories, que permitirán determinar los diferentes escenarios y situaciones por los que pasarán nuestros usuarios y predecir en la medida de lo posible su comportamiento y, en consecuencia, las acciones que debemos llevar a cabo para que sea el que nos interesa. ¿Qué pasa si el tipo de Persona A visita nuestra landing 2 o añade un producto al carrito de la compra? ¿Y si quiere descargar varios archivos a la vez? Pues eso 😉

También es el momento de hacer algo de card-sorting o algún tree-test para ir definiendo la estructura de nuestra web o app. El mapa de navegación es fundamental en todos los sentidos, así que hay que mimarlo. Habrá que confrontar la jerarquía y categorización lógica de los contenidos a las prioridades del proyecto y el comportamiento del usuario, que no siempre coinciden, para ponérselo fácil al consumidor.

3. Prototipado

Aquí podemos ir empezando a abocetar con lápiz y papel 📝, que es rápido, efectivo y barato, las conclusiones que hayamos obtenido en el paso anterior.

En casos concretos, haremos también storyboarding, que no sería más que representar gráficamente el flujo de pantallas y estados correspondiente a las stories definidas previamente.

Una vez que los bocetos en papel han cumplido con su función, pasaremos al wireframing. Se trata de trasladar el dibujo hecho a mano de cada una de las pantallas a «limpio», con la intención de hacer un prototipo navegable de baja fidelidad. Hablamos de gráficos esquemáticos, cajas, títulos y botones estándar; nada detallado ni sofisticado.

Los wireframes pueden ser tanto hechos a mano como digitales. Con los primeros se puede hacer un prototipo rápido para utilizar a nivel interno, con POP, por ejemplo. Para hacerlo en digital, y presentar a cliente por ejemplo, podremos apoyarnos en herramientas con librerías predefinidas que harán el trabajo mucho más sencillo ofreciendo un mejor acabado, como Sketch, Whimsical o Axure.

4. Pruebas

Una vez construido el prototipo, con enlaces sencillos entre pantallas, podremos hacer los primeros tests con usuarios (véase focus-groups, tests de cinco segundos, etc.) y también con cliente.

Según los resultados de las pruebas, habrá que iterar (seguro que sí 😜) y replantear lo que haga falta de los pasos 2 y 3.

5. Informes/Entregables

Se recomienda que, a pesar de su carácter abstracto, todo el trabajo relativo a esta fase de UX, quede reflejado en sus respectivos documentos en algún espacio común a todo el equipo, que además, en un ejercicio de transparencia, habrá que presentar al cliente y nos servirá para tomar y acreditar cualquier tipo de decisión.

Solo cuando cliente haya dado su aprobación, se pasará a la siguiente fase.

Fase UI (Interfaz de usuario)

6. Análisis inicial

Es este paso empezaremos a darle forma y estilo visual al proyecto.

Lo primero es analizar el estudio UX que se ha llevado a cabo, ya que será la base sobre la que construir.

También se evaluará la competencia en todo lo relativo al look & feel.

7. Investigación

A continuación, habrá casos en los que sea recomendable hacer algún workshop con cliente para lograr una descripción visual acorde con la marca y los objetivos. Realizar algún moodboard puede resultar útil en este punto.

Lo siguiente será realizar un estudio iconográfico del usuario, para transferir sentido y atractivo al producto. Es muy importante conectar con la cultura visual de los consumidores.

En este punto también se debe evaluar las capacidades gráficas y posibles limitaciones técnicas de la plataforma sobre la que vamos a construir. Así nos aseguraremos de que nuestro diseño sea viable.

8. Definición universo visual

Según las conclusiones del paso anterior, comenzaremos a crear el microcosmos de nuestro proyecto: paleta de color, formas, estilo, tipo de imagen, fotografía o ilustración, animaciones, etc. Y cómo se relacionan todos esos elementos entre sí.

Aquí tendremos especial cuidado con el contraste de los colores, para que el resultado sea accesible.

9. Sistema de diseño

Para que nuestro trabajo sea escalable, flexible, modular y predecible, no bastará con diseñar las pantallas por separado, sino que deberemos trabajar de una manera no destructiva y seguir los principios del Atomic Design. Esto quiere decir que para construir nuestras pantallas, primero fragmentaremos la interfaz en elementos independientes e indivisibles que serán «átomos» (por ejemplo un botón o un input), con los que progresivamente poder ensamblar moléculas (por ejemplo, una caja de buscar) que a su vez servirán para componer organismos más complejos (por ejemplo, una cabecera) hasta conseguir el puzzle completo de nuestra interfaz: una especie de plantilla a la que por fin poder dotar de contenido.

10. Prototipado + Microinteracciones

Una vez creado el design system, pasaremos a montar cada una de las pantallas y con ellas, haremos uno o varios prototipos navegables en media o alta fidelidad, según necesidades del proyecto.

Este será el momento también de preparar el contenido, fotografías, ilustraciones y animaciones pertinentes 📸. También habrá que pensar en microinteracciones, dado que aportan contexto y son muy positivamente valoradas por el usuario.

Para prototipar en este punto, podremos servirnos de herramientas como Sketch, Proto.io, Marvel App, Invision, Framer

11. Pruebas

El nuevo prototipo debería pasar por las mismas pruebas que pasó en la fase de UX y también por el criterio del cliente.

Según los resultados de las tests, habrá que iterar (sí, otra vez 😜) y replantear lo que haga falta de los pasos 8, 9 y 10.

12. Especificaciones + Recursos

Finalmente, cuando el prototipo sea validado, pasaremos a la fase de programación, y para ello será indispensable exportar todos los recursos gráficos necesarios y las especificaciones oportunas. Aunque hoy en día existe software que automatiza parte de este proceso (Zeplin, Sympli, Avocode…), es importante que todo el equipo, también desarrollo, conozca lo fundamental de las fases de diseño aquí descritas, por lo que habrá que explicar las peculiaridades y necesidades del diseño y compartir los avances con todos, en breves reuniones y reflejarlo en documentación clara y concisa. Así, además, podremos consultar con desarrollo en todo momento la viabilidad de cualquier propuesta de diseño.

Testing

Diseño debe acompañar el proceso de programación en todo momento para satisfacer cualquier duda o necesidad que pueda surgir y garantizar así que el resultado se ve y se comporta como era esperado.

Como conclusión, podemos decir que no todos los proyectos necesitarán transitar por todos y cada uno de los pasos de los que hablamos, pues cada uno tendrá unas necesidades específicas. Pero la intención de este artículo es visibilizar y evidenciar el valor de conocer y seguir un proceso como éste y servir de guía a la comunidad. Lo verdaderamente importante es contar con un equipo que sepa tomar las decisiones adecuadas en cada momento, como hacemos en Vital Innova. 🙂