Client: Harley-Davidson

Release Date: 2020

This is a proposal case redesigning LiveWire product page by exploring how to better build an emotional connection with buyers and optimize engagement and lead generation

My Project Responsibilities

I have redesigned the web experience of Harley-Davidson LiveWire product page and prototyped the interactions to pitch the new design to Haley-Davidson.

Overview of the New Design

Working Process

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

Identified Issues

Under-delivering H-D’s enormous brand equity

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

Defined Principles

Aimed at limited audiences and mindsets

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

Not conveying product characteristics

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

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

We have wireframed the layouts and contents to have a solid starting point on UX

New look and feel

A Breakdown of the Page Design

Navigation

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

Layout

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

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.

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.

Specification

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

Advantages

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

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.

Design

The story of the expert craftmanship 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 - Click to View

Pumpkin Brand Video

COPYRIGHT ©2020 XIAOMENG TANG, All RIGHTS RESERVED.