Performance as a mindset
eCommerce, Website, Visual Design
One name, 70 years of innovation, shared passion. With a French touch.
I was part of the established design team and responsible for the design system and visual experience strategy of the new global Lapierre website. I lead the UI and art direction work, producing all major deliverables and presenting these to stakeholders. I worked alongside branding managers, a graphic designer, content editors, SEO specialist, developers, a UX Lead and a product owner. Daily operations included working agile in 2 weeks sprints.
Design - Branding - Content - Development - SEO
Our team was under pressure from both a deadline and a pandemic. Communication proved rather difficult at times due to external personal factors and distancing. However team proved resilience and professionalism. On top of this our design system and our platform needed to adjust to new requirements from stakeholders, which wanted a strong visual presence. Existing content was in need of a management system. New assets needed to be created.
As an active biker
I want to benefit of the latest and greatest technology
So that I can feel empowered, confident and self-aware.
When I'm being asked to "make it pretty", I fall back to "emotional design". According to Don Norman's book — "Emotional Design", it's important to translate end user goals into the product's experience. We need to consider the user's motivations:
The aim of the Design System is to ensure we all share the same point of view on the position of Lapierre in the world, so that we can continue to build our global brand in a uniform and consistent way.
Based on OOUX(Object Oriented UX) framework. Add Gatsby, kept together by Storyblok, mixed with Shopware.
Brand benefits were at the core of design decisions:
To understand Lapierre's spirit we must first acknowledge why the brand exists, what do they do and what drives them.
We took the challenge to implement a dark theme to suit the brand's art direction of Suspence — Subtetly — Balance.
"Lapierre's elegance lies in tension and suspense. By not revealing the gear in its entirety. By leaving our audience to wonder."
According to the branding book: "We achieve that by playing with lights and shadows, underlining the gear or emotion we want to highlight, and leaving the rest in the dark. Visuals have a unique signature, half-way between premium shots and reverie photography."
View Design System ** NOTE: Only the chosen ones may see it, so be prepared for a password.
Users want to see a beautiful bike where technology prevails. Match the filename with an SEO keyword and the right copy description and you design for both robots and humans.
To structure an easy maintenance strategy within the multi-brand headless platform the colors were split as follows:
This allows the brands to customize their own colors without the fuss of dealing with selecting functional colors. Neutrals and semantic palettes have been carefully chosen and tested to ensure the best possible contrast (AA/AAA compliant). They also follow design patterns to set expectations of meaning for users.
Dark mode was a requirement from the Branding team, as a stakeholder. The UI needed to be dark when showing beauty shots(1) to enhance the elegance of the bike design(2).
In opposition to orientation pages, the functional and decision making sections of the website were kept on a light mode, to ensure that users's experience was not altered. Such is the case for product listing, checkout and articles.
In achieving technical depth in visual design the following were carefully considered and touched upon:
A campaign is a series of activities around informing, reminding or persuading its target audience about its product or service, across various mediums.
Content blocks are conected with other defined objects making possible various combinations to help quickly, easily and with speed build an online campaign.
Campaign Banner - the image or video should is different from the one in used on the homepage to avoid being flagged as duplicate content.
USPs - uses the same content block with different content managed from the CMS.
Product line object shows a preview of the entire range of products, including access to the product detail.
Overlay Menu - shows active campaign. Please note that content managers are able to do so via CMS from only place. Multiple active campaigns are also possible.
Image grid is, as its name suggests, a solution to display all product images in an engaging way. It was designed to work with aspect ratio as follows:
Size & geometry section — industry standard plussed by interaction.
Product hero — enhances the product and pushes the brand.
Product gallery — product images are taken to the next level.
OProductLine — A product line is a group of connected products marketed under a single brand name by the same company.
Aircode DRS — Product line Hero
Aircode DRS — Product line listing
OProductLineXL — Small screens.
ProductLineXL — Large screens.
Basket — Large screens.
Basket — Small screens.
Lapierre offered me the chance to blend many perspectives within a single user experience. In hindsight I should have been more vocal when designing with content that we didn't have. I should have promoted more the importance of Visual and Emotional Design within the customer experience. Usability was put at risk for both customers and teams involved.