Rediseño E-Commerce: El Buscón
UX/UI Case Study
1. Introducción y Briefing
Este proyecto grupal se ha desarrollado durante dos semanas. En la primera semana se trabajo la fase de UX y la segunda semana la fase de UI.
Todos los integrantes tuvimos el mismo rol dentro del equipo. El proyecto consistía en buscar un e-commerce de una librería, cuya interfaz fuese mejorable y estudiar cómo rediseñarla. Trabajamos en remoto y siguiendo la metodología Scrum y Design Thinking.
Historia: El Buscón.
Nuestra librería seleccionada es El Buscón, una pequeña librería ubicada en el barrio de Prosperidad; nace en 1977 y atraviesa de lleno la transición española, convirtiéndose en un referente cultural de la zona. Gracias a ello El Buscón es referente a nivel nacional en libros de filosofía, también destaca por una amplia sección de libros especializados.
Link del e-commerce actual: http://www.elbuscon.es
Planificación del equipo durante las semanas
1ª Semana UX
2ª Semana UI
2. Primera semana: proceso UX
2.1. Empatización
Para poder empatizar con el usuario que realiza compras de libros online, trabajamos en primer lugar los cuatro primeros puntos del Lean UX Canvas, para poder plantearnos diferentes hipótesis que se puedieran comprobar con las encuestas y entrevistas. Tras la hipótesis trabajamos las siguientes herramientas:
- Feature Analysis: realizamos un análisis de la web frente a su competencia.
- Business Analysis (DAFO): realizamos un análisis DAFO para hacer una introspección del negocio, sus debilidades son la falta de seguridad, confianza y la usabilidad; sus fortalezas la especialización en filosofía y la gran variedad de obras poco comunes.
- Encuestas y entrevistas usuarios: para poder comprender las necesidades reales de los usuarios comprando libros online, sus metas frustraciones, gustos y hábitos; realizamos un total de 14 entrevistas y 90 encuestas.
- Entrevista dueño El Buscón: También tuvimos la suerte de poder entrevistar al dueño de la librería; nos cambio el punto de vista qué teníamos hasta el momento del mercado y del negocio.
Una vez finalizadas las herramientas de investigación sacamos una gran cantidad de información, desde el punto de vista de los usuarios y del dueño de la librería. Esto nos permitió sacar estas tres grandes conclusiones:
De estos datos extraemos la siguiente conclusión: los usuarios cada vez realizan con mayor frecuencia la compra de libros online, prefieren una experiencia digital frente a la física; los usuarios valoran mucho la cercanía a la hora de seleccionar un libro, es decir, prefieren las recomendaciones de libros, las valoraciones y opiniones de otros usuarios. Además los lectores tienen problemas a la hora de encontrar libros especializados, y acuden a este tipo de librerías.
2.2. Definición
Finalmente, tras las encuestas y la entrevista al dueño de El Buscón, llegamos a la conclusión de que el problema al que nos enfrentamos dentro de la web, era el siguiente:
Problema
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.
Finalizada la fase de investigación y obtenida toda la información posible, utilizamos la herramienta Affinity Diagram que nos ayudo a definir a nuestro User Persona, User Journey y User Scenario.
2.3. Ideación
Una vez empatizado con el usuario y definido el problema, comenzamos a idear las posibles soluciones, para ello trabajamos con las siguientes herramientas: Brainstorming y Mindmap.
Solución:
Como solución proponemos un rediseño web centrado en el usuario, para ello implementaremos una serie de funcionalidades básicas que demandan los usuarios:
Búsqueda rápida por categorías, filtros: sustituir el sistema de búsqueda actual por uno más sencillo e intuitivo para el usuario, así podrá encontrar antes el libro deseado.
Recomendaciones personalizadas, con valoraciones de otros lectores.
2.4 Prototipado
Era la hora de conocer cómo realizar una buena arquitectura de la información, para que la navegación fuese lo más sencilla e intuitiva; para ello utilizamos las siguientes herramientas: Card Sorting y Sitemap, User Flow y Crazy eight.
En esta fase del proyecto tuvimos como stopper el card sorting; nos resulto bastante frustrante ver cómo la idea de partida que teníamos nosotros, no era comprendida por los usuarios, así que tuvimos que aceptar el feedback, y pivotar con la herramienta hasta encontrar la mejor solución posible.
Comenzamos a trabajar en un Low-Fi, recogimos mucho feedback debíamos cambiar algunas pantallas que eran poco intuitivas, iteramos y corregimos errores. Una vez finalizados los testeos y habiendo mejorado la usabilidad dimos luz verde al Mid-Fi.
En esta fase del trabajo surgió uno de los grandes stopper del proyecto, era la primera vez que nos enfrentábamos a la realización de un wireframe trabajando colaborativamente con Figma. La falta de control y organización fue nuestro talón de Aquiles; estar cuatro personas trabajando en la misma pantalla no es la mejor forma de optimizar el tiempo, finalmente decidimos repartirnos pantallas, utilizando unas pautas previamente consensuadas.
Completamos el Mid-Fi, testeamos y aplicamos feedback para dejar el wireframe encaminado y listo para el UI.
3. Segunda semana: proceso UI
En esta semana comenzábamos con cambios en los integrantes del equipo, se marchaba una compañera y llegaba otra. Lo primero que hicimos, fue ponerla al día de cómo habíamos trabajado hasta el momento, y le explicamos las bases del proyecto. Esta pausa y retrospección en el proyecto, nos ayudo a entender hacía dónde íbamos.
Para comenzar la semana y el proceso de UI, empezamos definiendo los Brand Attributes, para ello realizamos un Moodboard. Buscábamos los valores de El Buscón.
Comenzamos a definir el color; en esta ocasión nos encontramos con el primer stopper. Actualmente el color de la web es rojo, pero hablando con el dueño nos trasladó que el color corporativo es el morado; es el que utiliza en la tienda física y además es el color de la filosofía. Revisamos el color corporativo, y seleccionamos un color similar al que se utiliza en la tienda física y a la par accesible en un entorno digital.
Una vez seleccionado definido y asentado el color que íbamos a utilizar, comenzamos a trabajar toda la imagen gráfica de la web, tipografía, alineación, consistencia, sombras, Style Tile, Style Guide y Atomic Design.
A continuación muestro el Style Tile, para poder observar de un vistazo la imagen del nuevo Buscón. Si te interesa conocer más de cerca el desarrollo, puedes consultar nuestro Atomic design en este enlace.
Una vez definidas todas las herramientas mencionadas anteriormente, era el momento de comenzar a pintar las pantallas y darle vida a nuestro Mid-Fi.
Tras finalizar el Hi-Fi testeamos y a nivel usabilidad no tuvimos ningún problema, el usuario conseguía poder realizar su meta. Pero tras presentar el proyecto y recibir feedback nos dimos cuenta de algunos errores de UI que mostramos a continuación.
Principalmente tuvimos problemas a la hora de mostrar el precio y añadir al carrito en las card, tuvimos que prescindir del morado secundario , y por último realizamos una reestructuración del menú tanto de sus elementos como del color.
Una vez aplicado el feedback, muestro algunas de las pantallas del Hi-Fi y el vídeo del prototipo para que pueda ver el MVP con más detalle.
4. MVP App El Buscón (Extra)
Como complemento al rediseño web, realizamos un mvp de la app. Para ello trabajamos de una forma ágil y rápida; realizamos un crazy eight de forma individual, lo que nos facilitó el trabajo a la hora de realizar el Low-Fi.
Una vez testeado el Low-Fi, realizamos pequeños cambios y comenzamos a trabajar el Mid-Fi.
El principal stopper con el que nos encontramos en la realización del Mid-Fi fueron las cards de los libros, dedicamos bastante tiempo en ver cómo lo podíamos estructurar. Tomamos las decisiones de diseño oportunas, en el caso de que los nombres de los autores, o los títulos de los libros fuesen muy extensos.
Por último comenzamos a dar color a las pantallas y este fue el resultado final:
5. Próximos pasos
Pensando en la escalabilidad del MVP, se propone como mejoras futuras inplementar las siguientes funcionalidades dentro de la web:
Petición de libros fuera de catálogo. Queremos aprovechar la ventaja competitiva, de ser una librería con un amplio catálogo de libros especializados, donde acude mucha gente en busca de libros poco frecuentes.
Comunidad: Eventos culturales y Ranking de recomendados. Con esta funcionalidad queremos, trasladar la comunidad física y cultural histórica, a la web.
Pero somos conscientes de que debemos seguir profundizando en la investigación, para conocer si realmente las nuevas funcionalidades serían aceptadas en el mercado.
6. Aprendizaje
De este proyecto he aprendido cómo funciona el negocio de las librerías, la entrevista al dueño de El Buscón nos dio un punto de vista muy interesante del negocio; además he aprendido cómo actúa el usuario y que patrones sigue a la hora de comprar libros; me he dado cuenta de lo complejo que es realizar una correcta arquitectura de información para las librerías.
Por primera vez nos enfrentábamos a un rediseño web, lo que fue un auténtico reto poder realizar el Mid-Fi, ajustando los tamaños y los margenes.
Por último me llevo uno de los mayores aprendizajes; la importancia de la organización a la hora de trabajar colaborativamente en Figma, establecer unas pautas y saber delegar en tus compañeros y compañeras.
Muchas gracias por tu tiempo, un feedback siempre es bienvenido.
