top of page

2013.05 - 2013.12

MODERNIZING A CHINA’S 
HIGHLY-RANKED WEB BROWSER

Old Version

WechatIMG1059 1.png

New Version

sidebar - default 6.png

CONTEXT

SOGOU WEB EXPLORER RANKED IN TOP 5 IN CHINESE MARKET

Sogou Inc. ranks as having the fourth-largest user base in China’s high-tech industry. 

Sogou Explorer was one of the three main products of Sogou Inc in 2013. It was first launched in December 2008. From 2008 to 2013, the team was mainly focusing on tech investment.

In 2012, a designer of another product supported to have designed a new default skin in V4.0, which didn’t get buy-in from users. The team felt it was necessary to work with a designer closely and to upgrade the user experience.
This case study only contains open data.
4 11.png
Sogou Explorer V1.0, 2008
WechatIMG1057 1.png
Sogou Explorer V4.0, 2013

MY ROLE

THE DESIGNER LED THE PROJECT E2E

I was the UX lead of Sogou Explorer (Mobile) from 2012 and was responsible for the design of Sogou Input Tool (iOS).

In May 2013 I began to work with the Sogou Explorer (Desktop) team since they requested design resources for the UX upgrade.

I became the UX lead of Sogou Explorer (Desktop & Mobile) in 2013 after the successful UX upgrading of Sogou Explorer (Desktop) V5.0.

In this project, my roles were:
  • Defined the UX strategy with the management team

  • Designed the IA, interactions, UI style, motion effects, etc.

  • Led 2 UX designers to design a few features by the end of this project

  • Implemented the designs with engineers

  • Conducted the usability test with the user researcher and iterated designs

  • Led 1 UX designer to compose UX guidelines after the launch of V5.0

Group 92.png
Stakeholder Map

PROBLEM

SOGOU EXPLORER CHALLENGED USERS’ COGNITIVE LOAD

Sogou Explorer challenged users’ cognitive load:
 
  • The redundant information and elements
  • The unclear concepts and irrational IA
  • The out-of-data mental models
  • Advanced features stacked on the initial interface

UX STRATEGY

SHIFTING OUR FOCUS TO NOVICE USERS INSTEAD OF EXPERTS

The team was over indexing on expert user feedback and ignoring novice users.

There was a Sogou Explorer Online Forum, where high-end users complained about their pain points. Our engineers then worked to solve the problems. But, the high-end users comprised only a small portion of all users, and their needs were different to novices.

At the end, I defined the core users and design strategy with the Sogou Explorer’s team.
  • Core audience: Highly-educated young adults and novice users.

  • Empower tech-savvy individuals with all the system capabilities.

Tech-Savvy Users

Novice Users

Highly-Educated Young Adults

Group 69.png
Group 70.png
Group 71.png

“How might we make the browser appeal to everyone, instead of just expert users?”

SCOPE & CONSTRAINTS

NARROWING DOWN THE SCOPE

Constraints

7 months, nearly only one designer

Scope

Sogou Explorer team told me: The only constraint was that the design wouldn’t need new system capabilities. But with the tight timeline, I limited the scope to:

Initial Interface

IA, layout, visual style, motion effects: everything was in scope.

Key Components & Features

For key components & features, IA, interactive experience, and visual style, everything was in scope.

Skins&Themes

The new design must support the customized skins&themes.

Other Components & Features

Consistent on the visual level; other aspects would be iterated after V5.0.

SOLUTIONS

01 / Simplifying the interface
02 / Key features & new features
03 / Fresh the UI

SOLUTION 01

SIMPLIFYING THE INTERFACE

image 254.png

Step 01 - Redefined IA & Aligned With The Team

I had many conversations with the Sogou Explorer team and conducted a card sorting session to have the new IA. We defined 8 main modules on the initial interface.
Restructured Layout of the Initial Interface
Group 108.png
image 113.png
Card Sorting with the Sogou Explorer Team and Designers

Step 02 - Validating Mental Models

