Bici Bavarese
Website Redesign - May 2021Bici Bavarese is a Munich bike shop with a split identity: part retailer, part community hub. Their existing site didn't reflect either. As a project during Designlab's UX Academy, I took on the full redesign — from competitive research and user interviews through to final UI — keeping the brand's character intact while giving it a visual language that matched what the shop actually is.
(Disclaimer: I used their existing logo, text, and some images from their website, Instagram, and Flickr profiles.)
Goals
The shop sells bikes, repairs bikes, and runs the Giro Bavarese — an annual old-timer racing event that draws riders from across the region. The redesign had to serve all of that without losing the character that makes the shop what it is.
Constraints were tight: one month, working with their existing logo and brand assets, focused on key pages. The goal was a site that felt as alive as the shop does.
Understand
Competitor Analysis
User Interviews
Competitor analysis
I started with secondary research to understand the Munich bike market, then ran a competitor analysis to see how similar shops positioned themselves online.
User Interviews
I interviewed three users to gather insights into their experiences with bike shops, both physical and online, and their relationship with their bikes. Below are the key findings:
- Clear pricing information is essential.
- Physically inspecting the bike is crucial.
- Online appointment scheduling is a nice-to-have feature.
- The ability to connect with other riders is a welcome idea.
- Straightforward navigation and well-organized filters on catalog pages are vital.
- An outdated design creates distrust.
Define
Persona
Sitemap
User Flows
Wireframes
Persona
Using insights from the interviews, I built a persona to capture the main user needs, frustrations, and motivations.
Sitemap
The Sitemap helped me visualize the core structure of the website, considering the current website.
User Flows
These key user flows illustrate the connection between the online experience and the physical bike shop.
Wireframes
Three key pages, each with a different job: the Homepage to communicate the shop's identity at a glance, the Giro Bavarese event page to bring the annual ride to life, and Our Bike to showcase their custom-built bikes in detail.
Design
Brand
UI Design
Brand
I developed the brand concept by creating a mood board and a style tile, laying the groundwork for the visual design.
UI Design
The final designs grew from the research — each page shaped by what users said they needed and what the shop needed to communicate.
On the Homepage, I prioritized showcasing the shop's community spirit. It was important to highlight the various services Bici Bavarese offers, from bike sales and repairs to events and customer satisfaction.
On the Giro Bavarese page, I focused on organizing information clearly with dropdown menus and using video to immerse users in the event experience.
The Our Bike page focuses on showcasing the custom bike and its various parts and configurations.
Testing
User Testing
User Testing
I conducted user tests with three participants to understand how they interacted with the interface, what they took away from different sections, and their overall impressions.
These tests were crucial for iterating on the design, leading to changes such as introducing a "customizable bike" feature and making the homepage more engaging.
The prototype is only semi-functional, allowing navigation between the Homepage, Our Bike page (Unser Rad), and the Event page (Giro Bavarese). This represents the first version of the UI design.
See prototypeTakeaways
You can get surprisingly far with secondary research and three user interviews — if you ask the right questions. The interviews shaped real decisions: the "customise your bike" feature came directly from what participants said, and the homepage evolved based on their first impressions.
The gap I couldn't close: I never spoke to actual Bici Bavarese customers or the shop owners. That context would have changed some choices — a reminder that research quality matters as much as research quantity.