Proceso de
Diseño

Desde el 2013 trabajo como freelance ofreciendo una amplia variedad de soluciones de Experiencia de Usuario, Diseño de Interfaces e Interacción para productos móviles y web.

Los entregables de diseño UX / UI son siempre más o menos los mismos, aunque depende principalmente de los requisitos del producto, el presupuesto y el cronograma.

Investigación


Pregunta primero. La investigación de usuarios es una parte integral de cualquier proyecto. Es fundamental tener claro por qué un usuario estará motivado a utilizar el producto, ya sea para realizar una tarea o por los valores asociados con utilizarlo, y esto sólo se consigue preguntando.

Al utilizar varios métodos, como entrevistas individuales y encuestas en línea, podemos recopilar información esencial sobre las necesidades, las emociones, el comportamiento y la motivación de los usuarios a los que nos dirigimos.

Los resultados de estas entrevistas y actividades se consolidan en un documento de conclusiones que incluye los principales hallazgos, personajes y recomendaciones.

Arquitectura de la información


Funcionalidad. Teniendo en mente las necesidades y objetivos de las personas para quienes estamos creando el producto, definimos qué podrá realizar el usuario con el producto. Para ello creamos la arquitectura de información del producto futuro (o revisando el existente), estableciendo cuáles son las secciones principales, las funcionalidades básicas y cómo están relacionadas entre sí.

Al visualizar la estructura general del proyecto, es más fácil que todas las partes implicadas en él comprendan el alcance y puedan definir mejor las prioridades de negocio y de desarrollo.

Wireframes


Cómo se diseñará el producto. Los wireframes sirven para esquematizar la información que debe incluir cada pantalla del sitio web o app. En ellos se establecen los requisitos del proyecto, los contenidos y se define a grandes rasgos cómo se diseñará el producto para que el uso de cada funcionalidad sea accesible. Aunque no tengan diseño visual, me gusta que sean fieles en cuanto a componentes UI y estructura a lo que será el producto final ya que las partes interesadas y los usuarios tienden a comprenderlos mejor.

Con estos primeros bocetos, creo un prototipo interactivo que nos permite iterar rápidamente sobre las ideas y capturar los comentarios del cliene y usuarios testing.

Flujos de usuario


Cómo se navega por el producto. Este es un documento vivo que va cambiando a lo largo de todo el proyecto. En él se represetan todos los wireframes (y más adelante los diseños finales) interconectados entre sí para difinir cómo es el flujo de una serie de acciones que el usuario debe realizar para lograr un objetivo significativo.

Esto es clave no sólo para comprender mejor cómo se usará el producto, sino además para decidir en qué momento de la experiencia de usuario se mostrarán contenidos adicionales alineados con estrategias de marketing o de negocio, como un paywall de subscripción, popup de registro o notificaciones.

Identidad de producto


Definiendo la marca. Aunque no estoy especializada en creación de identidad corporativa, en la mayoría de proyectos que colaboro me encargo de realizar la guía de estilo en la que se apoyará el diseño visual del producto.

En la mayoría de los casos el cliente aporta sólo el logotipo, y a partir de ahi, defino paleta de colores (principal, secundarios y neutros), tipografía, iconografía, ilustraciones e icono de la app para productos móviles.

Sistema de diseño


Biblioteca de componentes UI. Esta es la parte más laboriosa del proyecto, ya que consiste en crear cada uno de los componentes de la interface de usuario (iconos, botones, textos, páginas, layouts flexibles, cards...) que se utlizarán en forma de bloques de construcción para componer cada una de las pantallas del producto.

Han de ser fácilmente editables y adaptables, deben respetar patrones UX según el dispositivo para el que se esté diseñando, estar preparados con sus diferentes estados de interacción y, en conjunto, mantener coherencia a lo largo de todo el producto.

Otro punto interesante de utilizar sistemas de diseño es que se puede trabajar en remoto con otros diseñadores en el mismo proyecto siguiendo un conjunto de reglas, restricciones y principios comunes, ya que todo el equipo utiliza los mismos componentes.

Diseño Visual


Diseñando el producto final. Y esta es la parte más divertida del proyecto, ya que consiste en componer cada una de las pantallas tomando como referencia los wireframes aprobados y utilizando los componentes del sistema de diseño con datos reales.

Una vez que está aprobado el diseño del producto, exporto todos los assets y creo un documento con las especificaciones necesarias para que los desarrolladores puedan comenzar a trabajar en su lado del proyecto.

Prototipo


Producto final. Como parte final del proyecto, creo un prototipo interactivo utilizando las pantallas creadas en la fase de diseño visual. Estos prototipos tienen dos propósitos principales: por un lado sirve para probar el producto (compartirlo con el equipo, en rondas de inversión, tests de usuarios...) y por otro lado, sive para que el equipo de desarrollo inspeccione el código de cada pantalla y obtenga los detalles que necesita para llevar a cabo los diseños en vivo.

Interacciones


Dando vida a la interface . Como parte del prototipado, a veces también entrego videoclips cortos que muestran las principales interacciones y animaciones de la interfaz de usuario que agregan momentos agradables a la experiencia del usuario y guían a los usuarios en el camino. Los desarrolladores utilizan los videos y las especificaciones de animación como una guía para implementar estas interacciones en el producto final.

Conclusión

El proceso de diseño de un producto no siempre es lineal y depende de las prioridades y el cronograma del proyecto. En la mayoría de los casos, el estudio de personas y la arquitectura de la información ya viene trabajada por parte del cliente y me incorporo en el proyecto en la fase de creación de wireframes.

Al final del proyecto, proporciono todos los entregables finales a través de la carpeta compartida de Google Drive o Dropbox. También transferiero a los clientes la propiedad de todos los proyectos creados en InVision.

Contactar

info@designroot.es