top of page
Marlo header.png
Group 267.png
Project Context
Release Date: 2020

Client: Harley-Davidson

This is a proposal case redesigning the LiveWire product webpage for Harley-Davidson. For this refinement project, we created an enhanced web experience by focusing on building emotional connection with customers and optimized engagement to lead generation through the new design.

My Role

During research, I conducted thorough design audition for the current website to define the improving directions and the design principles. For design deliverables, I redesigned the web experience for Harley-Davidson LiveWire products, and prototyped the interactions to pitch the new experience to Haley-Davidson.

Final Design Exhibition


Design Audit

Improve filtering on product selection page

On the motorcycle selection page, the filters can be really crucial on the user finding what he/she is looking for. Here are a few ways it can be improved:


● Don’t refresh: Use technology that can automatically update the inventory when a filter is selected without refreshing the page


● Remove/reduce family header real estate: When filters are used, remove the family headers or reduce them to one line text headers

0_Audit Deck_HarleyDavidson.png

Immersive videos and showcasing brand

On the Experience page, there are opportunities to make an immersive experience with video content.


● Entice users with a preview: Looping a portion of the video (muted) is like a preview for users who may be interested

Defined Issues and Principles

We have identified 3 user experience issues and defined possible user experience principles during the audit and they formed the basis of our LiveWire design exploration.

3 Identified Issues

Under-delivering H-D’s enormous brand equity

Aimed at limited audiences and mindsets

Not conveying product characteristics

3 Defined Principles

Design a more immersive experience that brings the brand to life. Help buyers make an emotional connection with the products and brand.

Serve different personas and diverse mindsets by mixing inspirational with educational content and enabling multiple navigational pathways.

Bolster motorcycle education , convey the uniqueness and quality of the products and make the riding experience relatable.

Old and New Design Comparison
Applied Design Tactics

We have applied a range of design tactics to execute the design principles

• Embed auto-play video

• Use video and photography that  emphasizes human emotion and experiences

• Engage users with subtle animation and micro interactions

• Reveal information progressively to support novice  to expert motorcycle enthusiasts

• Support different shopping modes – from product focused to inspired browsers, by offering different navigational pathways and ways of exploring

• Use images and infographics to convey product characteristics

• Explain user benefits by contextualizing motorcycle ownership with lifestyle and environmental impact

New look and feel


I have drafted wireframes after the audit and defined principles to have a solid starting point on information hierarchy and UX 

A Breakdown of the New Experience Design


Optimizing navigation labels is important for wayfinding, and should align with the brand tone-of-voice and be tested with users.

Video Marquee

The video marquee is the gateway into the LiveWire experience and sets the tone and expectations for the user journey.


Making the experience more immersive, will address low engagement on current site.


Modular layout, easy to A/B test different versions– or optimize for different demographics.


The specification section of the page has great potential to elevate the product and surprise & delight the buyer.


Easily scannable section summarizing the main advantages of electric motorbike ownership.

Book a test drive

Inspire the user to book a test drive by placing them ‘behind the handlebars’ in an embedded video.

Display quotes from expert reviews and social channels.

Riding experience

In line with the rest of the page, this section is image-led and works as a teaser to explore the LiveWire’s unique features and technology in sub-pages.


Striking the balance between too little and too much information is key to improving the engagement metric.

Long Way Up

Looping a portion of the show or the trailer (muted) is an instant preview for users who may be interested and leverages Ewan McGregor’s celebrity status and image.


The story of the expert craftsmanship and engineering power that went into the creation of the LiveWire motorbike elevates the product, adds a human touch and helps justify the premium price tag.

Prototype Demo 
bottom of page