Bottecchia
Responsive website
Bottecchia is a prestigious Italian cycling brand, founded in 1924 by Tour de France winner Ottavio Bottecchia. Known for its quality, innovation, and distinctive design, the company offers a wide range of bikes, including road, mountain, and electric models. Bottecchia combines tradition with cutting-edge technology, catering to both professional racers and cycling enthusiasts.
Project overview
The problem:
Bottecchia, a prestigious Italian bicycle manufacturer, has a rich legacy and a strong presence in the competitive cycling industry. However, their current website does not effectively reflect the brand's heritage, quality, and technological innovation, potentially impacting customer engagement and sales.
The goal:
The objective of the redesign is to create a modern, user-friendly, and engaging online presence for Bottecchia that reflects the brand's prestige and appeals to a global audience. The redesign should enhance user experience, improve navigation and accessibility, effectively convey the brand's heritage, and be optimized for SEO and mobile devices.
My role:
UX/UI designer
Researching user needs and current website issues, designing wireframes, prototypes, and responsive interfaces, testing the designs and refining based on feedback and collaborating with developers for accurate design implementation.
Primary Issues
Poor User Experience: Users have reported difficulty in navigating the website and finding specific product information. This lack of intuitive navigation and clear information architecture hinders the decision-making process for potential buyers. may fail to attract younger audiences or those expecting a high-end digital experience that matches the quality of the bikes.
SEO and Performance Issues: The website suffers from slow loading times and is not optimized for search engines, reducing its visibility and ranking in search results.
Outdated Design: The current website's design appears dated and does not align with the modern image of Bottecchia. This disconnect may fail to attract younger audiences or those expecting a high-end digital experience that matches the quality of the bikes.
Lack of Mobile Optimization: With a significant portion of internet traffic coming from mobile devices, the current website's lack of mobile responsiveness results in a subpar browsing experience for mobile users, leading to a potential loss of customer engagement.
Users Personas
After accurate research, we identified the characters that represent a significant portion of a product's target audience.
User journey map
Creating the user journey maps revealed how important it is for users to have clear and detailed information about the products offered by the company.
Sitemap
I used the sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Paper wireframes
Next i sketched out paper wireframe for the resposnsive website.
Starting the design
Digital wireframes and
low-fidelity prototype
After ideating and drafting some paper wireframes, I created the initial designs for the site and a low-fidelity prototype that connected the user flow about the product research.
Some usability study findings
1 - DEALERS
Users needed to have a dealers section also in the single product page
2 - ACCESSORIES
Users needed to have a list of all available accessories for each model
3 - GEOMETRIES
Users would like to see the geometries for each available size
Final design and High-fidelity prototype
Based on the insights from the usability studies, I updated the prototype and developed the responsive final design.
You can see the final result here:
IMPACT
The new site offers a wide range of information on each Bottecchia product, with simple and tidy navigation and a more modern design that enhances the brand.
Takeaways
WHAT I LEARNED
I learned the importance of managing all the contents in an orderly and logical way to ensure intuitive and fluid navigation, especially with the presage of many products like in this case.
I also started to manage a workflow that included the creation and photomontage of various photographic contents to ensure a faithful representation of each product.