Huawei OOBE Redesign

UI/UX Design

With the goal of growing U.S. market, this OOBE redesign helps new users transfer from other phones to Huawei phones.

Team

Micheele Fernandez

Qing He

Wudi Hong

My Role

UX Designer Lead

Visual Designer

UR Methods

Heuristic Evaluation

Competitive Analysis

Contextual Inquiries

Design Methods

Affinity Diagramming

Feature Prioritization

Rapid Prototyping

Project Timeline

Screen Shot 2018-06-12 at 9.52.44 PM.png
 

Design Challenge

Huawei faces complains because of its software and high return rate on Amazon in the U.S. In this project, our goal was to improve EMUI onboarding experience to (1) decrease drop out rate and (2) increase user satisfaction during onboarding, in order to provide user (1) a zero-effort way to transfer to Huawei device and (2) a trustworthy experience and brand.

 

Solution Overview

 

Research

Compare with stock Android onboarding experience

We compared Huawei onboarding with Android onboarding because Android as the top one mobile system in the U.S. is well supporting 54.1% of total U.S. users. And we found on Amazon reviews that the western consumers perceived Huawei OS as a  iOS-like but an Android-based system in a negative way. We spent the first a few weeks to analyze stock Android OOBE as a baseline of our design quality matrix. We did audit documentation and observed users went through both onboardings.  We compared both experiences with a focus on smoothness and the overall time consumption.

compare.ai.jpg
 

Interview and synthesize findings

After observation, we interviewed the users specifically about EMUI Onboarding experience. We aimed to understand their perceptions to setup content, wording tone, visual representations, information architecture, logic flows, time consumption, achievement of their goals, satisfaction and their impressions of EMUI. We found it very helpful to send out pre-interview guidelines to our interviewees before the interview and ask questions without a solution in it. Then we collected all the meaningful insights that were grouped based on OOBE steps.

 

Problems & Opportunities

After deeply researched users' thoughts on onboarding, we found that these problems specifically bother users:

Screen redundancy (seeing repetitive screens); confusing user flow logic (seeing unexpected screens); inconsistent information architecture; misleading wording and long text; and unclear impression to Huawei phone.

Our redesign will fix those problems as a fundamental step toward improving the experience.

 

Ideation

Affinity Diagramming

We put the insights onto the affinity wall and started the ideation with 2 rounds of brainstorming. Every one generated ideas that addressed users' pain points reflected in the previous insights. 

Feature Prioritization

We picked some tangible approaches among solutions we proposed in affinity diagramming and evaluated them based on their impact (y-axis) and how much they meet user expectation (x-axis). So we know what features on each step we wanted to offer before we moved to the actual design.

 

Screen Layout

 

Design Highlights

1. Improving user flow logic & efficiency

User flow is one of the biggest problems we found through user research. We spent a few weeks to tweak the flow to provide an intuitive connection between each screen. We grouped the flow problems into three categories: screens that didn't eliminate redundant choices for users; screens that appeared too early to be in Setup process; and screens with low importance or even being bothersome were in high priority level.

Changes we made on the current whole onboarding flow

Screen Shot 2018-10-13 at 3.36.38 PM.png

Focusing on "Data Transfer" approach

Beyond that, we focused on defining the best data transfer approach. There were different methods being offered to transfer data, such as Google Cloud, Phone Clone app and NFC. They all have different benefits. We worked with engineers on this part and prioritized one way for each device type. We decided to prioritize: Google cloud backup for Android users, Phone Clone app for previous iOS users. 

 

2. Clarify screen relationship & indicate updated status

The current screens are not really responsive in terms of new status a user has been set up, so it's confusing to users whether they did enter things correctly. We decided to have responsive headers for all the primary screens and secondary screens. Headers on the secondary screens also indicate which specific sections they are at.

Screen Shot 2018-10-15 at 12.23.59 PM.png

 

3. Exploring Data Transfer visual representation

Since a user from different phone type gets different options, it's important to help them choose the right one and understand how it works. I explored a few representations of them and different user-interface interactions to help the user understand each option and find what they need quickly.

Exploration for representation of Data Transfer

dataTransfer-variation.gif

I went with the last one because it only has one command once, which decreased a user's cognitive load. Users stated that they prefer to get to the right option without worrying about how it works. It has the least visual clutter and effectively leads user to the transfer option works best for their cases.

Animated Instruction

Many new users struggled with this step, because this page only shows a QR code and some heavy text now. They were unfamiliar with QR codes, which Huawei uses for creating a network connection between the old and new devices. Our goal was to show not tell the new users on how to transfer data.

clone-animation---2.gif

 

4. Creating a new interface that easily transits contents

After printed and hanged all the screens on the wall, we realized there were many screens for Fingerprint. Although user will only focus on one field each time, we still thought user doesn't need to go through four-page transitions. 

 A general approach of screen transitions when confirm passcode

A general approach of screen transitions when confirm passcode

We are inspired by how chatbot conversational flow loads contents without transit to another page, so user always has a context of previous content. We made password input, password confirmation and the short note on the same screen, just like how you fill out forms on web. So four screens became one. If we had more time, I would test how user respond to each version. We went with the one-screen version because it still kept user's attention on only one field, and overall less transitions can make it clear how many main steps they go through during onboarding.

 The new approach that saves steps when confirm passcode

The new approach that saves steps when confirm passcode

 

User Testing & Iterations

We collected both quantitative and qualitative feedbacks. We tested the prototype on 6 mobile users. We observe their onboarding process, with a specific focus on: overall time use (average 5 min), setup completion rate (average 78%), and asked their satisfaction score (average 9 at a 0 to 10 scale) and any feedbacks. To measure the improvement we made, we also invited people who did the initial study with us.

The feedback we received include:

  • Big improvement on navigation, with clear indication and consistent gesture for going back and proceed;
  • No redundant screens;
  • The password input method with a conversational-like-flow is not necessary;
  • Our design was well received in general, we got 30% improvement on user satisfaction, 7% increase on setup completion rate, and 25% decrease on time spending.

     

    What i learned

    Research and testing need to be more contextualized

    We realized it can be quite different when setting up user's own phone, especially to decide if they want to transfer data to the new phone, from a testing scenario. Otherwise the result can be inaccurate when running in the market.

    Early engineering involvement is necessary

    We encountered problems when we iterate the data transfer flow. If we had involved engineering resources earlier, we can save our time to better develop the flow.