top of page
0_N_BANNER_Mesa de trabajo 1.png

ROL

Diseñadora UX/UI (proyecto individual)

DURACIÓN

Enero - Febrero, 2023

(3 semanas)

HERRAMIENTAS

Adobe XD, Illustrator, Photoshop

RESUMEN

Oven Lovin es un diseño de sitio web responsivo para una panadería local ficticia, inspirado en la estética de los años 80. Existe una oportunidad de diseño para crear un sitio web que le permita a la empresa organizar los pedidos del día y que, a su vez, los usuarios puedan reservar alimentos sin preocuparse de que el emprendimiento se quede sin stock para cuando arriben a la panadería.

PROBLEMA

Para seguir teniendo éxito y expandirse en otras áreas, Oven Lovin´ necesita un sitio web que pueda manejar todos los aspectos de organización y ventas de la panadería.

En tanto, los usuarios clientes de la panadería también les gustaría poder reservar alimentos para asegurarse de que la panadería tenga stock disponible de lo que desean.

OBJETIVOS

Diseñar un sitio web fácil de navegar que permita a los clientes comprar alimentos del stock diario limitado de la panadería y, al mismo tiempo, ayude a la empresa a organizar sus pedidos y ventas automáticamente.

1
Investigación

perfil1-03.png

USUARIO PRIMARIO

Jamie es una química y madre que necesita una forma de comprar en Oven Lovin´ porque quiere apoyar este negocio local pero no puede hacerlo porque no hay stock cuando llega a la panadería.

perfil2-03.png

USUARIO SECUNDARIO

John es el dueño de Oven Lovin´ que se pasa el día entre la cocina y la caja registradora, por lo que observó una necesidad de un nuevo método para poder medir la cantidad de alimento que tiene que hacer para aprovechar materia prima y satisfacer a todos los clientes.

Realicé entrevistas y creé mapas de empatía para comprender a los usuarios para los que estoy diseñando y sus necesidades. Un grupo de usuarios primarios identificados a través de la investigación fueron los adultos que compran regularmente alimentos en la panadería pero, la mayoría de las veces, no pueden encontrar existencias de lo que quieren.

 

La investigación también reveló que, además de la posibilidad de recoger o entregar su pedido, si los usuarios no pueden comprar algo en la panadería (cuando no hay existencias o está cerrada), les gustaría tener algunas recetas que recomienda el negocio; esto crearía una nueva relación entre la panadería y sus clientes.

Los principales pain points que tiene en cuenta el diseño son:

STOCK

Los usuarios quieren una forma de comprar alimentos en su panadería local sin preocuparse por quedarse sin stock.

PICK UP / DELIVERY

Los usuarios necesitan una forma de recibir su pedido, ya sea mediante una opción de recogida o una entrega.

RECETAS

Los usuarios, al ser del área, quieren una relación más cercana con la panadería mediante algunas recetas “aprobadas por la panadería” para hacer en caso de que agoten stock o se encuentren cerrados.

2
Proceso de diseño

ARQUITECTURA DE LA INFORMACIÓN

Mi objetivo aquí era tomar decisiones estratégicas en la arquitectura de la información que mejorarían la navegación general del sitio web. La estructura que elegí fue un modelo jerárquico, diseñado para hacer las cosas simples y fáciles.

user flow y sitemap_Mesa de trabajo 1 copia.png

USER FLOW

Construí un user flow de cómo se ve un viaje básico de principio a fin al comprar algo de la panadería. Esta herramienta permite comprender las formas en que los usuarios pueden interactuar con la página web.

user flow y sitemap_Mesa de trabajo 1.png
IMG_20230611_135059898.jpg

WIREFRAMES EN PAPEL

A continuación, dibujé wireframes en papel para la página de inicio del sitio web, teniendo en cuenta la navegación del usuario.

Las variaciones de los wireframes en papel de la pantalla de inicio a la izquierda se centran en optimizar la experiencia de los usuarios.

WIREFRAMES EN PAPEL: VARIACIONES DE PANTALLA

Debido a que los clientes de la panadería acceden al sitio en una variedad de dispositivos diferentes, comencé a trabajar en diseños para tamaños de pantalla adicionales y crear el diseño responsivo.

IMG_20230611_135111271.jpg

WIREFRAMES DIGITALES

