Loading... Loading...

banner of baidu guard

Baidu Guard – Desktop App UI

Project Time: 2013-2015      Role:  UI Design Leader      Project Goal: The goal was to create new and improved visual language and user experience.

Baidu Guard is a PC software which provides solutions for PC security and utility.

This is the first project I led independently at Baidu, which is the biggest technology company in China (Wikipedia). With 4 visual designers on my team, we did user research, concept design, assets guideline, and collaborated with two UX designers and a development team. I was responsible for Baidu Guard UI iterations, from version 2.0 to 7.0. Version 3.0 was the most popular version with innovative design language and reached over 200 million users.

During my time as lead UI Designer on the Baidu Guard project, I was presented with many challenges that ranged from user testing, analytics to hitting tight deadlines.



User Research

Sources of User Data of Old Version:

– Click traffic analytics
– User surveys
– Usability test
– Social feedback

The Problems:

– DAU (Daily Active Users) was low
– Hard to use, hard to understand
– Poor performing links on homepage caused noneffective for business goal
– Outdated UI

User pain points on the home screen:


Design Solution


Creating a Better Visual Architecture

I explored several layouts in order to meet the functional requirements. As shown below, on the right image, I discovered through user research that the optimize button yielded the highest click-through rates when positioning directly in the middle. In the meanwhile, all the pieces of information on the interface will be well connected to this core button.

home screen layouts

The Final Design: V 3.0


Design Language System


1. The Color System


I. Brainstorming  Visual metaphor

II. Eisenhower Matrix  Sorting of color-coded notification system

III.  User Testing  Mood Board

We identified these keywords that truly communicate the Baidu Guard message:
Intelligent       Simple / Pure      Efficient      Unique      Reliable
We then paired these keywords with images and tested them on 90 users.


Here is the test result of 103 images:


Color pattern and visual guidelines from mood board tests:


2. Visual and Interaction

Usability Approaches:

I. Visibility of System Status

Communication of complex information needs to be simple and clear.   
I used this card-based design to gather various pieces of information to form one coherent piece of content flow and choose super big font size to highlight the status.


II. Aesthetic and Minimalist Design

Convey a feeling of reliable by using golden ratio structure to organize contents and to emphasize the most important operation bar.

Present the aesthetic of light and pure by putting semitransparent layers on top of colorful wallpapers. Those layers also provide functions that divide the interface into three functional areas.

III. Consistency and Efficiency

Improve efficiency by keeping consistent on the style and layer structure for secondary pages. Consistency results in efficiency and perceived intuitiveness.


3. Motion of Transition

4. ICON System

To convey the feeling that this product is like a strong and powerful bodyguard protecting the computer, I chose sharp corners and medium lines weight (2px stroke) to signify trust and reliable.


5. GUI Assets


6. Guidelines

By providing pixel perfect, high fidelity guidelines for the developers, I was able to reduce developer confusion and improve communication between my design team and the development team.


Below are some excerpt from these specs.


About Mini Guard

Mini Guard is a mini version of Baidu Guard, which is a PC desktop floating monitor.  The two core functions are designed to improve speed performance and monitor internet speed. By providing a floating monitor, an interactive icon on the desktop, my team was able to improve user engagement and awareness.

1. Interactive Icon and Popup Messages

Design Challenges

1. Adhering to Baidu Guard’s legacy design guidelines while introducing modern visual design systems to improve retention.
2. Widget popup messages should be smooth and elegant without interruption.
3. New ways of presenting complex information within limited interfaces.

Design Strategies

1. Always begins with sketches:


2. UI Pattern:

I chose a big font size to highlight the most important information and small font size as supplementary instruction.
Thus the visual hierarchy helped users to get a sense of interest while quick scanning.


3. Animation:

I designed the “fly message”, which is lightweight, polite and graceful.

2. Secondary Interfaces

Design Challenges

At this point, UX designer and I had different opinions. I created a unique style with a better visual consistency that differs from competitor’s.
The result was the final design reduced abandonment by 12% and increased the activation rate by 13%.


Final Visual Design


Animation Design

I designed the water wave animation for acceleration. As a metaphor, the whole interface is a container, which stands for systems memory storage. The water level represents the occupied storage and the red/green color reflects the bad/good condition.
As shown on the right gif image, for branding visual consistency and in order to make it clear of what’s going on, I designed these information cards to show the flow of tasks.

floating message

Holiday Themes

As a proof of concept, when designing this content structure, the thematic versatilities had also been taken into consideration.


Installation Progress

The core concept of Baidu Guard 2.0 is “freedom“.
I led multiple brainstorming workshops to identify what type of storytelling would attract a user to install the software and how to improve the installation user experience.

install idea

The final solution was that we used montage to make the transition from product logo to the following contents. Then designed four individual slides to loop during the installation.


User Engagement Metrics/Analytics

Users were more willing to click on the primary functions to keep the computer in a healthy condition.


User Feedbacks – We love it!

Listen to the users’ feelings about this design


Team Award

Best Team in development and innovation


< Home     |     More UX/UI Projects >