Skip to content

Website Example: Sheffield Bike Shop

Overview of a web design project


Brand & Website Design

Bike servicing website case study
Design client logo

Pedal Bikeshop
“I’ve always admired Andrew’s design work so when we had a rebrand project come up I basically jumped at the chance. I was not disappointed with the results! The team were very patient with my requests and I’m extremely happy with my new brand and website. The price was fair and they definitely helped me with a wide range of things they didn’t need to. Very responsive and quick. On top of all that, they’re all really nice people. Bonus!”
Adam R. Client since 2020


The business had some initial branding designed but wanted a complete overhaul and new look to match a website and new premises.


After years working for leading online bike shops, Adam (company owner), decided to setup his own business in Sheffield.


Analysis of Existing Website

Before starting any project we begin by looking at the industry search engine competition and the keywords used by their customers when finding similar services. We use software that can identify the frequency of search terms in a target area and help identify content that will attract the most searchers. In this example we realised that the term ‘bike repairs’ was 20 times more popular search phase than ‘bike shop’ or ‘bike servicing’. I was then able to write page content to match the research and then design the structure of the site to suit this. This is a basic example of how important it is to do the research before designing/developing a website.

Search Errors

Search console errors

Keyword Research

Competition keyword research

Competition Research

Keyword research to influence web design

UX Data

UX design data


Brand Design

The aim when designing a logo is to create a strong enough look/direction that a user or client can instantly get a feel for the type of business that you offer. When branding is done right it should tell a story of your business almost immediately. A logo is a good starting point for creating brand direction. Although this is only a small part of the overall brand image it’s arguably the most important aspect to get right at the beginning of a design project. A logo should project an image or style that is carried through and matched in all aspect of any future branding, most importantly the website. When presenting the initial ideas/concepts we’ll arrange a meeting to discuss through each concept and share the vision we have for each version. We’ll discuss your target customers/clients and market competition. Sometimes it can take a while to finalise the small details but it definitely shouldn’t be rushed as it will help all other aspects of brand design fall into place.

Initial Design Concept One

Web designer example

Design Two

Website design example

Design Three

Web design example

Web Design

Homepage Intro

Once a strong brand direction has been found it’s then a case of matching the styling of the website. If enough time has been spent on the initial branding stages it’s typically a relatively smooth process. We began by mocking up what an initial landing section would look like on the homepage. This small section of the site can show enough detail to project the look and feel of the whole site. We can therefore show you more design ideas as it’s quick to generate ideas/concepts for this smaller portion of the homepage. Generally designers will jump straight into designing full pages. This is great but potentially at the stage you might not want all their time and effort spent producing a single design you don’t like. Multiple options give you more control over the process. This stage of the process can continue until you’re completely happy with the way it’s going to look. Taking smaller steps and getting feedback from an early stage is crucial to making sure clients get a website that fully meets your expectations.

Full Pages

In this example the full homepage design was finalised in a single version. This was mainly due to the very specific direction I received from the content on the site. The client knew exactly what they wanted on the page, my job was laying it out in the most effective way to draw users to scroll down the page and make a booking. This all them had to be tied into the brand look that was original created in the earlier stages.

Homepage (top)

Bike shop website design project

Homepage (bottom)

Bike shop website design project


Web Development

The images below show the editing platform. This is a bespoke system that is build to give you full control eating your website. The website is built responsively, i.e. it moves and adapts depending on the width of the device/screen viewing the site. The site is built using bespoke code but written in a way that gives you full editing access to make future content updates and generate new pages as necessary.

Content management

Content management system


Search Engine Optimisation

Ensuring a website reaches a high ranking position is an ongoing process. Generally future maintenance is only small adjustments but it’s important it’s monitored on a monthly basis so I can advise you what to do if it looses position slightly. Typically this will involve looking into the sites that rank above you and creating a list of things we need do to regain position.

Website Traffic

Traffic increase over 3 month period

Search Presence

Google map listing


Loading Speed

Loading speed is critical to the feel of a website when being used. It’s sometimes the subtle untenable difference that defines a premium or cheap feeling website. A site that is built to perform in search rankings must be optimised to load as fast as possible with the content that is being displayed. This is the single biggest factor to achieving a high Page Insight score – a ranking factor used by Google. If a site is hosted on one of my servers then there’s lots of things we can do to optimise the loading speed of a website, from using a CDN (content delivery network from a service such as CloudFlare to minifying code and applying both server and browser caches. If these are unfamiliar terms but you would like to know more please don’t hesitate to contact me.

Google Page Insight


GT Metrix


Make An Enquiry

Get in Touch

Want to discuss your next project? Get in contact to arrange a call or meeting.

All Enquiries

View More Projects

All Projects

Want to find out more about our processes and the way we work? View more project case studies.

Design Projects