ecommerce website design

ecommerce website design

Team: myself + 3 developers + Head of Marketing + 3 stakeholders
Design: UX/UI design, wireframing, ecommerce website design, mobile website design, visual identity, branding guidelines
Software: Figma, Illustrator, Photoshop, InDesign
Timescale: 9 months

Project Overview
FALKN is a premium British roof rack and outdoor adventure brand based in York, specialising in modular roof rack systems and vehicle accessories. The project involved redesigning the ecommerce experience and evolving the brand identity to create a more intuitive, scalable and premium digital product.
The primary objective wasn't simply to redesign the interface - it was to improve how customers discovered products, understood vehicle compatibility and navigated complex purchasing decisions while reinforcing FALKN's premium positioning.

My Role
I led the end-to-end UX/UI and visual design of the product, working alongside developers, the Head of Marketing and stakeholders from discovery through wireframing, prototyping, interface design, design systems and branding.

The Challenge
The existing ecommerce experience presented several usability challenges:
- Technical product information was difficult to navigate.
- Customers needed a quicker way to identify products compatible with their vehicle.
- The website lacked a consistent visual system across desktop and mobile.
- The brand needed to communicate engineering quality while remaining approachable for first-time buyers.
The challenge was balancing business objectives, user needs and premium brand positioning within a scalable ecommerce platform.

Constraints
- Large and technically complex product catalogue
- Wide range of vehicle compatibility requirements
- Premium brand positioning
- Responsive ecommerce experience

Discovery
Before designing new interfaces, I reviewed the existing website and conducted a detailed UX audit to identify usability issues, navigation pain points and opportunities to improve product discovery. This process informed discussions with stakeholders and helped prioritise improvements throughout the redesign. The findings shaped the information architecture, navigation patterns and overall user experience. The audit screenshots shown later in the case study illustrate this analysis.​​​​​

previous website audit

previous website audit

Design Strategy
The design strategy focused on solving user problems rather than simply creating new visuals.
Key priorities included:
- improving product discoverability
- reducing friction throughout the purchasing journey
- helping customers quickly identify compatible products
- simplifying complex technical information
- creating a consistent experience across desktop and mobile
- reinforcing trust through premium visual design and clear communication
Every design decision was evaluated against these objectives while supporting the company's commercial goals.

UX & Product Design
Designed user flows, wireframes and high-fidelity prototypes in Figma to explore navigation, product discovery and ecommerce interactions before development. Multiple concepts were refined collaboratively with developers, marketing and stakeholders throughout the project to ensure usability, technical feasibility and alignment with business goals.

Improving Product Discovery
Customers needed to browse a large catalogue of products with different vehicle compatibility requirements.
To simplify this experience, I designed:
- vehicle finder
- clearer product categorisation
- comparison layouts
- structured filtering
- stronger visual hierarchy
These features reduced cognitive load and helped users reach relevant products more efficiently.

Creating Confidence
Purchasing roof rack systems involves technical specifications and compatibility considerations.
To increase customer confidence, I combined:
- technical specifications
- lifestyle photography
- trust signals
- product comparisons
- customer reviews
- brand storytelling
This created an experience that balanced emotional appeal with practical purchasing information.

UX/UI wireframes in Figma

UX/UI desktop wireframes in Figma

UX/UI mobile wireframes in Figma

ecommerce website design

Collaboration
Worked closely with developers, the Head of Marketing and business stakeholders throughout the nine-month project to review designs, discuss technical constraints, refine priorities and iterate solutions. Regular workshops ensured design decisions aligned with user needs, business objectives and implementation feasibility.

developers & stakeholders chat

​​​​​​​Design System
Developed reusable interface components, typography, colour styles and layout principles to improve design consistency, streamline collaboration with developers and support future product scalability.

design system in Figma

Impact
The redesigned platform established a cohesive digital experience that combined branding, ecommerce UX and product thinking into a unified customer journey.
The project delivered:
- a clearer information architecture
- improved product discoverability
- consistent responsive experiences
- scalable design systems
- stronger alignment between brand and product experience
The result was a platform better positioned to support customer confidence, future growth and ongoing product development.

Key Product Decisions
Challenge - Large product catalogue
Design Decision - Introduced clearer navigation, filtering and comparison layouts
Challenge - Complex vehicle compatibility
Design Decision - Designed a Vehicle Finder to simplify product discovery
Challenge - Premium positioning
Design Decision - Combined technical information with lifestyle storytelling
Challenge - Mobile shopping
Design Decision - Designed responsive layouts with mobile-first considerations
Challenge - Consistency
Design Decision - Built a reusable design system in Figma

ecommerce website design

ecommerce website design

ecommerce website design

ecommerce website design

ecommerce website design

menu website design

Testimonial
"I've had the pleasure of working with Zu for around ten years. She is a great designer, adept at both graphic and web/app front-end design. If you have any design requirements, from post-rationalising brand concepts into design files, creating brand guidelines, brand mock-ups, brochures, flyers, website wireframes, anything you can think of, I would recommend Zu for it". 
- Samuel Butterworth, Global Head of Marketing​​​​​​​

branding guidelines design

branding guidelines design

You may also like

Back to Top