Bike shop website design: keep the riders' pages

A redesign starts from how the shop wants to look. Riders arrive from a different direction: a search for the shop's hours on a Saturday, a link saved two years ago to the service page, a map pin that opens the old address page. Each of those arrivals needs a page with the same answer. A new site that moves the hours under a menu item, or leaves an old service address pointing at a missing page, looks finished to the owner, who reviews it on a large screen from the homepage. The rider lands on a page the owner never opened.

• Does every old page that gets search visits still answer the same question on the new site?
• Are the opening hours and the address written as text, not inside an image or a PDF?
• Is the service booking button reachable from the first screen on a phone?
• Does the first screen say what the shop is and where it is, before any mood photo?
• Do old addresses redirect to the new page that answers the same question?

Before drawing the new layout, list the pages riders reach from outside the site. Your analytics shows which pages receive visits from search and from saved links, and those are the jobs the old site did well. A design that starts from a mood board tends to drop pages that look like admin, such as the hours page, the price list or the brand list. Those are the pages riders arrive on, so treat each one as a requirement, not a leftover.

For each page on that list, write the question a rider brings to it, in their own words: 'Are you open Saturday?', 'Do you fix electric bike batteries?', 'Where do I park?'. The new design passes if a rider can answer that question on the page they land on, or within two taps of it. The run uses those questions as its tasks, so your list becomes the test.

A banner that says 'Spring hours' over a photo is a picture of text. Search engines and screen readers can read the text of a page, and a rider can tap a written address to open a map. A picture supports none of those. Wrong: the hours as a graphic in the header, and a map embed with no address written out. Right: the hours as plain text in the header and footer of every page, the address written out, and special hours in a note under the list.

Check the map separately. A map embed can load in the new design with the wrong pin, or fail to load on a slow phone and leave the rider with an empty box. The written address is the fallback. A run on a phone shows whether the rider can find the address without the map, which is the case that matters most when they are about to ride over.

A large photo of a road bike on a mountain road tells a rider that the shop takes bikes seriously. It does not tell them whether the shop is open, where it is or whether it can fix their brakes. Wrong: a tagline such as 'Ride further' above a hero photo, with the hours two screens down. Right: the shop name and town, today's hours, and the 'Book a service' button on the first screen, with the photo below them.

Riders who do not know the shop judge it on the first screen of a phone. A mood photo does no harm when the answers sit beside it, but it cannot replace them. Check the first screen with the photo removed and see whether the answers still read well, because a layout that works only with the photo has the answers in the wrong place.

Seasonal hours, a new service or a changed booking link can undo a redesign that passed. Rerun the same rider questions after each change, especially the Saturday hours question, which tends to change first. Keep the earlier run, so you can see which page changed and when.