Caso de estudio: Liberty Bikes
Challenge: Crear una aplicación para personalizar colores de componentes de una bici en 2 días
English version here.
Este es un proyecto individual en el que tuve que crear una aplicación en la que los usuarios pudieran escoger los colores de los componentes de su bicicleta antes de comprarla.
Decidí hacer un design thinking express debido a las limitaciones de tiempo de la challenge: 48 horas.
Liberty Bikes
Liberty Bikes ha nacido para cubrir el mercado de bicicletas urbanas.
Pensada para un público que se inicia en el uso de la bici en ciudad y en pequeñas escapadas en parques y alrededores de la ciudad. Liberty Bikes son herramientas tanto de transporte como de ocio.
Liberty Bikes son bicicletas fixies, que son fáciles de usar y mantener al no tener cambios de marcha.
Se ofrecen en 8 colores y 4 gráficos diferentes para que nuestros usuarios tengan múltiples opciones de personalizar su bici.
Plan
Este es el plan que he seguido para realizar esta challenge:
- Research (contexto): he utilizados las técnicas de netnografía, desk research, benchmarking y moodboard.
- Ideación, prototipo a mano y flowchart.
- Elección de paleta de colores y branding.
- Realización de pantallas en Figma para desktop y mobile.
- Redacción del informe, conclusiones y futuribles.
1. Contexto
Según el último informe de la Asociación de Marcas y Bicicletas de España (AMBE), en el año 2022 se vendieron 1,4 millones de bicis en España, una cifra en retroceso, pero la tendencia de los últimos años ha sido muy favorable. Comparado con 2019, la producción nacional de bicicletas duplica su valor y la facturación del sector es un 45,1% superior.
Los principales impulsores que están estimulando el panorama del mercado de bicicletas incluyen:
- la creciente popularidad de los deportes como ciclismo,
- el incremento de los problemas de salud, y
- el aumento de la preocupación por el medio ambiente.
A pesar del descenso en otras categorías, destaca el aumento de ventas de bicicletas urbanas (+22,5%) y bicicletas eléctricas (+5,7%).
Análisis de la competencia
Los principales competidores de una tienda de bicicletas online serían:
- Grandes cadenas de productos deportivos, en especial Decathlon, con buena relación calidad-precio, servicio de taller y ofertas. Representan el 10% de las ventas en España.
- Gran distribución generalista, en especial, los hipermercados, con precios muy competitivos. Es un 6% de las ventas en 2022 según AMBE.
- Tiendas especializadas, donde se incluyen también los comercios electrónicos, con un 84% de las ventas.
El mercado de la bicicleta online
Según el artículo adjunto y midiendo por cantidad de tráfico, como competidores más directos en la venta electrónica de bicicletas encontramos las siguientes tiendas online:
10 de las tiendas online de ciclismo mejor posicionadas en España
Personalización de la bicicleta
Al consultar las principales tiendas online nos damos cuenta de que pocas webs te dan la opción de personalizar los colores de los componentes de la bicicleta y también depende de cada modelo de bicicleta.
Oportunidad
💡 Podemos aprovechar el auge de las bicicletas urbanas para centrarnos en ofrecer un servicio personalizado para los clientes que prefieran elegir colores en los componentes de su bici.
El modelo principal a personalizar será una bicicleta fixie o sin velocidades, que es un modelo básico que se puede utilizar en multitud de ocasiones y perfecto para ciudad.
Moodboard
A continuación se pueden ver varias webs existentes que sirvieron como inspiración para el diseño propuesto.
2. Prototipo y flowchart
Comencé con un prototipo a mano de cómo podía ser la pantalla de desktop de nuestra web y posibles nombres para la marca.
Y en el siguiente diagrama de flujo he representado los pasos que el usuario tendría que hacer para llegar al objetivo: elegir el color de los componentes y añadir la bici al carrito.
3. Branding
Elegí el nombre de Liberty Bikes para expresar la libertad que sienten las personas cuando van en bici. Esa sensación de libertad que tienes de niño cuando utilizas una bicicleta por primera vez y que vuelves a sentir cuando la usas después de haber pasado un tiempo sin ir en bici.
El color verde de la marca expresa cómo la bicicleta es un medio de transporte sostenible, que ayuda al medio ambiente y que te acerca a la naturaleza cuando paseas con ella. Es un instrumento para cuidar y visitar la naturaleza, que nos da calma, alegría y nos ayuda a disfrutar de la vida.
El color primario es el verde HSLa(148, 26%, 34%, 1) y como color secundario he escogido el azul, que nos transmite tranquilidad y libertad.
Esta es la paleta de colores elegida.
Como tipografía en el logo he utilizado la Aeonik, es una tipografía moderna, harmónica y muy versátil.
Para otros textos he utilizado la Roboto, otra tipografía sans serif que es moderna, limpia, clara y muy legible en pantallas.
He adaptado el color primario según el componente para asegurarme que el diseño sea accesible según la WCAG (AA).
4. Pantallas en alta definición en Figma
He hecho el modelo de tienda online para desktop y mobile de Android. Será un diseño responsive. He utilizado autolayout, componetizado los elementos más utilizados y creado variantes para trabajar de una manera más eficiente.
Empezamos con una primera pantalla con una foto en la que se evocan los sentimientos de naturaleza y libertad de la marca. Haciendo click en el FAB verde de la parte de abajo llegamos a la pantalla principal de personalización de la bicicleta.
El menú principal incluye el logo y enlaces a la home, especificaciones sobre la bicicleta, incluido el tamaño recomendado según la altura del usario y contacto. También he incluido acceso a las redes sociales, para que el usuario pueda compartir su compra o elección. El usuario puede iniciar sesión y si hace una compra aparecerá en el carrito de la compra.
En el lateral izquierdo aparecerá el precio, que no cambia independientemente de los colores que escoja el usuario. En el lateral derecho, el usuario escoge el tamaño del cuadro.
Y en la parte inferior escogería el color o gráfico deseado para cada componente. Al hacer click en cada círculo aparecerá la gama de colores que el usuario puede seleccionar. Haciendo click en el escogido la foto mostrará cómo queda la bici con el color de componente seleccionado.
Una vez escogidos los colores el usuario puede añadir la bici al carrito y terminar la compra. El envío a domicilio sería gratuito para incentivar la compra y posicionarnos mejor frente a la competencia.
En las pantallas de teléfono vemos las mismas opciones, pero a las que el usuario tiene acceso desde el menú hamburguesa en el header, el arrow menu para el tamaño y haciendo click en el icono ´+´ para colorear los componentes de la bici.
A continuación se pueden ver unos vídeos con los flujos tanto de desktop como de móvil.
5. Futuribles
Los siguientes son elementos a incluir o revisar en el futuro:
- Revisión de las funcionalidades y testing con usuarios.
- Afinar los elementos visuales y el copy.
- Posibilidad de añadir la elección de distintos tipos de componentes, no sólo colores.
- Tener más accesible las especificaciones de tamaño haciendo click en tamaño de cuadro.
- Estudiar añadir el resto de especificaciones en un footer.
- Estudiar añadir otros modelos de bicicleta si hubiera demanda.
Conclusiones
En este proyecto he utilizado la metodología Design Thinking adaptada a las limitaciones del tiempo de entrega.
He propuesto un diseño sencillo e intuitivo con el objetivo de que el usuario pueda añadir colores a los componentes y llevar la bici al carrito fácilmente.
En la parte visual, he querido transmitir el sentimiento de libertad al usar una bici, modernidad y sostenibilidad.
He disfrutado desarrollando la idea y lanzando una aplicación lista para testar en usuarios en un tiempo récord.
¡Muchas gracias por leer el artículo!
