Redefining cycle style

When we started working with Rapha they were just two guys in a small room with a big idea; they saw the future would be two-wheeled, and they were determined to change the face of cycling.

Fast forward to 2013 and you're looking at a company that dresses Team Sky (the world's biggest pro cycling squad and home to Bradley Wiggins), with a turnover in the tens of millions, a huge product range, countless copy-cats and millions of products shipped.

That success has been enabled by the e-commerce website we built for them and it's continuing development over the best part of a decade.

The Brief

Rapha realised from the beginning that the success of their venture would hinge on the success of their website. With a director who was previously a brand consultant, they had very clear idea about how the site should reflect Rapha core values of:

• Quality
• Performance
• Design
• History

Our brand is about performance and quality as well as design. We wanted our site to be of the highest standard both technically as well as visually.

The site development needed to fit in with a marketing schedule that involved a three stage roll-out over the course of several months.

Planning

The discovery phase of a project is often the most important. It's here that we talk to the clients, research the competition and start to build a mental picture of the project.

After several meetings and conference calls, we had a very good idea of what was required from the site, so set about creating the project plan. The project plan is essentially the 'blueprint' for the site. It explains the structure, functionality and content in jargon-free language. It also outlines how we intend the project to progress, outlining stages, milestones and deliverables.

One of the most important parts of a project plan are 'wireframes', akin to movie story boards. They visually describe the functionality and content of a page in a way that is easy for both client and developer to understand.

By using simple, graphical representations of each page, it was easy for Rapha to see how the site would function. They could walk through the 'user paths' allowing us to make any functional or user experience changes before a single line of code was written.

Look and feel

Being a design-led company, the visual aspects of the site were extremely important to Rapha. They'd spent a long time researching their brand identity and provided us with a large array of materials, from design scamps and showreels to examples of complementary websites.

Rapha already had very strong design ideas and working collaboratively with Rapha's creative director, we helped turn their concepts into a stylish, functional website.

Standards and Accessibility

Rahpa were keen for us to create a site that was as technically accomplished as it was stylish, in keeping with their brand ethos. By using the latest web standards, we ensured that the underlying code as as lean and clean as possible. This meant development times were faster, download times quicker and maintenance simpler. It also ensured that the site was optimised for the search engines 'out of the box' without the need for expensive additional consultation.

Another benefit of this approach was to make the site easily accessible both to users with disabilities, and those using devices other than a standard web browser. Under UK law websites are required to be accessible to as many people as possible. This was an area Rapha were particularly concerned about.

We wanted to make sure the site was accessible but were concerned this could affect the overall design. Message put our minds at ease by creating a highly accessible site while maintaining our creative vision.

By using web standards we were able to create a site that could also be accessed by people using PDA's, mobile phones and screen readers.

Shopping System

In our initial meetings, Rapha raised the possibility of using a specific piece of 'off the shelf' e-commerce software. After more discussion we realised that no pre-built shopping cart would provide Rapha with the level of customisation they required.

Rather than trying to force a square peg into a round hole, it was decided the best solution would be to create a simple, custom-built system. This allowed Rapha to fine tune the user experience, and rather than being locked into a proprietary program, they now have a system that is easy to extend and has been built with future development in mind.