Rediseño de la web de Nexus Energía, optando por un diseño mobile-first y centrado en el usuario.

Proyecto de diseño UX/UI que abarcó desde las primeras fases de research, investigación y workshops con cliente hasta el diseño y funcionales finales de toda la web, pasando por el prototipado y tests. Siempre con el foco en los diferentes usuarios finales.

Cliente

Nexus Energía, S.A.

Año

2022

Servicios

UX Research
Branding
Arquitectura
Prototipado
Diseño UI
Formación

Programas

Figma
Adobe Illustrator
Adobe Photoshop

⸺ UX Research

Investigación, benchmark de competidores, workshops con el cliente, organización de la información y definición de objetivos.

⸺ Branding

Adaptación del branding offline al ámbito digital y ampliación del manual de estilo para sus aplicaciones web y mobile.

⸺ Arquitectura

Análisis de la arquitectura y reestructuración de la navegación y contenidos basándonos en los resultados de la investigación.

⸺ Prototipado

Creación de prototipos de baja fidelidad para testear las funcionalidades, interacciones, navegación y organización de contenidos.

⸺ Diseño UI

Creación de todos los elementos de la interfaz y de todas las pantallas necesarias de la web tanto de versiones desktop como mobile.

⸺ Formación

Formación a cliente para gestionar el Design System generado y creación de un documento funcional para los desarrolladores.

FASE 1

Research

El proyecto se inició con un extenso kickoff donde el cliente nos contextualizó sobre la empresa, equipo, trabajadores, usuarios finales y objetivos.

Posteriormente, tras definir 4 user persona, realizamos varios workshops con los diferentes equipos implicados donde se definieron los empathy y journey maps de cada uno de estos usuarios.

Gracias a todo esto, pudimos recopilar una gran cantidad de información en bruto para empezar a trabajar.

FASE 2

Organización

El siguiente paso fue ordenar y empezar a dar forma a los procesos según las necesidades detectadas:

Se realizó un análisis de los posibles flujos de navegación de los usuarios por la web para lograr sus objetivos. Se definió una arquitectura simplificada para lograr una navegación fácil y con sentido. Se empezó a agrupar contenidos para tener una primera visión a modo de big picture de lo que podría llegar a ser la web.

Así pudimos comprobar que cumplíamos los objetivos, la navegación tenía sentido y todos los contenidos tendrían su espacio.

FASE 3

Prototipado

Una vez definidos los espacios y la navegación procedimos a crear los primeros wireframes funcionales para estructurar cómo podríamos mostrar los contenidos, como se enlazarían entre ellos, como interactuarán y sus posibles casuísticas derivadas.

Gracias a ello y a las nuevas herramientas de prototipado, podemos comprobar que la idea planteada tiene sentido, teniendo una visión global de cómo funcionará el producto final.

test-min

FASE 4

Testing

Una vez tenemos un prototipo interactivo, es el momento de presentar y probar el trabajo elaborado.

Podemos evaluar si el prototipo responde a los requerimientos de los usuarios y a los objetivos del negocio o si detectamos algún error o callejón sin salida.

También comprobaremos si nos falta alguna pantalla, elemento o funcionalidad para su correcto funcionamiento.

FASE 5

Diseño

Una vez confirmado que todo está correcto en los testeos, se aplicará la capa de diseño a la estructura anterior, incluyendo todos los elementos gráficos y el branding de la marca.

En este caso, tuvimos que adaptar un branding completamente offline a su versión digital e interactiva.

Hecho esto, tendremos todas las páginas, funcionalidades y elementos del producto tal y como queremos que se muestren al usuario final.

FASE 6

Documentación

Con el diseño aprobado, procedimos a crear un documento funcional o sistema de diseño ampliado que incluya toda la explicación del producto y todos sus elementos.

El objetivo de esto, es que la fase de desarrollo sea lo más sencilla posible y que los programadores maqueten lo que nosotros tenemos planteado, evitando en lo posible, decisiones erróneas, revisiones y correcciones.

Con esta documentación también aseguramos tener unas normas para que futuras ampliaciones de la web sigan el sistema creado.

FASE 7

Q&A

Cuando los desarrolladores tienen el diseño maquetado, procedemos a realizar una revisión para comprobar que todo esté visual y funcionalmente como estaba planteado en los diseños.

Esta revisión debe hacerse en todos los dispositivos y navegadores posibles para detectar cualquier variación.

Haciendo esto, conseguimos detectar los errores que hayan podido cometer los desarrolladores para corregirlos antes de presentar o publicar el producto al público.

q&a-min