A B2C ecommerce and web design initiative for LiveWire, focused on reservation and purchase flows, mobile-first pages, product launches for Europe and Canada, SEO, accessibility, and a stronger UI foundation for the development team.
Context
LiveWire is Harley-Davidson's electric motorcycle project, bringing a new electric motorcycle to market while carrying the trust and recognition of one of the world's most established motorcycle brands.
The work focused on creating a visually aligned website experience, improving transaction and reservation journeys, and supporting launch needs across product pages, landing pages, and mobile-first flows.
The Problem
The goal was to create a visually pleasing, graphically aligned website that maintained the LiveWire brand image while also improving metrics, SEO, and customer satisfaction.
Reservation, purchase, and financing flows needed to be shorter, clearer, and better supported by smart information presentation, payment options, and accessible UI patterns.
Impact
The work improved core transaction flows, supported international product releases, strengthened design quality, and created reusable UI foundations for faster delivery.
Most traffic came from mobile devices, shaping a mobile-first design strategy.
Improved session duration through clearer navigation and content hierarchy.
Lift in engagement and conversion from the connected platform work.
Created component foundations and design practices to improve development quality.
Kick Off
The work began with UX consulting around best practices, usability, traffic metrics, SEO, and the existing product experience. Existing pages and flows were reviewed to identify improvements across reservation, purchase, financing, and launch journeys.
This helped define where the site needed clearer information, stronger mobile behavior, and more consistent design standards to support both customers and the development team.
Defining the Approach
Designing transaction and reservation flows was vital for customer satisfaction and business goals. The experience was optimized to create a shorter checkout journey with minimal drop rate and smarter information presentation.
Personal data required by the CRM was considered in the flow, and new payment options were implemented so users could move through reservation, delivery, pickup, payment, and financing decisions more confidently.
Mobile-First Approach
Over 85% of traffic came from mobile phone devices. Based on those metrics, the best approach for new flows and screens was a mobile-first design strategy.
This helped improve the user experience while also supporting SEO positioning through better mobile behavior, page structure, and clearer customer journeys.
Design the primary flows for the device most customers used first.
Improve page structure and mobile experience to support stronger search performance.
Support new PDP and landing pages for European Union and Canada releases.
Design System
Having standardized systems for page creation, component creation, and shared design and development knowledge was key for the growth of the project.
Basic steps were taken to implement a UI kit that solved pain points for the development team, including standardized typefaces, colors and shades, spacing, and reusable components.
Pattern Refinement
The UI kit work included color, typography, language selector patterns, and component examples so product pages could be assembled with more consistency.
Publishing component libraries and design best practices improved design speed and the quality of life for the development team while keeping the LiveWire brand visually consistent.
Final Design
The final work connected product storytelling, reservation, purchase, financing, mobile navigation, and reusable UI rules into a more coherent ecommerce experience for LiveWire customers.
Closing
This project reinforced how much a product launch depends on both customer-facing flow and behind-the-scenes design standards. Clear reservation paths, mobile-first decisions, SEO awareness, accessibility, and reusable UI patterns helped LiveWire move faster with a more consistent product experience.
