El Buscón. Rediseño UI de ecommerce.
Contexto.
En esta sexta semana de bootcamp, el planteamiento era regresar al proyecto de la segunda (el ecommerce de Entre Col y Col para mí) para realizar la parte del UI que se había quedado pendiente.
Sin embargo, nuestro lead instructor nos comentó que habría cuatro personas, una de cada equipo, que rotaría y le tocaría un proyecto distinto al que había tenido inicialmente. Aunque pudiera resultar un poco confuso, esto nos daría la experiencia a todos de lo que suponía incorporar a alguien nuevo a un proyecto que ya estuviera avanzado.
El azar hizo que yo fuera una de las elegidas para este cambio, lo cual me resultó por un lado chocante pues me hubiera gustado poder continuar con un proyecto que ya había iniciado y por otro tenía muchísima curiosidad por saber cómo habían funcionado el resto de mis compañeros con lo suyos.
En mi caso, me tocó trabajar para el ecommerce de El Buscón, una librería especializada en filosofía con muchísima historia detrás ya que abrió en 1977, siendo un auténtico referente cultural. Mis primeras horas en el proyecto estuvieron destinadas a informarme de todo el trabajo de UX que se había realizado anteriormente con la ayuda de mis nuevos compañeros de equipo (Mireya Fernández, Victoria Serrano y Rubén Alguacil) y aportar alguna sugerencia al Lean UX ya que estábamos revisándolo.
Desarrollo.
UI.
Como de costumbre cuando comenzamos a tratar la parte UI de un proyecto, realizamos en primer lugar el Moodboard con imágenes inspiradas en el proyecto y que nos ayudarían en el momento de testeo a comprobar si estábamos comunicando de manera correcta los valores que queríamos transmitir (Brand Attributes).
El siguiente paso fue abordar el tema del color, algo que inicialmente supuso un pequeño punto de discrepancia, ya que no sabíamos si continuar con los colores que predominan actualmente en la web (rojos) o favorecer los que están presentes en la librería de manera física (morados). Recordando que en la entrevista con el dueño de El Buscón comentó que no le habían preguntado cuando le habían realizado la web tiempo atrás y sabiendo que morado representa el color de la filosofía, finalmente decidimos quedarnos con este, valorando distintos tonos durante buena parte de la tarde.
Posteriormente decidimos tipografías y procedimos a realizar el Style Tile en el que mostramos de un solo vistazo la nueva estética, para después poder elaborar el Style Guide y el Atomic Design del proyecto.
Después fue el turno de trasladar nuestra versión de El Buscón a pantalla, cosa que hicimos a través de Figma en primer lugar en Mid Fidelity para poder pasarlo conforme estuvo correctamente estructurado a High Fidelity.
Con esta propuesta de rediseño, pretendíamos solventar la problemática que mis compañeros habían detectado durante la semana de investigación y que el dueño del negocio había confirmado en las entrevistas con él: la página era visitada por sus ejemplares difíciles de encontrar en otras tiendas, pero la gran mayoría de los potenciales clientes no terminaban la compra puesto que la navegación en la página se les antojaba complicada y no terminaban de fiarse del proceso de compra por varios errores que surgían durante la misma.
En el momento de testeo, recibimos feedback de algunos errores que habíamos cometido a nivel UI como: uso de un color secundario demasiado parecido al primario que hacía que pareciese un error nuestro a la hora de aplicar el color, cambiar el icono de cesta que habíamos colocado en la card por un botón que pusiera directamente el precio, entre otras cosas.
Aquí se puede visualizar el prototipo del proyecto.
Sin embargo, no fue lo único que hicimos para El Buscón. También recibimos el encargo de realizar un MPV de la app.
Para ello cada miembro del equipo bocetó un Crazy Eight que después nos sirvió para poner en común y de ahí sacar nuestro Low Fidelity en papel. Al igual que hicimos con la web, realizamos la versión Mid y High Fidelity en Figma y comenzamos a pintar pantallas utilizando los colores que habíamos seleccionado y aplicando algunos cambios del feedback que habíamos recibido en la web, lo que hizo que la app fuera más sencilla de sacar adelante.
¡Gracias por leer!
