Diseñamos una herramienta de personalización de bicis 🚴
¿Qué pasa si juntamos a un DJ, World of Warcraft y unas zapatillas Nike?
Este reto consistió en diseñar una herramienta de personalización de producto para una marca ficticia de bicicletas especializada en vender un solo modelo. La clave del reto es que la herramienta solo modifica el color de las distintas partes del producto.
Tuve la suerte de enfrentarme a este challenge junto a Chuss Barranco, gracias a su buen trabajo en equipo todo fluyó sin problemas.
El principal constraint fue en todo momento el tiempo, ya que solo disponíamos de dos días para investigar y diseñar la herramienta.
Dicho todo esto, comenzamos con el reto:
Objetivo
Diseñar una interfaz dónde se muestre qué partes de la bici son personalizables.
Nuestro proceso
Debido al poco tiempo que teníamos, decidimos definir un proceso rápido basado en Design Thinking:
- ¿Qué hay ahí fuera?
- ¿Qué piensan los usuarios?
- Definir problemas
- Definir meta
- Ofrecer soluciones
- Prototipar
- Evaluar
1. ¿Qué hay ahí fuera?
El primer paso consistió en analizar las webs de la posible competencia, teníamos que conocer qué hacen y cómo lo hacen. Para focalizar nuestros criterios definimos el siguiente análisis heurístico:
- ¿Cómo presenta el modelo?
- ¿Cómo se accede a las partes?
- ¿Cómo presenta la personalización?
- ¿Cómo de rápido es?
- ¿Cómo aborda el responsive?
- ¿Habla el lenguaje del usuario?
- ¿Es accesible?

Después de hacer el análisis heurístico encontramos que:
- La mayoría presentan el producto de forma clara con fotos limpias.
- Se suele hacer uso de un menú (a la derecha o en la parte superior) bastante intuitivo y ágil.
- En la personalización a veces se denominan las partes con un lenguaje demasiado técnico.
- Se han encontrado menús de personalización muy largos y poco intuitivos, lo que resulta en un proceso demasiado lento.
- Prácticamente la mitad de las webs analizadas no son accesibles. No tienen focus funcional ni apoyo de texto a los colores.
- Se ha encontrado un caso en el que el modelo ni siquiera cambiaba de color con las elecciones del usuario.
Una vez que teníamos claro cómo eran las herramientas de personalización de la competencia, llegó el momento de ver cómo interactuaban los usuarios con ellas.
2. ¿Qué piensan los usuarios?
Para entender qué piensan los usuarios hicimos una netnografía con el fin de conocer qué experiencias han tenido en las webs que hemos analizado.
Por un lado no encontramos ninguna valoración negativa sobre el proceso de personalización de las bicicletas, ya que la mayoría de pain points que los usuarios presentan son relativos al precio y al proceso de envío.
Aunque por otro lado, en comentarios positivos, observamos que los usuarios valoraban la agilidad, simplicidad y diversión de la herramienta de personalización. En el momento tuvimos claro que debíamos tener muy en cuenta estas tres características en nuestro diseño.


Tras revisar y poner en común toda la información que habíamos recabado, llegó el momento de empatizar y concretar. Para ello creamos dos protopersonas y sus respectivos protojourneys:
Os presentamos a Marina.

Marina es una arquitecta de 36 años que vive en Barcelona.
Si sus amigos la describieran, dirían que es elegante, creativa y discreta.
Ha cambiado su trabajo en un estudio del centro por otro que le pilla más cerca de casa y se encuentra muy ilusionada. Siempre que se lo cuenta a sus amigos acaba diciendo que ahora podrá ir a trabajar en bici.
La realidad es que, aunque Marina aprendió a montar en bici de pequeña, lleva años sin usar una y no está muy familiarizada con este tipo de producto.
A la hora de iseñar su bici, probablemente este sería su viaje emocional:

Podemos ver cómo Marina tiene sus mayores pain points con el lenguaje técnico y con el tiempo que tarda en realizar su diseño.
Aquí teneis a DJ Dunkins.

DJ Dunkins tiene 28 años, es DJ y le encanta ir por la calle buscando inspiración y exhibiendo su estilo.
Se considera trendy y adora el estilo brutalista y los videojuegos.
Recientemente a DJ Dunkins le han robado su bici y, aunque esto le ha hecho sentir mal, también le ha supuesto la oportunidad de comprar una bici nueva, una que sea especial y muestre su estilo personal y quién es.
A la hora de diseñar su bici, definimos su viaje emocional:

