¡Necesito ayuda! 👩🏼‍💻Creando un nuevo producto a través de Design Thinking. Parte 2/2 UI

Después de una reunión familiar y un par de semanas previas de trabajo, me dispuse a darle forma a mi proyecto, así que si no sabes de que estoy hablando y te perdiste la primera parte del proyecto pincha 👉🏻 aquí 👈🏻 y bienvenido/a la segunda parte, al resultado final 🪢 y fase de implementación.

Fase de implementación

Comenzaré con la fase de implementación e interacción donde este último se plantea de modo conceptual, y son los grandes protagonistas.

A través de todo el trabajo realizado previamente, la idea principal y final de esta web a desarrollar, es crear un e-commerce fácil e intuitivo, y que a la vez tenga una parte dirigida a nuevos clientes.
Este era el gran insight y el que más interesante quebraderos de cabeza podría tener, ya que trasladaé el trabajo que se realiza de una forma física y/o presencial, al entorno digital, intentando crear una gran experiencia de usuario.

¿Cómo llevar a cabo y organizar esta idea?

La respuesta es fácil, diagramas de flujo y arquitectura.
El diagrama de flujo para nuestro usuario se desarrolla en una serie de pasos con el fin de ofrecerle los productos que mejor se adaptan a las necesidades de su negocio.
Para ello en entra como nuevo cliente a comprar producto para su empresa. Entra a la zona dirigida, de nuevo cliente, contestando a las sucesivas preguntas que el proceso le propone, al final de las cuales se le mostrarán una serie de productos seleccionados del catálogo para que pueda adquirirlos directamente.

Más tarde con esta parte definida me dispuse a crear el mapa de arquitectura de información, que para un e-commerce puede llegar a ser un poco tedioso y enrevesado. Este mapa es una representación de lo que llegará a ser nuestra web, esta parte es bastante importante ya que nos agiliza el proceso a la hora de crear las vistas.

Sketch, sketch, sketch!

Una vez definida la arquitectura, el siguiente paso es realizar bocetos de las vistas que tenemos para definir, una primera idea de cómo puede llegar a ser nuestra parte visual.

Moodboard

El aspecto de esta web quería que fuese bastante diferenciada de la competencia, que fuese muy visual, de fácil uso e intuitiva. La parte de producto también debía ser muy importante, por lo que el 3D le dará la fidelidad representativa que tanto necesitamos. El blanco y negro son los dos grandes protagonistas, ya que la identidad corporativa de la compañía se compone por estos dos tonos.

Wireframes

En esta parte, ya teniendo los sketch de las vistas finalizados, comencé a organizar las vistas, cómo se van entrelazando y que contendrá cada una, para poder mostrarlo al cliente. Esta parte no se detalla estéticamente ya que están dispuestas a posibles cambios por parte del cliente, y así es más fácil realizar los cambios para finalmente pasarlos a vistas finales.

Guias de estilo

Como comenté en la parte de moodboard, el blanco y el negro son los protagonistas, ya que son los colores corporativos de la compañía.

Test de usuario

Ya llegó el ansiado momento, el de mostrar el prototipo a nuestros usuarios. Para ello realicé el test a cinco clientes y posibles nuevos clientes

Las 5 acciones que debían llevar a cabo:

· Eres nuevo cliente y tienes una tienda de ropa, quieres comprar una serie de productos pero no sabes cual es mejor para tu comercio, porque eres nuevo en el sector.

· Comprar una bolsa personalizada de alta calidad para tu tienda.

· Entrar en el perfil:
· Revisar últimas compras.
· Quieres hacer un paquete para la nueva campaña y recuerdas que te ofrecieron un tutorial con el papel que compraste hace meses.

· Repetir un mismo pedido que hiciste meses atrás.

Los resultados fueron bastante favorables, los usuarios no tuvieron mucho problema con la organización de la web, ni con ningún otro elemento, tan solo unos pequeños cambios para mejorar la experiencia:

· Logo. Elegir un modo de edición más específico a gramaje + cantidad. Alterar el orden

· Finalización del diseño. Añadir: En caso de que encontremos algún defecto se le notificara y modificará a su gusto.

· Datos de entrega. Añadir nombre de persona en la vista de resumen de pedido, ya que veían raro que apareciese el envío sin su nombre.

· Mis diseños guardados. Añadir producto. Añadir logo eco.

· Botón finalizar. Cambiar por aquí te mostramos el producto.

· Carrito. Añadir textos a la tarjeta: pago por paypal, apple pay, bizum, etc.

Pueden ver y testear el prototipo final aquí

Actualmente se están realizando los cambios pertinentes en la fase de diseño y se está trabajando en la parte de desarrollo por parte de David Manjavacas.

Esperamos en próximos meses este completamente operativa.

Gracias por tu tiempo, y ¡hasta la próxima!

🤓