top of page

2015-2016

输入法logo+slogan.png

Baidu Input Method

Input Method.png

Interaction Redesign

BG.png
panels.png

before redesign

after redesign

My Role

Project Owner

Lead UX design 

User Research

Type

Interaction Redesign

2015.7 - 2015.11

Baidu Input Method is a tool that helps users including white-collars, students to type words, send emoticons, record voice, to express what they think and feel. It is a Chinese popular mobile APP, ranking Top 3, with over 600 million users and over 100 million DAU in 2015.

 

It has grown very big over the 7-year lifespan at that time, so the original design seems outdated and cumbersome. If we add more features into it with the original structure, the user experience will be horrible. 

 

In 2015, I led an interactive redesign of Baidu Input method to solve its problem and tried to give it long vitality. You can download it from App Store

01 Problems & Challenges

P&C.png

Reduce Cumbersome

  • An increasing amount of features, decreases discoverability and extensibility

Find Balance & Clarify Values

  • How might we avoid the risk of annoying users with new designs as Input Method is a high user-habit-related product?

  • How might we balance user habits and experience?

  • What specific value can we bring to the product with a redesign?

02 Process

I used half a year to make a big and uncertain design project smaller and focused, finally worked out design solutions, and validated it. I led my small team with other 2 interaction designers to conduct the user survey, data analysis, competitive analysis. Then I utilized the research insights to specific design objectives and principles. We, three interaction designers, owned 3 topics, and I directed the whole project.

Process.png

03 Research & Insights

To avoid boiling the ocean at the beginning, I need to get a clear answer to the scope and specific topics for design and sync them with the product team ASAP. So I started with a series of lightweight design research. Here are the ways.

1. Understand users' knowledge by a quick survey distributed within the company

Research.png

100+ Answers in 3 Days

A survey regarding the users' knowledge of features, structure, and onboarding experience made by me with another user researcher was sent to some Baidu employees to get results in a short time on purpose. Over 100 valid answers in 3 days helped a lot to unveil how users actually feel like our product. 

2. Competitive analysis

Research.png

​To correspond to the survey, my competitive analysis focused on similar topics as well:

  • Product framework, especially menu/setting

  • Input panels layouts and flows

  • Core & new features

3. Data analysis for user behaviors

Research.png

This data review was mainly focused on "taping" data of Logo Menu indicating users' daily behaviors, which was utilized with design to explain why and how.

Main Findings

1. User has the need of adjusting input method settings. But needed settings are in-discoverable, which results in low "taping" data. It’s mainly caused by the information architecture and framework design of Tool Bar and Logo Menu.

 

2. A lot of features are hard to understand by reading the label. Some are similar to confuse users as well.

 

3. Typing experience with Baidu Input Method in the different platforms is different. It’s not smooth to transfer from one system to another in typing. 

 

4. Experience of switching in and out of some keyboard panels is different, which results in some failures.

 

5. Different users have different habits, especially for typing tools. They have the potential needs to customize their keyboard.

04 Objectives

1. Update the framework of Logo Menu and Tool Bar

  • Increase the necessary usage of different settings 

  • Fulfill people’s requirement of personality

  • Consider future extensibility

2. Optimize the framework of Input Panels and Feature Panels smartly 

  • Make core experience in Android & iOS consistent to ensure people have similar experiences when they change a phone with the other system 

  • Make feature panels simple as much as possible

3. Redesign different onboarding screens of features 

  • Avoid using introductory pages if it is unnecessary

  • Ensure people understand new features quickly with introductory pages by making them efficient with specific meanings

05 Design Solutions

I’ll show you design details from “Update framework of Logo Menu and Tool Bar”.

 

I started by thinking of the relationship of Tool Bar, Logo Menu, and Settings List, which are all about input settings. In the old version, Tool Bar, Menu, and Settings are independent but also partially overlapped. I gave a new clear definition of the relationship between the three parts, which is like a triangle.