Card sorting research to understand the mental models of our core audience, highly-educated young adults.
image 116.png
One Card Sorting by a User, Anhe Guo Conducted the Research
I led the designers to conduct a competitive research to understand the novice users’ existing mental models.
Part of the Competitor Research Report, Hongzhen Qu Also Contributed to This Research 

After synthesizing all the insights and defining the new UI style, I designed the new initial interface.

sidebar - default 2.png

Step 03 - Evaluating the New Designs & Iterations

A user researcher helped conduct a qualitative usability research to verify the new design was easy-to-use for most users. We recruited 12 users who represented 3 core personas.
image 126.png
Usability Test & Interview (Objectives & Tasks)
Group 124.png
Part of the Usability Test Report by Anhe Guo

Finding 01

Homepage - A Familiar Design Accepted by Users

Old Version

Moved the homepage icon on the tab bar.

New Design

3/4 participants easily found the homepage icon, 2 of them thought the icon could be larger and more easily clickable.

Feedback:

Iteration:

We monitored data after the release: the click rate of the new homepage icon didn’t drop.
We enlarged the icon by 1 more pixel, and the click rate was increased by 2%.

before & after.png
New Design                        Iteration of New Design

Finding 02

Extensions - The Unfamiliar Icon Affected Usability

Group 111.png
Old Version
sidebar - default 5.png

Packed the extensions into an icon as the entrance.

We split the “Tools” to 2 concepts:
“Basic Tools” and “Extensions.”

New Design

7/8 participants couldn’t find the new Extensions icon.

Feedback:

Iteration:

We reserved the new concept of “extension” and the new icon.
Adopted the previous location and exposed extensions by default.

The new design was included in the customized layout, high-end users could use it on their own.

image 229.png
Iteration - New Name & Icon in the Previous Location
sidebar - default 2.png
Iteration - Extensions in the Customized Layout

Step 04 - Retaining Existing Users, Empowering Expert Users

At first, the initial interface was mainly designed for young adults and novice users. Based on that, we also considered the existing users’ and the expert users’ experiences.
 
  • For existing users, we inherited the layout if a user had customized it.
  • For expert users, we upgraded the customization layout feature to empower them.
Customizing Layouts, New Version

Takeaways

  • A totally new design that changes the icon, the concept, the location, and the IA of an element all at one time will challenge users’ cognitive ability. They have to relearn the new design. The new design should be introduced sparingly. The redesign of “Extensions” is an example that the design strayed too far away from the users’ existing mental model.
     
  • A new design that iterated part of the old design while reserving most attributes is more easily accepted by users, e.g. moving a learned icon to a new rational location doesn’t increase difficulties for users.
     
  • Confirming existing users’ mental models and inheriting the customized layout gave control to users.

SOLUTION 02

KEY FEATURES & NEW FEATURES

The key features and new features were designed or redesigned for 4 purposes:
 
  • Improving the usability of crucial features for Chinese users
  • Lowering the learning curves for novice users
  • Building the first-mile experience for new users
  • And, designing new features supporting the product strategy

Improving the Usability of Tabs, A Particularly Important Feature to Chinese Users

Most hyperlinks on China’s websites are opened in a new tab, so users often browse with numerous tabs. This resulted in major friction, e.g. they couldn’t find a site easily.

First, taking a common practice to make it a usable experience.
WechatIMG1028 1.png
Old Version
swich_tabs 1.png
New Version
Second, I designed an exceptional experience ahead of our competitors.

In 2013, even the leading browser Chrome had usability problems when opened too many tabs, and so were our other main competitors. I made the tabs easy-to-use in many cases and created an enjoyable experience.
scroll_to_switch_tabs copy.gif
New Design, Scroll to Browse
New Design, Closing Tabs in a Row

Simplifying the UI for Novice Users

I created a more intuitive UI to help novice users 1) easy to understand; 2) easy to find; 3) and easy to learn.
Below are two examples showcase the improvements.
New Design, Menu

Changed terms to be more easily understood.


Added well-known icons to help users easily find the actions.

Grouped advanced actions in “developers’ tools” for high-end users.

