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.

Workflow

DesignProcess

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:

Research

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

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.

moodboard

Here is the test result of 103 images:

moodboard

Color pattern and visual guidelines from mood board tests:

moodboard3

Brainstorming – Visual metaphor

Eisenhower Matrix – Sorting of color-coded notification system

The Final Design: V 3.0

The-final-design
The-final-design2

Structure and Transition Design

Defining Visual Language

1. 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.

cards

2. Convey a feeling of reliable by using golden ratio structure to organize contents and to emphasize the most important operation bar.
3. 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.

4. Improve efficiency by keeping consistent on the style and layer structure for secondary pages.
   Users can clearly understand and quickly respond to the given content.

visual-detail3

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.

icons

GUI Assets

assets

Style and Layout 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.

guideline

Below are some excerpt from these specs.

guideline2014
guideline2014
guideline2014
guideline2014
guideline2014

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:

sketch
sketch3

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.

messages

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%.

mini-guard-verisons

Final Visual Design

mini-guard

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.

animation
floating message

Holiday Themes

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

holiday-themed

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
ideation

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.

Montage-of-Transition-Animation
montage
installationimage

User Engagement Metrics/Analytics

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

Data

User Feedbacks – We love it!

Listen to the users’ feelings about this design

feedbacks

Team Award

Best Team in development and innovation

Team-Awards

< Home     |     More UX/UI Projects >