solution.png

I redesigned the information architecture of All Settings. In order to let users be able to find settings, I sorted the settings into three parts, by thinking of types of users and types of settings. 

Drafts of Logo Menu & Tool Bar

I drafted several designs for the Logo Menu & Tool Bar. Then I evaluated them and found that every design can solve part of the problems I mentioned before, but also made some new problems like change too much or not directly. 

Crafts.png

But the good part was I found the design direction by sharing the drafts with PMs and communicating my design thoughts. They preferred users can DIY the toolbar easily and learned the menu as simple as possible. I also found a mistake I made, which was thinking too logically and focused on sorting the settings. Then I optimized my design solution again and worked it out.

Reduce the Hierarchy of Menu and Let it Flow

Design.png

  • Users are not able to know what features or settings are in each Menu Tab.

  • Tool Bar and Logo Menu are independent.

  • Features in Tool Bar may not be used frequently.

  • Future features may be added to the 3rd screen which needs a lot of swipes.

Design Content of Logo Menu

Design.png

From 26 to 18 items

Wireframes

Wireframes.png

Interactive Prototype Shows More Details & Test Users 

prototypes.png

  • Thought every motion in the process

  • Chose a proper tool pixate to make sure every motion operated

  • Recorded the vedio of dynamic prototype to show to PMs & RDs

  • Organized users test with the prototype

Optimize Initial Design Concepts

​In the prototype test, we found some users didn't notice the grey rectangle on the top of tool bar, so they didn't manage it successfully. Why did it happen differently from my initial plan?

iteration-frame.png

  • Tap is simpler than press and drag.

  • The habit established of System may be not proper to transfer to the specific APP, because it is not a natural way for users.

​Create Two Modes for Specific Users

Furthermore, in consideration of improving users' convenience, I designed two default modes of Logo Menu and Tool Bar for two types of our audience, the business users and students users. 

We call the two modes Classical and Two Dimension Mode. Two Dimension is a word in China we use to describe the young people who enjoy animation and pop culture.

1.长页包装—经典模式.jpg

​经典

Classical

​二次元

Two

Dimension

classical-1.png

CLASSICAL MODE

TWO DIMENSION MODE

Onboarding

Logo Menu

Edit Logo Menu

Introduction

Onboarding

Logo Menu

Introduction

Edit Logo Menu

UX : Me

UI : Chenqqiang / Lihua 

Other Relevant Designs

According to two the new wireframe of Logo Menu and Tool Bar, I also did some other interaction design of relevant parts, including the specific function pages, consistency of going in and out of some functions, etc. To make the user experience of the whole input method seamless.

06 Results Evaluation

When the new version of the design was launched, I estimated the design results by reviewing two types of data.

The increase of click data of the new Logo Menu showed that users customized their input method more, which was our expectation.

Besides, we also reviewed users' feedback and uninstalled data to make sure that users wouldn't hate the new experience.

The result was mostly as good as we thought before. We also kept iterating after the review.

1. Click data in new Logo Menu has increased

evaluation.png

2. Review users feedback and uninstalled data at the same time

evaluation.png

07 Reflection

To be honest, it was the first time that I led the other two designers to do such a long-term redesign project driven by designers.

I learned a few things on both how to lead a design project and how to design better.

1. Don't be too logical to forget thinking like a normal user. - it was the first mistake when I designed the structure of the Logo Menu and Tool Bar, but realized as soon as possible.

2. Specific task test with a dynamic prototype is a good way to get users real feedback before launching the product, which can help iterate quickly.

3. The keys to lead other designers cooperation include:

a. Plan clearly about what I aim for and what I need

b. Divide big projects into some small and specific parts, to inform them to other designers clearly

c. Make something interesting, like using new methods or tools make the design better

d. Make the principle or keywords of design clear before and during designs, to determine a design whether proper or not

​

​

bottom of page