Podemos observar cómo DJ Dunkins se pierde entre todas las opciones que presenta la herramienta.
A modo de conclusión, podemos entender que ambos:
- Valoran el diseño y la exclusividad.
- Buscan que sus pertenencias hablen de ellos.
- Son exigentes y no les gusta perder su tiempo.
3. Definir problemas
Tras empatizar con nuestros usuarios y revisar qué hace la competencia, nos vimos capacitados para definir los problemas que habíamos encontrado. Estos eran:
- Uso del lenguaje técnico.
- Posibilidad de pérdida si se ofrecen muchas opciones.
- Demasiadas interacciones, pensamos que se pueden reducir.
- Poca accesibilidad en algunos casos.
4. Definir metas
Sobre los problemas definimos una serie de metas para nuestro diseño. Debía ser:
- Ágil
- Intuitivo
- Divertido
- Con poca carga cognitiva
- Muy personalizable
- Accesible
5. Ofrecer soluciones
Llegados a este momento, ideamos soluciones para las metas que habíamos acotado mediante un brainstorming.
- Pulsar y elegir: Pulsas en una zona y eliges el color que quieres, este sistema nos pareció el más ágil e intuitivo.
- Sistema de etiquetas: Asignar a los colores diferentes etiquetas y añadir un buscador, de este modo será más difícil que los usuarios se pierdan entre todas las opciones de color. Además, el hecho de que las etiquetas tengan nombres es una oportunidad de hacer que las bicicletas hablen de sus dueños a la hora de diseñarlas.
- 3D: Nos pareció que sería divertido y cómodo para el usuario que viera su diseño en 3D, un homenaje a las herramientas de personalización de los videojuegos de coches y motos. Valoramos que, al venderse solo un modelo de bicicleta, no sería muy descabellado hacer uso de este recurso.
- Limpieza: El diseño debía ser limpio y directo, no queríamos que el usuario se distrajera con nada que no fuera su diseño.
- Focus: Tanto a la hora de moverse por la herramienta usando teclas como a la hora de seleccionar una zona que personalizar de la bicicleta.
- Nombres en los colores: Apoyar a los colores con nombres para aumentar la accesibilidad.
- Modo dark: Para mejorar el contraste a la hora de diseñar la bicicleta.
6. Prototipar
Una vez que teníamos claro cómo iba a ser nuestro diseño, definimos unos análogos y antílogos para que ambos tuviéramos claro cómo queríamos ser y cómo no.

Flujo
A continuación diseñamos un flujo intentando reducir las interacciones al máximo.

Wireframes
Para diseñar los wireframes, decidimos inspirarnos en el método de Design Sprint. Cada uno hicimos unos wireframes por separado, y luego votamos qué nos gustaba de cada uno de los diseños con el fin de iterar uno de ellos sumando facetas del otro. Finalmente el resultado fue este:

Moodboard
Para la capa visual, nos inspiramos en el personalizador de zapatillas de Nike porque lo consideramos muy limpio e intuitivo y en la presentación de producto de Cowboy, nos pareció muy bonito que el producto pareciera un mockup.


Para el modo dark, vimos que Mission lo hacía de una forma muy clara y sencilla. También encontramos este diseño de una UI que informa al usuario del estado de su coche, nos resultó muy acertada la forma en la que los colores más vibrantes tenían un brillo exterior para darles un toque de neón bastante moderno, al momento tuvimos claro que este detalle le encantaría a DJ Dunkins.


Por último, nos inspiramos en videojuegos para darle ese toque diferenciador y divertido. Como ya se ha mencionado antes, la personalización de coches en videojuegos fue algo que nos resultó muy atractivo casi desde el primer momento, por ello optamos por presentar el producto en 3D pudiendo girarse 360º.
A raíz de la anterior decisión visual se nos presentó la cuestión de ¿Cómo se podría hacerse focus a un objeto en 3D? Tras investigar varias opciones, se nos ocurrió hacer uso de un resurso visual que se emplea en World of Warcraft para hacer énfasis en la magia de un arma o armadura, y es silueteándola con una línea que se va desvaneciendo y que siempre se comporta como silueta independientemente del ángulo desde el que mires.


Estilo
Para el estilo visual nos decantamos fundamentalmente por el blanco, inspirándonos en un lienzo que el usuario deber rellenar con su creatividad.
Decidimos hacer uso de un morado para los acentos de color. Este tono en concreto nos transmitía un estilo moderno y pegaba muy bien con la idea de hacer los resaltos intensos y que se generara alto contraste, lo que siempre favorece la accesibilidad.

Prototipo
Diseñamos el prototipo usando Figma, en él podemos apreciar el selector de etiquetas en la parte superior, el selector de colores a la derecha y el modelo en el centro.
En el momento 0 de la herramienta, se muestra un mensaje que guía al usuario hacia sus primeros pasos.

Además de haciendo click en las flechas, es posible rotar el modelo 3D agarrando y arrastrando la bicicleta.


Una vez seleccionadas las etiquetas y la zona de la bicicleta que se quiere personalizar, aparecen los colores disponibles, un activador de focus y un activador del modo dark.




Por último, al seleccionar un color se muestra visualmente en el modelo.

7. Evaluar
Para finalizar, testamos el diseño con 2 usuarios y sus reacciones fueron las siguientes:
- Se valoraron positivamente la rapidez y sencillez de la herramienta, las etiquetas y el modo dark.
- Se sugirió incluir un sistema de aumento para ver mejor las diferentes partes.
- Un usuario sugirió un indicador de qué partes se han personalizado y qué partes faltan por personalidad.
- Ambos usuarios preguntaron cuánto valdría la bicicleta, por lo tanto podría ser oportuno incluir el precio en la herramienta.
- A ambos usuarios les pareció entretenido el sistema de personalización.
Entonces ¿Se han cumplido las metas?
- Ágil ✔️
- Intuitivo ✔️
- Divertido✔️
- Poca carga cognitiva ✔️
- Muy personalizable ✔️
- Accesible
Consideramos que, aunque la mayoría de metas se han cumplido y los usuarios sobre los que hemos testado el prototipo no han tenido ningún problema de accesibilidad. Nosotros, como equipo, creemos que la accesibilidad de la herramienta podría mejorar todavía más ya que el color de resalte podría tener un mejor ratio de contraste.
En cualquier caso, esto se trabajaría en futuras iteraciones.
