Company
Lenovo
My Role

Lead Designer

Years
  • 2022 – 2024
Team
  • 7 UX designers
  • Agency – 6 designers + 2 creative directors (3 months)

Modernizing the mobile experience

Mobile Transformation was a major initiative by Lenovo to address the mobile issues that were occurring sitewide.

The mobile experience was originally adapted from a desktop first approach which causes significant friction for users when interacting with the site. Mobile Transformation was an initiative done by Lenovo that was aimed at addressing these issues.

Project Overview

I lead the redesign of the Lenovo mobile web experience. The goal of ‘mobile transformation’ was to reduce complexity, increase user purchase and engagement metrics, and bring Lenovo’s design language into the modern era.

I lead the team through research, strategy, design and delivery.

Team
  • 7 UX designers
  • Agency – 6 designers + 2 creative directors (3 months)

Goals

Our goal is to create a superior user experience that reduces complexity, boosts engagement and ultimately converts visitors into customers.

To ensure we have a measurable way to track this,  we used the current experience as base for our metrics and Dell as our target competitor. We set the below goals to accomplish at a minimum.

  • Improve mobile conversion rate (0.17%) by 10%
  • Decrease page exit rate by 10%

Challenges

There are few challenges that could potentially hinder us along the way. We laid out what they might be and summarized them in the 3 key questions below.

  • How do we create a simple experience with our extensive product catalogue?
  • How do we keep users engaged if we can’t reduce the amount of steps taken in the user journey?
  • How do we transform our experience into something that feels premium and fits our new brand aesthetic?

Original Lenovo.com Mobile Experience

To set the stage, this is what the previous Lenovo mobile experience was like.

But wait, Lenovo has millions of users, how do we design for such a broad audience?

Design Journey

Defining the Problem

In order to solve user & business needs, we first need to define the issues and determine solutions

Business

From a business standpoint.

The hypothesis is that users browse and/or research products on mobile and then make actual purchases on desktop. To get to the root of the issue and verify this hypothesis, we asked ourselves several questions:

  • Who are the .com Mobile users?
  • What do they need?
  • Why do they come to the mobile site?
  • What are they looking for?
  • What are their expectations?

Note: Pre-transformation conversation rate metrics for mobile on average are 0.17% vs 1.25% on desktop respectively.

Design & Usability

From a usability standpoint, the issue is easier to address.

At the root of the problem, the mobile site was adapted from a desktop first approach.

As such, the experience has a number of issues due to the site not being optimized for mobile users from its inception.

Examples include:

  • Not being designed on a proper grid
  • Component consistency between screens
  • Poorly designed 3rd party implementations (checkout)
  • User Journey – 6 steps vs competitors average of 3

Narrowing our Focus

The Lenovo.com experience can be overwhelming with the sheer amount of products and content it contains. To narrow our focus, The Golden Path was chosen as it is underperforming current metrics and will have the highest impact on our customers.

To better understand how our funnel compared to the industry, I ran a competitive analysis on our top competitors.

Our experience can take up to 6 steps vs the competitors average of 3-4 steps. A new flow was proposed to reduce this number, however due to architectural restraints, this would have to be a future change since it would affect the entire site.

We also examined the user journey to better understand how our customers feel when navigating the site.

Project Journey

Mobile transformation was large in scope, so we broke it down into 3 phases.

Phase 1

Kickoff

  • Understanding Lenovo
  • Project Discovery
  • Baymard UX Audit
  • Market Research / Competitive Analysis
  • Moodboard
  • Agency Kickoff

Pre-workshop

  • Handoff items I had been working on prior to Media Monks inclusion
    • User Research
    • Previous Design Work
  • Weekly meetings with MM to discuss the current issues and what I think they should focus their research on
  • Collaborate with Media Monks on the visual look of the site (moodboard)
  • Level set their team with the new Brand Visual Identity

Post-Workshop Engagement

  • Synthesize the research
  • Biweekly meetings to review MM’s progress on the new visual treatment (Design Sprints)

