Entre Col y Col — Rediseño del sitio web de una frutería local
En la semana 6 de Ironhack nos dieron una sorpresa: tocaba volver a trabajar con los grupos con los que habíamos trabajado en la semana 2 porque esa semana estaría dedicada a llevar a Hi-Fi el Mid-Fi que habíamos diseñado para la anterior entrega.
En mi caso (y en el de otras tres compañeras, una de cada equipo) la sorpresa fue doble: nosotros cambiábamos de proyecto, para emular la experiencia de la entrada a un nuevo proyecto en el que no has trabajado previamente. Mi nuevo equipo era Cars y mi nuevo producto era el sitio web de un comercio de alimentación llamado Entre Col y Col.
En este grupo me encontré con compañeros con los que ya había trabajado y con compañeras con las que tenía muchas ganas de trabajar, así que el proyecto empezó con muy buenas energías.
Día 1 — Lunes
En primer lugar, para ponerme un poco al día del trabajo que habían hecho hasta el Mid-Fi, dimos un repaso a todas las herramientas UX que habían diseñado hasta entonces y estuvimos comentando algunas partes. Como este proyecto tenía algunas similitudes con mi primer proyecto, Huertify, en el que diseñamos un e-commerce de productos de proximidad, pudimos revisar algunas partes de las herramientas y mejorarlas. Sin embargo, a grandes rasgos todo el proceso que habían seguido tenía mucho sentido y en este momento no hicimos grandes cambios que merezca la pena destacar.
Tras revisar todo el UX, y ya sintiéndome parte del proyecto y de las conclusiones a las que habían llegado mis compañeros, creamos el moodboard para definir el diseño visual de la web. Lo lanzamos para testeo y, al comprobar los resultados, nos dimos cuenta de que no habíamos acertado con las imágenes seleccionadas. Por tanto, rehicimos el moodboard y lo volvimos a testear. Esta vez obtuvimos resultados que tenían mucho más sentido para el proyecto y las soluciones que estábamos planteando, por lo que decidimos seguir adelante con la segunda versión de nuestro moodboard, que nos dio como resultado los siguientes brand attributes: Fresco, Orgánico, Natural, Con vida y Se Preocupa.
Partiendo de este moodboard, creamos, testeamos y descartamos varias paletas de colores. Finalmente optamos por elegir la que podéis ver integrada en el moodboard, con una base de colores principales verdes y colores secundarios y de acento en naranja y dorado. Con esta paleta queríamos transmitir la personalidad orgánica pero cuidada de los productos de Entre Col y Col. De igual manera, al aplicarlos, quisimos dar importancia a la acción de compra sin ser intrusivos o demasiado agresivos con el usuario, pero aquí entratemos un poco más adelante.
Día 2 — Martes
Empezamos haciendo la versión móvil de la web, para comprobar que, en el caso de necesitarlo, ninguna de las soluciones que habíamos diseñado eran incompatibles o extremadamente difíciles de adaptar a otros dispositivos.
En el Crazy 8 de la versión móvil nos entretuvimos un poco. Al principio no sabíamos cómo adaptar algunos comportamientos que en web tienen sentido pero en versión móvil no son intuitivos o resultan demasiado complejos para el usuario. O, simplemente, no terminaban de funcionar adecuadamente. Un ejemplo fue la distribución de las categorías.Llegar a la distrubución que podréis ver un poco más abajo, en el Low-Fi, supuso diseñar y descartar varias propuestas (algunas de ellas con mucho sentido y otras no tan acertadas).
Tras crear el Crazy 8 definitivo siguiendo como base el flujo del usuario en el sitio web, convertimos este flujo a versión móvil. El User Flow de la app móvil para Entre Col y Col quedó así:
Tras terminar de definir el flujo del usuario en la versión móvil y anotar los cambios que harían falta aplicar en el Crazy 8, nos pusimos manos a la obra con el Low-Fi de la app móvil. Este fue el resultado:
Al trabajar en remoto, es bastante difícil que todos los integrantes del grupo participen continuamente en la creación del Low-Fi, así que dividimos el trabajo que quedaba por hacer. Elisa se encargaba de crear el Low-Fi definitivo que veis arriba, mientras los demás terminábamos de definir las directrices de Espaciado, alineamiento y sombras, y resumíamos los elementos web y móvil en el Style Tile:
El proyecto pintaba bien. Tras terminar el Low-Fi de la app móvil, decidimos diseñar algunas de las pantallas en Mid-Fi para asegurarnos de que el diseño seguía teniendo sentido en los siguientes pasos. Os dejo una versión Mid-Fi de la app móvil de Entre Col y Col:
Día 3 — Miércoles
Este día se resumió en resumir. Gracias a la creación del Atomic Design y el Style Guide conseguimos unificar y simplificar los procesos de diseño. En la creación de estos documentos tuvimos que tomar muchas decisiones sobre elementos que ya existían y no estaban unificados, así como sobre elementos que, aunque no aparecían en nuestro prototipo, eran importantes para marcar el diseño de futuro de la web.
Como avanzaba la tarde y nos quedábamos sin tiempo, decidimos dividir el equipo para ir adelantando trabajo del Hi-Fi, que también estaba incluido en la planificación de ese día. Poco a poco, fuimos cerrando los documentos de identidad y todos pasamos a trabajar en el prototipo Hi-Fi y las interacciones que intervenían en el flujo del usuario.
A la hora de aplicar los colores de nuestra paleta, se nos plantearon varias opciones. Una de ellas era destacar la llamada a la compra desde la Home. La otra era potenciar en la Home los productos y las recomendaciones, y intensificar la llamada a la acción durante el proceso de compra.
Finalmente, nos decantamos por una opción que destacaba las recomendaciones y las novedades del comercio. Al fin y al cabo, el usuario que se había definido según la investigación, tiende a explorar los productos pero no compra en grandes cantidades, sino que opta por elegir productos de manera selecta y, muchas veces, bajo recomendación directa del personal de la tienda. Por eso, quisimos plasmar esta experiencia en la web, sin restar importancia a la acción de compra pero acercándonos a la experiencia de compra física en Entre Col y Col.
Os dejo aquí una comparativa entre la versión previa de la Home del sitio web de Entre Col y Col, y la propuesta de rediseño que planteamos en este proyecto.
Con este rediseño de la web, conseguimos dar personalidad y singularidad al comercio, algo básico en su establecimiento físico pero que no conseguía plasmarse en la antigua web de Entre Col y Col, al pertenecer a una plataforma comunitaria de comercios de Mercado 47.
Además, el flujo del usuario por la web hasta la consecución de la compra se ve mejorado, siendo más intuitivo y facilitando el proceso de compra. Esto se consigue a través de la implementación de nuevas funcionalidades como recomendaciones de productos similares, live stock o registro de métodos de pago frecuentes del usuario.
Día 4 — Jueves
Aplicar el feedback de los instructores sobre nuestro diseño Hi-Fi fue la primera tarea del último día. En este proceso detectamos algunas otras incongruencias y fallos del diseño que habíamos pasado por alto el día anterior y las pudimos corregir antes de la presentación final. Cerca de finalizar el Hi-Fi, volvimos a dividir el grupo en distintas tareas para agilizar el proceso, ya que en ese punto no hacía falta que todos estuviéramos involucrados en el Hi-Fi.
En mi caso, la tarea asignada fue la de diseñar las interacciones del prototipo. Es una tarea que me resulta muy interesante, y hasta ese momento no había tenido la oportunidad (o, mejor dicho, la necesidad) de profundizar en este campo, ya que anteriormente habían sido otros compañeros los que habían tomado las riendas de esta tarea.
Me remangué, busqué información en Google y YouTube, e invertí muchas horas en aprender a diseñar algunas interacciones que no tenía ni idea de cómo hacer. Tardé un poco más de lo que habría tardado otro compañero que tuviera experiencia en este campo, pero fue muy satisfactorio porque conseguí hacer todo lo que habíamos diseñado en el Low-Fi, y algunas otras cosas que descubrí por el camino.
No sería justo decir que hice yo todo el trabajo de interacciones, mis compañeros de equipo se diseñaron muchas de las interacciones del prototipo. La diferencia con proyectos anteriores fue que, en este caso, pude enseñar a mis compañeros cómo crear algunas interacciones y varios trucos para simplificar los procesos de diseño. ¡Siempre es emocionante sentir que estás descubriendo algo nuevo a los demás! :)
Casi al final de la tarde dimos por terminado el Hi-Fi de todo el user flow. Os lo dejo aquí:
Tras cerrar el Hi-Fi, ya solo quedaban los últimos detalles de las interacciones, así que me quedé yo finalizando esta parte y mis compañeros empezaron a resumir todo el proceso de la semana para la presentación.
Cuando el prototipo Hi-Fi estuvo terminado, nos reunimos para testarlo y corregir los errores. Una vez cerrado, terminamos la presentación y ya estábamos listos para el feedback.
Si quieres navegar por el prototipo interactivo de nuestra propuesta de rediseño para Entre Col y Col, haz click aquí.
Muchas gracias por acompañarnos en el proceso de rediseño de la web de Entre Col y Col. ¿Qué te parece el nuevo diseño? Cuéntame en los comentario qué habrías hecho tú distinto o qué cambiarías de nuestra propuesta, ¡nunca es tarde para mejorar!
Nerea
