Case Study:

Harbour Cycles

Responsive web design | UX design


Harbour Cycles is an independent bike shop located in Loughborough Junction, South London. The owners, Brenton and Mark, have a real passion for social enterprise and improving a sense of community the local area. They run monthly maintenance classes to share their expertise with local bike enthusiasts and offer apprenticeships to long-term unemployed youth.

They wanted a new responsive website design with an online shop, and a fresh look and feel to set it apart from competitors.

annotated desktop HC high res.png


Discovery Phase

Consultation with Owner

I consulted with shop owner Brenton to gain industry insight and to better understand his vision for Harbour Cycles. I wanted to create something that could add meaningful value to their business. Brenton was keen to share knowledge with the community and had an idea for including video tutorials in the new site so I wanted to see what the cycling community thought of this.

Online Survey and Cyclist Interviews

I conducted a survey amongst cyclists based in the UK and beyond to give me a broad picture about cyclists behaviours, preferences and needs. I then went on to conduct interviews with five cyclists to get a deeper understanding of what they value in a bike shop and what they might need from a website. I also wanted to find out how and why people choose to buy bikes and accessories, and other key behaviours to validate the idea for an online shop.

Interpreting results into objectives

The research confirmed much of what we already knew:

  • New site needs to be responsive so that cyclists can find it while out and about on mobile

  • Basic information must be presented in a clear and easy to access way

  • Prices for repairs needed to be easy to find and understand

Interestingly, while most cyclists go to large online retailers such as Amazon (25%) and Wiggle (20%) for accessories, 20% said they would choose an independent retailer.

Speaking to cyclists made me realise that there were so many factors beyond price that would determine how and where a purchase would be made. In not having an online shop Harbour Cycles are potentially missing out on valuable sales, so this was an important feature for the new site.


Based on the user interviews, survey and conversations with the shop owner, I identified three personas that I could use to develop user flows. These are illustrated below:



Define Phase

Taking into consideration all the findings from the discovery phase, consolidating the needs of the business and users, my research and personas, I was able to develop a blueprint for UX strategy:

UX strategy hc.png

Competitive Analysis

South London is saturated with bike shops. And cyclists don't want to travel far to get to a bike shop, especially if the bike needs a repair. With this in mind I examined the websites of competitors within a radius of 20 min walk from Harbour Cycles to see content and usability trends.

From this I could see potential ways to make Harbour Cycles stand apart from the competition, where growth areas and needs are not being met.

Competitor analysis.png

Design phase

Information Architecture and Site Map

Given the objectives of the new site, I wanted to keep the architecture as simple as possible to help the user easily navigate the site.

HC sitemap.png

Initial wireframes

Responsive wireframes v1.png
SERVICES wireframe

Branding and UI

The client asked me to explore ways of developing the brand. My vision was to use a simple and clean, modern palette and logo design to carry the brand seamlessly across devices and in store.  

My inspiration came from the shop itself: inside, the shop is mainly white and grey, and the workshop features bright teal walls. One wall of the outside of the shop has a mural painted on it, and the shop name has been hand painted on it a lovely block sans serif font. The opening hours is also beautifully hand-lettered against a navy colour and there are orange-red accents throughout as you can see in the photos below. I was inspired to take these elements and colours and rework them to make a more cohesive and modern look.

With these as my starting point I began to sketch out ideas, iterating and playing around with variations of fonts colours and layouts, taking on feedback from the client, till we reached a good spot in the design.

BRANDING Harbour Cycles.png


Refine phase

User testing and refining the design

Although the prototype held up well under user-testing, I decided to enlarge the map to make it easier to navigate as several users commented on this aspect of the design.

There were comments on the legibility of using the bold high impact font for body copy elements such as address so I decided to change this too. Based on feedback, I felt that the original body copy font Merriweather was not serving as well as it could so opted for the slightly cleaner sans-serif Ubuntu.

The long list of repairs was proving to be problematic as it was just too long and users were taking too long to find what they were after - and were not using the hyper links! I could have added in search functionality but in then end decided to redesign this page with tabs for each section. Tabs seemed like they would be the easiest way to help users search for what they needed.



Future Development

As illustrated below, I outlined a roadmap for implementation and areas for potential growth in keeping with the business ambitions, including a second shop, adding an events calendar for community events, video tutorials, expanded areas for apprenticeships etc.

Future initiatives V2.png

© Amy Shepheard 2018