Phase 2

This is where we turned concepts into reality

Strategy

  • Setting a Timeline
  • Design + Research Audit
    • Taking a deep dive and analyzing the research done by MM and reviewing the visual treatment with the team

Design

  • Design System Initiative
    • Creating a new DSM for mobile components
    • Weekly meetings
    • Assigned components to individuals
    • Review and approval
    • Monthly meetings with the greater Trackpoint team
  • Design Phase
    • Upper funnel
    • Lower funnel

Execution

  • User testing  + Live site A/B Test
    • Engaging the UX Research team – I worked with them on various tests for items we were unsure of (i.e. specs vs no specs, navigation, etc)
    • North America A/B Test
  • Iterations + testing
  • Final handoff to dev

Putting Concepts into Action

After delivery of the initial concepts, it was now my turn to make it real. To do so, I created a strategy  to tackle each objective.

  • Dedicated Office hours to give updates and review mobile design work
  • Kanban board (Miro) for tracking
  • Combine learnings from Media Monks Engagement, Baymard and User Testing
  • 2 week sprint schedules for each design
    • Testing & iteration post sprint
  • Design sessions (On request)

Creating a New Design System

Creating a new design system from scratch is always a challenge and ours was no different. Although we already had one in place it was very outdated.

I lead the team in creating the new DSM by both contributing to it as well as overseeing the team’s work. The general process was typically:

  • Review current component & determine if it can be reused
  • Update component with new styling or create new component
  • Determine min/max specs, character limits, light & dark mode
  • Review with team for approval or iteration

To keep things organized, I created the following process:

  • Kanban board for tracking
  • A weekly meeting for approvals, updates, assignments and feedback as well as one off meetings when needed
  • Bi-monthly meeting with the larger UX team for review

Design Process

When designing and re-designing pages, I followed the standard design process:

  • Research
  • Define
  • Design
  • Prototype
  • Iterate

However, how I designed each solution varied depending on what was available and how much time was given to complete each item.

User Testing, Analysis, & Iterating

We collaborated with the UX research team to perform testing, analysis, and iteration

Testing + Validation

Once designs were finalized, we launched them live in North America for an A/B test. The goal was understand what was working, not working and what needed to be changed. To test in a live environment, we ran an A/B on the North American live site over the course of 6 months, splitting the traffic 50/50 between the Standard Experience and Mobile Transformation.

The team would analyze the data and make iterations based on user metrics with the main focal points being:

  • Conversion Rate
    • Rate per flow (i.e. Home > Splitter vs Home > Deals vs Home > Subseries, etc..)
  • Revenue Per Visit (RPV)
  • Exit Rate
  • Bounce Rate
  • Cart Participation Rate

We evaluated each component and page to determine what was working and what needed to be changed. To do so, we used adobe analytics to narrow down each individual piece of the page to see how it was performing as well as using a Customer Experience (CX) survey for direct user feedback.

What was delivered

Use a mobile device (or a mobile view in the browser) and see it for yourself on Lenovo.com

Results + Takeaways

Summary

Our challenge was to increase conversion rate by 10% and reduce bounce rate by 10% and current live metrics point to a successful launch.

  • Improve Mobile conversion rate vs current style
    • Mobile Pilot = 75% lift in conversation & +105% lift in revenue per visit through A/B test (avg)
    • Segment homepages = NA pilot conversion rate up 76% after redesign
  • Reduced overall exit rate by 27%
  • Decreased bounce rate in initial journey page by 52%

Next Steps

As we monitor traffic, we are looking at how users interact with specific features to see where some issues may be. We will continue to iterate on features that are performing at a subpar level.

Learnings

Convincing a large organization of the proper mobile strategy felt like a monumental task at times. Navigating the requirements, opinions and interests of different organizations required balancing the proper amount of give and take; i.e. providing an optimal user experience while also meeting requirements. Not everyone was happy and there were things I had to relent on but overall, the business was pleased with the new experience and data shows the positive impact it made.