Case Study
Lapierre Edge website

Consumer facing website tied in with the product launch of a range of Lapierre mountain bikes. The website will assist consumers in discovering the range and drive them through to the store locator to find the nearest stockist.

Key features included a store locator, range overviews & technical specifications.

Built with Wordpress and Elementor, hosted on a DigitalOcean VM droplet.
The product ranges are brand new, the website is positioned to raise awareness by exploring the products. Highlighting key features and unique selling points.

Project Setup

The website is a WordPress site with a base theme and layouts built using the Elementor page builder, hosted on a DigitalOcean droplet as the expected reach is within the United Kingdom. The site has no e-commerce functionality at this time and the main funnel drives users towards the store locator.

I worked as the creative lead on the project, working with the brand and business development manager for Lapierre at Raleigh UK.

Helmet Point-of-view biking downhill on Lapierre mountain bikes
Raleigh are the UK distributer for the Lapierre brand, the Edge AM / XM range are a UK only collection. The look and feel of the site had to sit closely to the existing brand identity.
The initial brief was to create an online presence for the UK only range. I was tasked with choosing the build stack, finding appropriate hosting and then creating the site from the ground up.
Screenshot of the Lapierre customer website, shows a spray painted wall and a overvolt bike infront of it
The deadline was less than a month to run in line with the dealer launch event at Raleigh HQ. I choose a PHP stack using a WordPress install on a DigitalOcean VM droplet. WordPress allows me to utilise the GUI page building with plugins such as Elementor. Having a simple and straight forward build stack gave me more time to focus on creating wireframes and prototypes.
Visual site mockups of the index and a product page

Mapping the features & interactions

The website serves as a source of aspiration, raising awareness of the product range and providing key selling points of the products along with technical information. I worked to a brief outlining the project requirements, I firstly scoped out the pages as a feature flow chart.

The interactions are with the store locator with the implementation of Googlemaps, with map markers for the stores with call-to-actions. The flow chart helps me to organise the flow of the content before I start wire framing the app layouts, I was providing frequent feedback so having implemented this I could easily share it with project managers to make sure all the important information was present.

Feature flowchart for the site

Building the wireframes

The initial concepts were sketched with direction from the existing Lapierre consumer site and the brand guidelines. I presented these before moving to digital mock-ups due to time constraints on the project.

I used Figma to create all the digital stages of this project, from the initial wireframe routes to the working prototype and implementing the visual designs for sign-off. The ability to share my projects and have someone simply follow a link and be able to see the work has been a great positive on my workflow, negating the need to pull together presentations or exporting files to package and send for approval.

Wireframes for the site

Visual Design

I set up a Kanban board to provide instant feedback with the design going through several iterations. The board provided granular feedback and reduced time between client inputs.

Below are some of the resulting visuals.

High Fidelity Visuals for the site

Building the prototype

Another advantage of Figma was the ability to easily create a working prototype of the intended app from the wireframe art-boards I am already using. It was a great addition to be able to demonstrate the functionality to roll out for internal testing and communicate the design to the project managers.

Audits

After shipping the site my next goal was to boost user experience with audits. Time to first paint is crucial to user engagement, if a site is slow or unresponsive the user may give up and go directly to a competitor. Having performant sites is of paramount importance.

Using Google Lighthouse to identify areas of improvement, I was able to boost a performance score from 52/100 to 93/100 utilising image optimisations, HTTPS and caching. The site was also checked against the mobile-friendly test, as can be seen there is still plenty of room across the board for continued iterations and improvement.

Performance audits and mobile friendly test results for the site
An office with a desk and computer, the screen of the computer displaying the lapierre edge website