Skip to main content
Bici Bavarese website redesign shown across desktop, tablet and mobile

Bici Bavarese

Website Redesign | May 2021

Bici Bavarese is a Munich bike shop with a split identity: part retailer, part community. Their site was neither. I redesigned it as an unsolicited, one-month project during Designlab's UX Academy, working with their own logo and photography.

Logo, copy and some images are theirs, taken from their website, Instagram and Flickr.

Role

UX / UI Designer

Skills

Research, Information Architecture, Interaction & UI Design, Prototyping, Testing

Tools

Figma, Whimsical

Duration

1 Month

The hard part

The shop sells bikes, repairs bikes, and runs the Giro Bavarese, an annual old-timer ride that pulls riders in from across the region. Most bike shop sites pick one of those and bury the rest. The problem was fitting all three on one site without the commerce flattening the character that actually makes people show up.

Two shops, one site

The Munich field

What riders said

The Munich field

I looked at how other Munich shops present themselves online, mostly to find out whether the split identity was a problem anyone had solved. It isn't, particularly. The sites are catalogues, or they're blogs, and the ones with a workshop treat it as a phone number at the bottom of a page. Nobody seemed to have worked out how to sell a bike and run a community from the same homepage.

What riders said

Three interviews covered their bikes, their shops, and what they do online before they walk into one. Small sample, but the answers pointed the same way.

Two things mattered more than I expected. Nobody buys a bike online without seeing it; the website's job isn't to sell, it's to get someone through the door with enough information to decide quickly. And an outdated site makes people distrust the shop behind it. For a place whose actual reputation is good, that's the worst possible failure. The rest was practical: clear prices, filters that work, appointment booking as a bonus. Connecting with other riders came up unprompted, which was the first sign the community half wasn't a nice-to-have.

Structure before surface

Three routes in

Wireframes

Three routes in

If the site has three jobs, the structure has to admit it rather than hide two of them in a submenu. Shop, workshop and event became three routes in, each reachable from the homepage, none subordinate to the others.

The flows were the more useful artefact. Almost every one of them ends in the physical shop, whether that's booking a repair, coming to see a bike, or turning up to the Giro. Drawing them made the site easier to think about, because it stopped being a destination and became a way of getting somewhere.

Wireframes

One month meant choosing three pages instead of doing all of them badly. Homepage, Giro Bavarese and Our Bike covered the identity, the community, and the thing they build themselves. Between them they cover all three jobs; everything else is a variation on patterns those three establish.

Giving it a face

Their own material

Their own material

The brief I set myself was to keep their logo and work outward, which turned out to be the easy part. The shop already had a look, it just wasn't on their website. Their Instagram and Flickr are full of it: old frames, workshop clutter, riders in the rain. The mood board is mostly theirs.

The style tile turned that into a usable palette warm enough to feel like the shop rather than a bike supermarket, type with some weight to it, and components sized for photography rather than product grids. The photographs carry the character. The system just has to stay out of their way.

Three pages, three jobs

The pages

What testing changed

The pages

Each page answers a different question, so each one leads with something different.

The homepage leads with the community rather than the catalogue. Services like sales, repairs, and events are there, but the first thing you see is that people are involved with this place. That's the thing a competitor with better stock can't copy.

The Giro Bavarese page has to do two contradictory things: make you want to ride, and tell you where to be at seven in the morning. Video and photography up top for the first; collapsible sections underneath for the second, so the practical detail is there without turning the page into a timetable.

Our Bike is the one they build themselves, so it gets treated as a single object rather than a catalogue entry, with parts, configurations, and enough detail to make the decision before coming in to see it. Which is what the interviews said people would do anyway.

What testing changed

Three participants, walking through the prototype and telling me what they thought each section was for.

Two changes came out of it. Customisation turned into a proper feature because people wanted to configure the bike, not just read about the configuration, which is a different page. And the homepage got more engaging, because the first version was informative and forgettable: it explained the shop instead of showing it.

The prototype is semi-functional, enough to move between the homepage, Unser Rad and Giro Bavarese, and no further.

See prototype

Takeaways

Three interviews and a month got further than I expected, mostly because the questions were about bikes rather than websites. People will tell you a lot about how they buy something if you don't ask them to review an interface.

The gap I couldn't close: I never spoke to a single Bici Bavarese customer, or to the people who run the shop. Every decision here rests on riders in general and on what I could read off their Instagram. Some of it would have survived that conversation and some of it wouldn't, and I don't know which is which. An unsolicited redesign is a good way to practise the craft and a poor substitute for a client.