Challenge Rediseño Web: La mejor tarta de chocolate del mundo
UX/UI Case Study
1. Introducción y Briefing
Este proyecto personal se ha desarrollado durante dos semanas. En la primera semana se trabajo la fase de UX y la segunda semana la fase de UI.
El proyecto consiste en el rediseño de la web de la tienda “La mejor tarta de chocolate del mundo” , Durante el proceso he trabajado siguiendo la metodología Scrum y Design Thinking.
2. Proceso de UX
2.1. Investigación sobre el negocio
Para comenzar decidí contactar con las propietarias del negocio y realizarle una entrevista de cara a conocer mejor el negocio, sus necesidades, los usuarios y sobre todo la importancia que tiene la web dentro del negocio y cómo es su funcionamiento.
Los datos y conclusiones obtenidas fueron las siguientes:
La web es un elemento informativo, el mayor volumen de sus ventas es de manera presencial.
Los usuarios que encargan mediante la web, son usuarios que quieren pedidos en ocasiones especiales.
Sus clientes y usuarios principalmente son turistas, gente que busca nuevas experiencias gastronómicas y también clientes habituales.
El principal producto que se pide por la web es la tarta.
2.2. Análisis de la web actual y Tree Test
En segundo lugar decidí echar un vistazo a toda la web e ir anotando las cosas que veía según mi heurística podían funcionar y que cosas no estaban funcionando.
Primeras conclusiones:
- No existe una buena arquitectura de la información: nos encontramos con secciones como “Otros” que puede ser confusa para los usuarios y no saber que se pueden encontrar; la sección de “Tienda-Café” puede ser muy similar a “Historia” el usuario pude llegar a confundirse son campos que pueden tener relación; sección de “Distribuidores” quizás no sea lo más interesante para el usuario (tenemos que entender que función tiene dentro de la web y el negocio); sin embargo exiten otras secciones como La sección de “La tarta” e “Historia” podrían funcionar y ser fácilmente comprendidas por los usuarios. Por otro lado mención especial a “Encargalá” puede que no sea el mejor término para referirse a esta acción, podría ser interesante sustituirlo por una sección de contacto, o realizar diferentes CTA dentro de la web, actualmente no existe ningún tipo de CTA en la web para encargar la tarta.
- Botones que parecen inactivos e incluso pueden llegar a ser confundidos con una imagen.
- Existen elementos clicables durante toda la web que realizan acciones inesperadas para el usuario.
- Existen elementos no clicables que actúan como si lo fuesen.
- Un UI desactualizado, que no ayuda al usuario a cumplir sus objetivos.
Tree-test con los usuarios
Era hora de mejorar la usabilidad de la web, para ello utilice la herramienta Tree-test. Como punto de partida tuve los menús; necesitaba identificar los problemas de findability, para poder conocer si mis hipótesis y primer análisis estaban en lo cierto con respecto a la arquitectura de la información.
En primer lugar, puse en contexto a los usuarios sobre el negocio, qué es “La mejor tarta de chocolate del mundo”. Tras ello les planteo una serie de acciones y metas que debían completar dentro de la web.
- Acceder a ver los ingredientes de la mejor tarta del mundo; estos fueron los resultados:
2. Adquirir o encargar una tarta; estos fueron los resultados:
3. Buscar más productos, en este caso Pasteles de nata; estos fueron los resultados:
4. Encontrar la carta o menú del establecimiento; estos fueron los resultados:
5. Encontrar la historia y a qué se dedican; estos fueron los resultados:
2.3. Definción
Problema
Finalmente, tras los test con usuarios y la entrevista al dueño de “La mejor tarta de chocolate del mundo”, se llegó a la conclusión de que el problema al que nos enfrentamos dentro de la web, era el siguiente:
Los usuarios se sienten confusos dentro de la web, no realizan con facilidad las tareas; la web tiene problemas de Findability y además no reciben feedback por parte de la interfaz.
Una vez teníamos todos los puntos de vista y los datos en la mano, decidimos replantear el Lean Ux Canvas, concretando el problema del negocio, sus posibles soluciones y trazamos una estrategia.
Solución
Tras empatizar con los usuarios y conocer los problemas de usabilidad de la web, pude comparar mis primeras hipótesis con los resultados que me arrojaban los usuarios. Esto me facilitó el conocer que se debía mejorar para solucionar el problema:
La web tiene problemas de findability, y principalmente es necesaria una mejora en la arquitectura de la información.
Se debe mejorar algunos CTA y zonas clicables, los usuarios se pierden, no realizan las acciones que esperan.
Se debe actualizar la interfaz, diseñar una que acompañe al usuario a realizar sus metas y aporte feedback.
2.4. Mejora de la arquitectura de la información
Una vez estaba claro el problema y cómo solucionarlo, comencé a trabajar en la mejora de la arquitectura de la información, para ello me serví de las siguientes herramientas Site Map y un Card Sorting.
En primer lugar realicé un planteamiento de un Site Map, teniendo en cuenta las valoraciones y experiencia de los usuarios.
Tras realizar el Site Map, debía comprobar que esta arquitectura de la información se pudiese comprender por los modelos mentales de nuestros usuarios, y ver cómo organizan nuestro contenido. Para ello realicé un Card Sorting con varios usuarios.
Finalmente este es el Site Map final, al que se ha llegado tras todo el proceso.
Conclusión Arquitectura de la información
En esta nueva arquitectura de la información se ha pasado de 7 menús a 4; mejorando la usabilidad de la web.
Se ha mantenido “La tarta” ya que era un campo que funcionaba muy bien para los usuarios.
“Otros” ha sido sustituido por “Carta”, los usuarios asocian mejor este término a otro tipo de postres y platos.
“Historia” ha sido sustituido por “Nosotros” algo mucho más habitual para los usuarios en una web, además así nos permite integrar también dentro la parte de “Tienda”.
Y por último se ha creado un nuevo campo “Contacto” muy reconocible por los usuarios, donde se puede agrupar la sección de “Distribuidores” y toda la parte de encargos y contacto con el establecimiento.
2.5. Prototipado Low-Fi y Mid-Fi
Llegamos a la parte más compleja, debíamos mejorar la usabilidad en base a toda la información que ya hemos obtenido.
Pero no se debe realizar un cambio muy radical, ya que como muy bien apuntaba Jared Poll “cambiar un producto a un diseño completamente a un nuevo, es la manera más ineficiente de conseguir cambios importantes en un diseño.” Los usuarios necesitan un rediseño familiar donde puedan realizar todas sus tareas fácilmente e irse.
Comenzamos por un Low-Fi para poder testear rápidamente con los usuarios, se realizó un test con 5 usuarios.
Tras comprobar que el Low-Fi funcionaba era hora de comenzar a construir los wireframes.
3. Proceso de UI
Para comenzar la semana y el proceso de UI, empezamos definiendo los colores y la tipografía, no fue necesario realizar ningún tipo de Moodboard ya que nos encontramos con una marca solida y definida.
Pese a ello en primer lugar decidí contrastar los colores y comprobar si realmente son accesibles, una vez lo tenía asegurado se comenzó a trabajar toda la imagen gráfica de la web, tipografía, alineación, consistencia, sombras, Style Tile, Style Guide y Atomic Design.
Si te interesa conocer más de cerca el desarrollo, puedes consultar nuestro Atomic design en este enlace.
Resultado del rediseño (antes vs después)
01-Home
02-La tarta
03-Contacto
Prototipo Hi-Fi
Para el prototipo seguiremos el user flow que según los dueños es más habitual en sus usuarios web; este es la búsqueda de la tarta y su encargo mediante teléfono.
5. Próximos pasos
Pensando en la escalabilidad del negocio y por tanto de la propia web, se propone como mejoras futuras implementar:
Un e-commerce, dónde los usuarios puedan realizar encargos y comprar productos, sin tener que llamar al teléfono, mediante la comodidad de una pasarela de pagos.
6. Aprendizaje
El principal aprendizaje que me llevo de este proyecto es la importancia de conocer lo que esta funcionando en una web y lo que no. Saber qué cosas son fácilmente reconocidas por los usuarios y cómo interactúan con ellas.
Por otro lado, la importancia de no hacer un rediseño web demasiado agresivo, ya que eso podría ser perjudicial para los usuarios. Es necesario realizar rediseños progresivos y poco a poco ir cambiando pequeñas cosas, tanto en la arquitectura de la información como en el diseño de la interfaz.
Muchas gracias por tu tiempo, cualquier feedback es de gran ayuda.
