Top Stories

Role UX Lead
Company Google

The existing experience left much to be desired

Users come to Top Stories on Search in an effort to understand the important news of the day.

When I started this project, Top Stories triggered a one-size-fits-all layout, mixing articles across different news topics. This made it difficult for users to easily parse the stories and find the results that were interesting to them.

Screenshots of Top Stories prior to the redesign showing a jumble of articles in a fixed layout

Users struggled to grok the current news and easily explore related ideas

1. Users could not easily discern what was important.

Mixing articles from different topics fragmented our user experience.

Design, test, iterate

We knew that news users were looking for recent updates, often of news stories they already had in mind. (For instance, a user might type “taylor swift” but is really just interested in Swift’s relationship with Travis Kelce). Together with user researchers, I defined three key problems we could solve in design:

2. News headlines alone didn’t provide enough of an overview.

With no labeling or wayfinding in the UI, catching up on the news was laborious.

3. Users couldn’t get more news on topics they cared about.

Users didn’t have a way to dive deeper into topics of interest.

I created dozens of wireframes and mockups to nail the right design. I carved a space for separate topics as well as important pieces that didn’t fall into any singular topic. To help users see more articles, I explored expansion patterns like buttons, accordions, etc. This was the obvious choice for Search, since tap expansions were already patterns in the Search design framework.

However, those designs did not perform well when subjected to live experiments with users. I needed a novel solution, so presented a version where the user swiped to expand instead of tapped.

My research partners and I decided to try both designs in usability testing. The participants overwhelmingly favored swipe-to-expand over tap-to-expand, supporting the claim that swiping better facilitated a browsing experience.

I continued to iterate on the design, following a similar process for a number of open questions: the header style, the ideal pre-swipe preview of an article, and the animation pattern.

Soon, I had my launch candidate. The final design groups results into topics. Each topic sports a descriptive header, and one-off results are grouped in an “Also in the news” carousel at the bottom. When the user swipes, the carousel expands down, allowing for deeper exploration while keeping the user’s tap target steady. Tapping the “more news” button leads to News Mode.

Launch candidate for Multistory

Adoption into Search framework

Any new pattern in Search has to be approved by horizontal design framework teams. To gain approval for the swipe-to-expand card style for Multistory, I had to make a case for its merit and demonstrate how that pattern could be used by other teams. My efforts ultimately earned buy-in for the pattern to be adopted into the framework. Getting this pattern approved was especially notable given that many teams had tried and failed to find a performant version of swiping.

Later, I gained approval for the card style and header typography style—all new designs—to be adopted into the Search framework.

Tying it all together

After securing the launch candidate for Multistory, I finalized the rest of the MVP package, particularly after Katrina Tempero left the team in October two months prior to launch. This launch was challenging due to its metrics tradeoff, complex cross-product stakeholders, and tight deadlines. I brought the package to completion by aligning all of Top Stories’ user-facing layouts: four layouts on Search, three card styles, and three new cards supporting non-article results (for instance, opinion pieces). I also created the inaugural spec of the Top Stories design system.

Launch 🚀

The final package launched in December 2019 and immediately earned positive reactions internally and publicly. User research conducted post-launch showed that user impressions of the new UI tended to skew positive, with users describing the new UI as “informative,” “organized,” and “clear.”

This redesign set the baseline for the next 5+ years of Top Stories. All of our launches since have been built upon this framework.

Reflection

This was a challenging project given the number of stakeholders and cross-functional partners involved. I worked closely with my research partners to construct studies, assess designs, analyze findings, and build rationale to influence my engineering and product peers. I am grateful for the success I had—namely in championing the swiping pattern and advocating for label generation for ~100% of topics in the MVP launch.

Of course, there is always room to improve. While post-launch user research showed positive feedback, 30% of participants did note that the UI felt “overwhelming.” I sought to rectify this issue in later iterations.

Another challenge I experienced during the process was leaving features on the chopping block, such as original content results. Not everything can be included in an MVP (hence the name), and that’s okay.