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.
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.
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.
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.
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.
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.
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.