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
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.
The Final Design: V 3.0
Design Language System
1. The Color System
Approaches:
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 ReliableWe 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.
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.
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 >