LA Times: Quoteworthy

Making news-sharing simple

ROLE
Product Designer

TIME
June - August 2020

TEAM
LA Times Innovation Lab: Genesia Ting, Max Lu, Aaron Brezel, Grace Zhou, Bhaskar Ghosh Ruby Yuan, Selena Jiang

WHAT I DID 
User testing, Low- to High- Fidelity Prototyping

TOOLS USED
Figma

The TLDR

The news can be overwhelming, and deciding how to share it properly can add to that stress. Our team aimed to simplify news-sharing by creating a Chrome plugin that enables people to share quotes from news sites with proper context in an aesthetically-pleasing way through quote graphics.

USER RESEARCH

How do readers share news and consume shared news?

With user interviews, we aimed to gain insight into how users comprehend, understand, and learn from the news, as well as how they spread this by sharing articles. Key takeaways:

Many users discover news articles through Twitter, a few younger people through Reddit. The bottomline was that most people engaged with news via social media, particularly around infographics that could compress an incredibly nuanced issue into 4 square slides.

People who share news tend to share one-on-one through message apps, and they often have a specific point from the news article in mind that they want to discuss. This often takes the form of sending friends a screenshot of a certain paragraph, a “copy + pasted quote, or sending the entire link itself.

Some readers have strong feelings against biased news and care deeply about reading the “truth.” Since this worry was often not addressed on the news-provider side (which again, could be social media), there was a lot of effort put on these people to “fact-check”, cross-reference sources, and look for the “primary” source themselves.

USER TESTING

Simplifying & enhancing news-sharing

Given these insights, as well as constraints on our own timeline and technical capabilities, we settled on creating a Google Chrome extension that allows users to seamlessly create quote graphics while also integrating smoothly with readers’ existing news habits. This led a redesigned user experience shown below in a task flow:

USER TESTING

A need for clarity

Starting with a base design, we conducted 3 rounds of user testing, focusing on user preferences regarding the order of display options, color and template variations, and hidden buttons.

The Final Product

Create quote graphics in 3 simple steps

STEP 1: Highlight desired text on one of the 100+ websites compatible with our plugin.

STEP 2: Open the graphic creation module and choose from a combination of colors, palettes, and dimensions.

STEP 3: Download the graphic and share to social media!

What I learned

The nuances of user trust of the news

Throughout this process, I learned a lot about how people develop trust with the news. Small design details such as color and patterns took on increased meaning depending on the subject of the quote, so designing for those individualized and sometimes sensitive preferences was interesting to navigate.

What really stood out to me was that many interviewees trusted the news more when delivered in “squares”, or graphics on social media that could be made by anyone. Though these are well-meaning, they can easily contribute to the spread of misinformation. I’m really proud of the proper attribution details that our solution includes to combat that.