Bici Bavarese
Website Redesign - May 2021For my first project at Designlab's UX Academy, I worked on the redesign of a local bike shop based in Munich. This gave me a chance to learn a lot about the local bike scene. I conducted research and user interviews to understand customer needs and placed a strong emphasis on understanding the existing product. My primary focus was on wireframing and UI design, creating a design that visually captured the shop's spirit.
(Disclaimer: I used their existing logo, text, and some images from their website, Instagram, and Flickr profiles.)
Goals
My goal was to research the local market, focusing on the bike industry and Bici Bavarese's dual focus on bike sales and repairs. The shop is also known for its annual old-timer racing bike event, which gathers enthusiasts to enjoy the beautiful surrounding nature.
The objective was to redesign their website while preserving their brand essence, color palette, and key assets. I aimed to create an eye-catching design that communicates a sense of community. Given the time constraints (one month), the focus was on key pages.
Understand
Secondary research
- Bike shops
- Current local scene
- Competitor analysis
Primary research
- User interviews
Research
I started by conducting secondary research to understand the general scope of bike shops and the current local market, followed by a competitor analysis to further contextualize the project.
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
Information Architecture
- Sitemap
Interaction Design
- Key User Flows
- Wireframes
Persona
Using insights from the user interviews, I created a Persona to capture the main user needs, frustrations, and motivations. This was a crucial element in the design process.
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
I created wireframes for the key pages of the website: the Homepage, the Event Page for the yearly Giro Bavarese event, and the Our Bike page showcasing their custom-built bikes. The wireframes follow a minimalist, modern design with classic touches.
Design
Brand
- Mood Board
- Style Tile
User Interface
Brand
I developed the brand concept by creating a mood board and a style tile, laying the groundwork for the visual design.
UI Design
With all elements in place, I created the following hi-fi designs, refining them based on feedback from user interviews.
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
In this project, I had the opportunity to refresh and redesign an existing website, maintaining key elements while adding a unique look and feel to enhance the brand's presence.
Once again, I was reminded of how essential User Testing is for uncovering key improvements and updates.
Although I wasn't able to work directly with the shop owners or interview their real customers, the project was a rewarding experience overall.
Thanks for reading!