Proyecto 1: ABC Company
“Yo nací entre hierbas… y es que si no miro a los ojos del besugo y me enamoro, no lo compro” Cita de una de las entrevistas realizadas.
Vamos a empezar
Acaba de empezar el Bootcamp, y el primer día ya ha sido una carrera a contrarreloj, tras haber realizado un “Design Thinking Workshop: Hyper Island”, el cual consiste en sacar un prototipo en baja definición en apenas 4 horas.
Cuando llegamos el segundo día, ya están hechos seis grupos de trabajo y tenemos que empezar con el proyecto grupal. Mi grupo lo componemos las cuatro personas más dispares que puedas encontrar:
- Ana, socióloga, León.
- Martín, ingeniero informático, Pontevedra.
- Myriam, bailarina profesional, Valladolid.
- Cristina, diseñadora gráfica, Sevilla.
Ahora nos toca afrontar cuatro semanas de trabajo, en las que tendremos que ir conociéndonos y compaginándonos poco a poco, detectar las fortalezas y debilidades de cada uno, para que salga un MVP con funciones diferenciadoras sobre la competencia.
El reto
ABC Company es un supermercado conocido en su entorno, el cual destaca por la calidad de sus productos y servicios. Nuestro cometido es desarrollar una plataforma de e-commerce que refleje la filosofía de ABC Company, manteniendo la calidad de sus productos y servicios.
Entender al Usuario — UX
Con una avalancha de herramientas que vamos descubriendo cada día sin terminar de ver la utilidad de cada una, hasta que al final del proyecto todos los conceptos encajan, empezamos a trabajar. Blueprint, Competitive Analysis y Problem Statement.
Primero: empatizar
Una vez que hemos definido cuál es el principal problema de ABC Company, quiere mantener sus ventas adaptándose a las plataformas de venta online, tenemos que conseguir empatizar con el usuario.
Segundo: definir
Vale, tenemos un aluvión de información, datos, requisitos y necesidades de los usuarios. ¿Qué hacemos con todo eso ahora?
Creamos un Lean UX Canvas que nos ayuda a definir el problema y sobre todo a Pepa, nuestra user persona, que nos acompañará en todas las decisiones en referencia al producto que estamos creando.
Aquí entra una herramienta que considero esencial como punto de conexión entre el segundo y el tercer paso del proceso de Design Thinking, y es el Affinity Diagram. Ordenamos todos los datos que hemos definido, y nos ayuda a desarrollar oportunidades de diseño.
Tercero: idear
Con el Affinity Diagram como guía, empezamos un brainstorming con temporizador del que surgirán toda clase de ideas la presión nos ayuda a que fluyan de forma más ágil (¿robarle la compra a tu vecino?). A través de un sistema de puntuación evaluamos cada idea que ha surgido en el brainstorming y la llevamos a un Mindmap para tenerlas estructuradas.
El problema con el que nos encontramos aquí: tenemos 10 días para desarrollar todo el proyecto, y tenemos demasiadas cosas que queremos incorporar. Cómo hacer que no parezca “el cochecito de Homer”, sin demasiadas funciones, pero que cubra las necesidades del usuario. Pues fácil, a través del MOSCOW priorizamos qué funcionalidades se desarrollarán primero, cuáles se dejarán para los next steps y cuáles se descartan. Una herramienta que estará viva en todo el proyecto.
Cuarto: prototipar
Con papel y lápiz en mano empieza la mágica fase de cómo llevar a cabo todas esas funcionalidades e ideas que nos ha ido dando la investigación realizada. Para soltar un poco la mano, y la mente, empezamos con un Crazy Eight, elegimos una pantalla que queremos diseñar, y tenemos que realizar 8 versiones diferentes en 8 minutos. A partir de aquí, el proyecto empieza a coger forma.
Quinto: testear
Con los prototipos en papel realizados, testeamos que el user flow, es decir, el camino que seguirá Pepa en la web, tiene sentido. En este punto iteremos sobre los prototipos, hasta tener un flujo que comprenden los usuarios.
Y pasamos a realizar unos wireframes en mid-fidelity.
“¡Qué no se te olvide, todo en base 8!”
Tenemos dominada la tabla del 8. Y así terminan dos semanas de vértigo, presentamos la primera parte de nuestro proyecto, y con los consejos que nos dan, nos preparamos para afrontar el desarrollo del UI.
Funcionalidades
Después de todo este proceso de UX, ¿cuáles son las funcionalidades diferenciadoras que le vamos a dar a ABC Company?
- Recomendaciones de los expertos: pescaderos, fruteros. Tal y como si estuvieran en el supermercado.
- Categoría especial para los frescos del día. Para buscar de forma fácil y sencilla los productos que más le importan al usuario.
- Recomendación de recetas según el producto buscado, pudiendo añadir todos los ingredientes directamente al carrito.
- Envíos en menos de una hora y con una franja horaria ampliada.
Mostrar el producto al usuario — UI
Ya tenemos nuestros wireframes terminados, y al empezar las dos semanas que vamos a tener para dedicarle a la parte visual de nuestro producto, pensamos que ya solo es “pintar pantallas”.
Sin embargo, empieza de nuevo un proceso de investigación. Colores, formas, tono, fotografías, tipografías… todo debe seguir una misma línea, tener consistencia.
A través del moodboard llegamos a unos colores, tipografías y estilos tipográficos muy claros.
¿Cómo continuamos? Creando un Style Tile, que dará pie a cómo combinamos las tipografías, los colores, las formas y las fotografías empezamos a pintar.
Para poder trabajar de forma colaborativa, trabajamos con Abstract, de esta forma cada uno trabaja en su propia rama, y tras unas horas ponemos el trabajo en conjunto para ver que todos vamos por el buen camino.
Producto final
Después de cuatro semanas de aprendizaje a contrarreloj, hemos terminado las dos fases del producto: UX & UI. Y aquí se muestra el resultado final.
Qué he aprendido
- TÚ NO ERES TU USUARIO.
- Iterar, iterar e iterar. La mejora continua es esencial para el desarrollo de un producto diferenciado y que satisfaga al usuario.
- Es curioso, cuando empiezas a trabajar con las herramientas de UX, crees que sabes cómo van ser los resultados, sabes qué necesita tu usuario, antes de realizarlas. Uno de los puntos que más me ha sorprendido y me ha llamado la atención de todo este proceso de aprendizaje es el proceso de descubrimiento del usuario que se lleva a cabo a través de cada herramienta. Como cada punto es esencial para conseguir ese “Minimum Awesome Product” con las funciones diferenciadas que te harán destacar sobre la competencia.
- Siempre pensé que la parte de UI me iba a resultar más fácil al venir del mundo del diseño gráfico. Pero nada más lejos de la realidad.
- Al final de todo el proceso, si has invertido el tiempo y dedicación necesarias, los productos funcionan porque están basados en una sólida investigación, durante la cual se testean las funcionalidades con el usuario y se diseña por y para él.
- A pesar de que trabajar en equipo puede resultar complicado, si cada miembro del equipo aporta una fortaleza diferente, saldrá un producto mucho más potente. Escuchar y saber argumentar los cambios que se proponen.
