AI Summary
Making news easier to digest with AI
Year
2024
Role
Senior Product Designer
Background
At Yahoo News, users often engage with long-form content—but through ongoing research and NPS feedback, we discovered that many were dropping off before finishing full articles. This was reflected not just in engagement metrics, but also in user feedback and NPS (Net Promoter Score) scores.
My role
1 Lead designer (me) 1 Art Director 1 Lead product manager 2 Engineering leads (One handle user facing side, one handle feedback mechanism) 1 Content designer 1 Business Analyst
The outcome
We did user testing and the result was promising, we found that 15 out of 20 users found it useful and 18 out of 20 users felt the feature made the topic easy to learn. The AI-powered summary feature helped users quickly grasp key points without needing to scroll through the entire article. It also gave them more flexibility—whether they were scanning headlines on the go or diving deeper later. User feedback was overwhelmingly positive, and engagement metrics showed promising increases in time-on-page and return visits.
Design opportunity and quick win
One of the top initiatives for Yahoo News is to increase users satisfaction and NPR scores. From previous design-led brainstorming sessions, the idea of building a shorter version of article or summary feature always came up but it always got pushed back due to lack of human resources. The team then identified a compelling opportunity to introduce AI-powered summaries—a feature that could use generative AI to surface the most important takeaways on articles. This would allow users to quickly scan the content and decide whether to read further. Being an early adopter of AI at that time, our team successfully navigated through a lot of ambiguity and was able to build and ship the feature in a timely manner.
The process
Drafting user flow and wireframe
We want to create a simple user flow to communicate to the rest of the stakeholders across the company. For initial discussion, we want to make sure everyone is on the same page and not detracting from any visuals, therefore we feel that user flow works for that.
Early design exploration and discussion on the logic
At the same time, we also start exploring the look and feel for the feature and start defining the logic, exploring interaction pattern, icons, copywriting and legal requirements. In this phase, we pull cross functional teams to weigh in and discuss.
Visual explorations that includes copy, icons, and UI pattern
Polishing design and user testing
The team finally decided to test two versions of the features; collapsible and non collapsible.
At the time, we didn’t want the feature to be too prominent due to the novelty of AI being inaccurate.
[FIG3] Testing 2 different interaction pattern; non collapsible vs collapsible
We launched it!
The team launched the first AI powered user facing feature on Yahoo! I personally find this feature to be useful and resonate a lot with me. Seeing this shipped was delightful because this is a design-led project and even though in the past there’s some pushback on the exploration level due to business objective on the revenue side, the team was finally able to push through with support of the product and user research team.
Shipped design for desktop and mobile web
Learnings and reflection
As I looked back the project has made me realized a couple things as a designer. Design can be powerful and make an impact through product/eng collaboration. A few things to keep in mind:
It is important to keep innovating and have a design goodness list
Work with your product and user research partner to brainstorm and testing concepts
Validate and test early and often. Have user feedback ready to discuss with product team