Pasar de wireframes en papel a digitales facilitó la comprensión de cómo diseñar un flujo coherente para los usuarios. Priorizar la ubicación de botones y la incorporación de elementos visuales fueron una parte clave del proceso.

Aquí los usuarios pueden encontrar todos los alimentos disponibles en la panadería.

Homepage.png

En esta sección, los usuarios pueden encontrar algunas recetas aprobadas por la panadería para hacer en casa e impresionar a otras personas.

PROTOTIPO DE BAJA FIDELIDAD

9_Low fidelity prototype.gif

Aquí se encuentra el prototipo de baja fidelidad para la versión de escritorio.

TEST DE USABILIDAD

Realicé dos rondas de estudios de usabilidad. Los hallazgos del primer estudio ayudaron a guiar los diseños desde los wireframes hasta los mockups. El segundo estudio utilizó un prototipo de alta fidelidad y reveló qué aspectos de los mockups necesitaban refinarse.

RONDA #1

1. Los usuarios necesitan un camino más claro a seguir, específicamente botones más obvios para presionar que los lleven a donde quieren.

RONDA #2

1. Durante el proceso de pago, no había una forma clara para que los usuarios iniciaran sesión en su cuenta para completar previamente la información de facturación y envío anterior.

3
Diseño final

MOCKUPS / PROTOTIPO DE ALTA FIDELIDAD

PROCESO DE PAGO

Con base en los comentarios de los tests de usabilidad, reorganicé la página de pago para que se pueda visualizar toda la información en una sola página sin desplazarse, algo que le resultó molesto y fue señalado por varios usuarios en el primer prototipo.

high fidelity checkout ‐ Hecho con Clipchamp.gif

Antes de test de usabilidad.

Después de test de usabilidad.

Vídeo sin título ‐ Hecho con Clipchamp.gif

PERFIL / SIGN IN

En cuanto a pain points del perfil, agregué una página de inicio de sesión antes de continuar con el pago, para que la información sobre la compra se pueda enviar a una dirección de correo electrónico.

checkout process ‐ Hecho con Clipchamp.gif

Secuencia después de test de usabilidad.

prototipo de alta fidelidad.png

PROTOTIPO DE ALTA FIDELIDAD: ESCRITORIO

La solicitud a seguir en la página web es comprar un croissant.

Aquí se encuentra el protipo de alta fidelidad (versión escritorio)

PROTOTIPO DE ALTA FIDELIDAD: MÓVIL

Al igual que la versión de escritorio, el prototipo de alta fidelidad para la página web móvil siguió el mismo user flow.

Aquí se encuentra el protipo de alta fidelidad (versión móvil)

prototipo de alta fidelidad movil.png

GUIA DE ESTILO

La combinación de colores vívidos para crear la paleta característica de Oven Lovin´ surgió a partir de elementos visuales asociados a una estética de los 80´s. La pantalla de bienvenida se siente lo suficientemente cálida y ecléctica como para atraer al usuario a seguir explorando.

guia de estilo.png

CONSIDERACIONES DE ACCESIBILIDAD

1

Usé encabezados con texto de diferentes tamaños para una jerarquía visual clara.

2

Diseñé la página con texto alternativo disponible en cada página para un acceso fluido al lector de pantalla

3

Usé una iconografía mínima en algunos pasos para ayudar a todos los usuarios a tener un mejor entendimiento del diseño.

4
Conclusiones

IMPACTO

Los usuarios objetivo compartieron que el diseño era intuitivo para navegar, más atractivo con las imágenes, demostraba una jerarquía visual clara y era visualmente agradable.

APRENDIZAJE

Mientras diseñaba el sitio web de la panadería, aprendí a crear un sitio web desde cero, desde weireframes hasta un prototipo funcional real, con mi primera experiencia con Adobe XD. Para mí, lo más importante es centrarme siempre en las necesidades reales del usuario al generar ideas y soluciones de diseño. Los estudios de usabilidad y los comentarios recibidos influyeron en cada iteración de los diseños de la aplicación.

A FUTURO...

Un siguiente paso sería realizar otra ronda de estudios de usabilidad para validar si los pain points experimentados por los usuarios se han abordado de manera efectiva, además de averigüar si el diseño es viable en términos de programación.

bottom of page