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 PROCESS
_____
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
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 Harley-Davidson.com 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
Wireframe
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
Navigation
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.
Layout
Modular layout, easy to A/B test different versions– or optimize for different demographics.
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.
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.
Design
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.