Old Version, Menu
New Design, Page Amplifier

To use without thinking.

Old Version, Page Amplifier

Building the First-Mile Experience & the Brand Image

Installation_compressed copy.gif
Installation
The designers brainstormed how to make a seamless experience between the installation process and the opening of the browser.

Finally, we came up with the idea of using the rocket to connect the two processes, which is a known icon representing the speedy Sogou Explorer. Jie Yan made the final UI design.
features_compressed.gif
Features' Page
I came up with the idea of creating animation and drew the scripts. Three designers, Lan Kong, Huan Li, and Bing Tang, created the final animation.

Features Supporting the Multi-Device Strategy and the Speedy Concept

image 217.png
image 216.png
image 218.png
accelerator copy 1.png
avatar_sync_2014_16_1.gif
Pre-Fetch Engine
Updating - Success
Unlogged In
Default Avatar
Smurf Avatar
Avatar
Pre-Fetch Engine, Designed by Jie Yan
The design of each feature was another story. To be concise, I wouldn’t tell these stories here, neither to show case other features designed in V5.0 here.

SOLUTION 03

REFRESH THE UI

Defined the UI Position, Analyzed the Visual Style Elements

In 2013, Google was forming its Material Design system, the flat iOS 7 was released not long after, and Windows 8 created a new Modern UI in 2012.

Taking into account the key concepts of Sogou Explorer with the design trend in the industry, I worked with my design fellows to define the visual position, which was:
visual position analysis.png
Sogou Explorer Visual Position Analysis

Flatter, but not flat; 
Colorful as always.

Created the New UI Style

My design fellows and I ideated the possible styles and layouts.
image 78.png
image 253.png
image 153.png
Part of the Ideations of Visual Design by Qi Feng, Ling Zhan, Xingjun Li, and I
These ideations helped us think outside the box and form creative ideas for the new design. I then created the new UI after trying many explorations.
Group 116.png
Part of the Visual Design Explorations by Me

Made the Default Skin Compatible to Most Themes

WechatIMG1049 1.png
WechatIMG1050 1.png
New Version, the Default Skin with Themes
To make most themes compatible with the default skin, I adapted the default bluish skin for dark themes and light themes. See an example of the homepage icon here.
Group 117.png
Default Skin, No Theme
Group 118.png
Default Skin, Light Theme
Group 119.png
Default Skin, Dark Theme

AFTER THE RELEASE OF V5.0

UI Guidelines

Part of the UI Guidelines, Composed by Lan Kong and I

Group 125.png

Skin Editing Tool

A heuristic tool was patented

image 222.png

IMPACT

User Feedback

“Fresh & clean”       “I like the round avatar.”

“I like having more space for bookmarks when the extensions are packed.”

“I like the adding bookmark feature in the address box.”

Sogou Revenue

Group 87.png

Reward & Promotion

Employee of the Year Award (2013)

UX Lead of Sogou Explorer (All Platforms)

image 242.png

The Sogou Explorer team loved the new design, we drew the interface on the birthday cake!

image 241.png

Sogou Explorer UX Design team

REFLECTIONS

WHAT I LEARNED

Systems Thinking

The most valuable thing I learned through this project was Systems Thinking.
 
  1. This project required me to define the UX strategy based on the understanding of the business, the product & the marketing strategy, and the diverse groups of users.
  2. A browser serves different purposes in numerous scenarios. I had to think of the interrelationship with other elements holistically before rearranging every element.
  3. Sogou Explorer supports customized layouts and opens the skins/themes editing access to the public. Thus, I designed the default layout while considering other layouts and I defined the default skin while assuring it would work well with themes.

Building a Rapport With a New Non-UX-Experienced Team

Sogou Explorer team had little experience in working with UX designers. At the beginning, when the team requested “a completely new design,” they mainly thought about a new “fabulous” skin. Thus, I got push-back when I tried to reorganize the IA.

I felt difficulty to convince the team. And it took us more than one month to reach mutual understanding and start building a rapport.

Thank you for reading!

23.png
bottom of page