Case Study: Liberty Bikes
Challenge: Create an application to customize bike component colors in 2 days
Versión en español aquí.
This is an individual project in which I had to create an application where users could choose the colors of the components of their bicycle before purchasing it.
I decided to use the design thinking methodology and adapt it to the time limitations of the challenge, which had to be completed in 48 hours.
Liberty Bikes
Liberty Bikes was born to cover the urban bike market.
Designed for an audience starting to use bikes in the city and for small getaways in parks and city surroundings. Liberty Bikes are tools for both transportation and leisure.
Liberty Bikes are fixie bikes, easy to use and maintain as they have no gears.
They are offered in 8 colors and 4 different graphics so that our users have multiple options to customize their bikes.
Plan
This is the plan I followed to complete this challenge:
- Research (context). I used the following techniques: netnography, desk research, benchmarking and moodboard.
- Ideation, sketch and flowchart.
- Color palette and branding.
- Creation of screens in Figma for desktop and mobile.
- Report writing, conclusions, and future considerations.
1. Context
According to the latest report from the Spanish Association of Bike Brands (AMBE), in 2022, 1.4 million bikes were sold in Spain, a figure in decline versus 2021, but the trend in recent years has been very favorable. Compared to 2019, the national production of bikes doubles its value, and the sector’s turnover is 45.1% higher.
The main drivers stimulating the bike market include:
- The growing popularity of sports like cycling,
- Increased health issues, and
- Rising environmental concerns.
Despite the decline in other categories, urban bike sales (+22.5%) and electric bikes (+5.7%) stand out.
Competitive Analysis
The main competitors for an online bike store would be:
- Large sports product chains, especially Decathlon, with good value for money, workshop service, and offers. They represent 10% of sales in Spain.
- Generalist large distribution, especially hypermarkets, with very competitive prices. It is 6% of sales in 2022 according to AMBE.
- Specialized stores, including online shops, account for 84% of sales.
Online bike market
According to the attached article and measuring by traffic volume, the following online stores are direct competitors in the electronic bike sales:
10 of the best-positioned cycling online stores in Spain
Bike Customization
When checking major online stores, we realize that few websites give you the option to customize the colors of the bike components, and it also depends on each bike model.
Opportunity
💡 We can capitalize on the rise of urban bikes to focus on offering a personalized service for customers who prefer to choose colors for their bike components.
The main model to customize will be a fixie or single-speed bike, which is a basic model that can be used on many occasions and perfect for the city.
Moodboard
Below are several existing websites that served as inspiration for the proposed design.
2. Prototype and flowchart
I started with a sketch of how our website’s desktop screen could look like and possible names for the brand.
And in the following flowchart, I have represented the steps that the user would have to take to reach the goal: choose the color of the components and add the bike to the cart.
3. Branding
I chose the name Liberty Bikes to express the freedom people feel when riding a bike. That feeling of freedom you have as a child when you use a bike for the first time and that you feel again when you use it after a while without riding.
The green color of the brand expresses how the bike is a sustainable means of transportation that helps the environment and brings you closer to nature when you ride it. It is an instrument to care for and visit nature, giving us calm, joy, and helping us enjoy life.
The primary color is HSLa green (148, 26%, 34%, 1), and as a secondary color, I chose blue, which conveys tranquility and freedom.
This is the chosen color palette.
For the logo, I used the Aeonik typeface, a modern, harmonious, and very versatile font.
For other texts, I used Roboto, another sans-serif font that is modern, clean, clear, and very legible on screens.
I have adapted the primary color according to the component to ensure that the design is accessible according to WCAG (AA).
4. High-definition Screens in Figma
I created the online store model for desktop and Android mobile. It will be a responsive design. I used autolayout, componentized the most used elements, and created variants to work more efficiently.
We start with an initial screen with a photo that evokes the feelings of nature and freedom of the brand. By clicking on the green FAB at the bottom, we reach the main screen for customizing the bike.
The main menu includes the logo and links to the homepage, bike specifications, including the recommended size based on the user’s height, and contact information. I also included access to social networks so that the user can share their purchase or choice. The user can log in, and if they make a purchase, it will appear in the shopping cart.
The price, which does not change regardless of the colors the user chooses, will be located on the top left side. On the right side, the user chooses the frame size.
At the bottom, they would choose the desired color or graphic for each component. Clicking on each circle will display the range of colors the user can select. When clicking on the chosen color, the photo will show how the bike looks with the selected component color.
Once the colors are chosen, the user can add the bike to the cart and complete the purchase. Home delivery would be free to encourage purchases and position us better against the competition.
On the phone screens, we see the same options, but the user has access to them from the hamburger menu in the header, the arrow menu for size, and by clicking on the ‘+’ icon to color the bike components.
Below are videos with the flows for both desktop and mobile.
5. Future Considerations
The following are elements to include or review in the future:
- Review of functionalities and testing with users.
- Refinement of visual elements and copy.
- Possibility of adding the choice of different types of components, not just colors.
- Make the size specifications more accessible by clicking on the frame size.
- Consider adding the rest of the specifications in a footer.
- Consider adding other bike models if there is demand.
Conclusions
In this project, I used the Design Thinking methodology adapted to the delivery time limitations.
I proposed a simple and intuitive design with the goal that the user can add colors to the components and easily add the bike to the cart.
Visually, I wanted to convey the feeling of freedom when using a bike, modernity and sustainability.
I enjoyed developing the idea and launching a prototype ready to be tested on users in record time.
Thank you very much for reading the article!
