My redesign of TopBuzz
My redesign of TopBuzz

Some months ago I was the first foreign hire at the Beijing office of a company called Toutiao 今日头条, or “daily headlines” in Chinese. Needless to say, navigating an environment with a Mandarin working language and a hybrid Google-esque/Chinese corporate work environment was a challenge in its own right. For a company who is best known for building the most successful news aggregation app in China (with 70 million+ daily active users), I was brought on to help build an international version palatable to users in the US, Japan and Brazil, their first market entries. They called this app TopBuzz.

In this case study, I will discuss how and and why I made design decisions in my work on TopBuzz in the following sections (click to skip to a section):

Finding my role

Many challenges emerged from the start: How could I motivate myself to improve a product that I am not a target user of? How could I become useful on the product team beyond the role of a cultural consultant? Given the disconnect in language and culture, the team’s leaders lacked a clear reference point for what I might be able to contribute. I saw in my role as a semi-outsider an opportunity to present a vision for the improvement of the app’s user interface and experience. I took the opportunity and spent two weeks iterating on what would become a complete redesign of TopBuzz.

The old version of TopBuzz
The original UI/UX of TopBuzz Instant View

Solving the small problems first

Our workflow in the product team was fairly simple: I would arrive and the team would be working on a particular problem flavor of the day (DAUs down, view bugs, etc.), and so my supervisor would ask me to design a solution related to that problem. The first of such problems was Instant View, the team’s solution to including content in-app from outside publishers without infringing on copyright. User data and feedback indicated that many users didn’t understand that they must click “Instant View” in order to go from their feed reader to the article. I had to solve the problem of an unconventional interface while still adhering to the product’s original design. I quickly sketched out three solutions, with varying degrees of similarity to the original design. This would be my litmus test to see how much of an appetite my team had for radical departures from their current design thinking.

Sketched solutions for Instant View
Sketches of potential solutions to Instant View

The next small problem was to design a more delightful load screen to replace the app’s old one. At the time, I was still learning interactive prototyping tools like Facebook Origami and Framer, so what I came up with inevitably took the form of a static sketch. Nonetheless, the ideas were well received. Only I was critical of my own work, making a mental note to improve my rapid prototyping abilities as soon as possible.

The old version
The old version
The new version
The new version!

Redesign it all

Somewhere along the line I started to realize that in order to solve the dozens of small problems in a manner that was cohesive with the overall design structure of the app, it might be better approached as a holistic version redesign rather than problem by problem. I spread out the UI/UX problems before me:

  1. Local News - a better way for users to find and switch between locations for their local news.
  2. Video Viewer - a more beautiful and less cluttered way to view videos separate from text articles.
  3. Explore - a new way for users to find and “follow” the news sources that they were interested in.

With each major feature, I kept mindful of the company’s goals to attract more young people to its user base and the related user feedback it collected, conducted extensive research of design approaches by other major US news/video apps, and framed each implementation within the constraints of our already functional application.

Feature - Local News

While most major news aggregators both in the states and in China focus on only the major national publishers and niche hobbyist material, Toutiao wanted to be the first to successfully implement a feature to view news at the local level. It was an exciting feature, but it would need careful design to keep the experience from becoming distracting. I felt that given location services were enabled for the app, we might be able to utilize this knowledge and streamline the process of selecting a location. Perhaps our user lives in San Francisco, but often travels to see friends in Portland and family in Los Angeles and Austin. Pop open the app on a day trip to Portland, and TopBuzz should know you might want to read local news about Portland and suggest it to you visually. I set out to test this hypothesis.

Old Local News
Old local news
New Local News
New local news!

Feature - Video Viewer

Video was and is the direction all the content aggregation apps want to move in, and Toutiao was no different. Video is more lucrative - it keeps your users’ eyes glued to the screen longer and doesn’t take much effort to watch continuously, unlike text-based content. Making video a priority increases the amount of time your users spend in app, and increases the price advertisers pay to get content on your network. In order to make this transition successfully, our team would have to differentiate itself significantly enough from other competitors in the US while also making use of the best practices pioneered by the likes of Facebook, Youtube, Instagram and Vimeo. My goal was to make the experience of watching video in TopBuzz frictionless and delightful. To do this, we had to search for the fine balance of calm that is needed to successfully serve text articles and video in the same app. I conducted market research of the most popular and interesting implementations of this in the US, including Youtube, Facebook, Pinterest, Vevo, Vimeo, Hyper, Instagram and Twitter, and found three major trends:

Video Map

Applying what I learned from the research, I contextualized the state of TopBuzz’s current video experience and developed a new approach.

The old TopBuzz Video
The old TopBuzz Video
The new TopBuzz Video
The new TopBuzz Video!

Feature - Explore

Finally, we had to re-conceptualize how users explored new content and followed it. Contrary to expectations, this issue turned out to be a tricky question of how to balance a user’s preferences at on boarding with methods later to either positively or negatively affect the underlying algorithm that curates the newsfeed. Another market study revealed that like video, there is no consensus on what is the best approach in any particular context. Much like other experiences I’ve had applying Google’s Material Design, best practices don’t apply in every situation. Every app is fundamentally different. New feature designs become validated only when they fit the context of the app they exist in. As it turned out in the end, rebuilding the best explore feature meant also redesigning other key features within the app.

Video Map
The old TopBuzz Explore
The old TopBuzz Explore
The new TopBuzz Explore
The new TopBuzz Explore!

Putting it all together

The new TopBuzz Explore The new TopBuzz Explore The new TopBuzz Explore The new TopBuzz Explore The new TopBuzz Explore The new TopBuzz Explore The new TopBuzz Explore The new TopBuzz Explore The new TopBuzz Explore The new TopBuzz Explore

Redesigning an app created by a Chinese company to be used in the United States was certainly an interesting way to gain my first institutional product design experience at a tech company. Feeling out this process as an outsider working from within, I found that my style of showing, rather than telling, was able to transcend the limitations of language and culture in our team. By taking risks and reaching beyond what was expected of me as a localizer of their app, I gained far more experience and grew much more in my role as a product designer than I would have otherwise.

But perhaps above all, the most significant takeaway came from what I struggled with most during the process: I was one of two people who do design on a floor of over one hundred people. Designers need numbers to have a net effect on product development. If I had had other peers to collaborate with, we might have been able to riff off each other’s ideas and dig into the other teams’ operations for a more holistic rethink of TopBuzz. This realization is indeed something I hope to encounter at the next company I work for - whether that be the one I found, or the exciting prospect of a company in Singapore.

/ Special thanks to Eileen for her unwavering support; and Suixin, Kelvin, Henry and Kat for an awesome work experience and many, many games of ping pong.