Quick Look New York Times Feature

SOLUTION

Quick Look, a distraction-free preview that lets New York Times readers grasp a story at a glance before committing to the full article.

Company

Unaffiliated Concept for The New York Times

Role

Independent project UX/UI Designer

Timeline

5 Weeks

Figma · Feature Design for Existing System · Web and Mobile Design

OBJECTIVE

NYT readers are faced with a constant stream of headlines but little context, leaving them unsure which stories are worth their time and forcing them to either guess or commit to full articles.

BACKGROUND RESEARCH

I started this research approach with a full look at what the current website/app article consumption workflow looked like. I utilized competitive analysis, focus group testing, and my own user preferences to help build improvement areas.

group session analysis

(2-5 participants)

competitive benchmarking

analyses

design workflow concepts

expert evaluations (from industry professionals at NYT)

Informal Interviews 3 readers, 22-45 years old

“Sometimes the headline is vague and I have to read the full article anyways"

“I’m usually on the train. I just like to scan topics not read full articles”

Competitive Benchmarking Twitter/X, Medium, Apple News

Medium offers a seamless preview, showing the first few paragraphs with a clean, minimal design and a fast skim experience.

Apple News uses card-based previews with a snippet and image for instant, distraction-free glancing.

Twitter/X lets users scan headlines and excerpts via tweet cards for fast access.

Focus Group 5 participants

Mobile readers skim, then bounce. If an article didn't hook them in the first 10 seconds, they scrolled back to the homepage rather than finishing it, signaling that full commitment was too high a bar to clear up front

Desktop readers opened multiple tabs to "skim later" instead of deciding in the moment

Secondary Research

Although I didn’t have access to NYT’s internal analytics, I reviewed public data and usability studies on news consumption.

The average session time on news sites is 2 minutes, with many users only scanning headlines

Bounce rates for news and media sites typically fall between 40–60%, and industry sources point to headline/content mismatch as a leading cause of bounces

Research from the Reuters Institute shows that over 70% of users prefer a quick skim or summary before deciding to read in full

How might we...

reduce the barrier to entry for NYT readers, so deciding what to read feels like part of the reading experience rather than a gate in front of it?

DESIGN REQUIREMENTS

Research showed that readers want to judge an article before committing to it. These two requirements guided every concept I explored.

The preview must give readers enough information to judge relevance within 3 paragraphs or less, without fully satisfying their need to read the story; preserving the reason to click through to the full article

The transition from preview to full article must feel like a continuation of the same reading moment rather than a new destination, so the skim-to-deep handoff doesn't introduce friction that causes drop off

DESIGN PROCESS & ITERATIONS

I started with concept ideations of what possible preview features could look like.

To maintain the integrity of the newspaper feed that NYT establishes, I preferred the card style: Concept A. Although Concept B seemingly had a better workflow in terms of clicks and cognitive load. I decided to make some simple iterations to further visualize.

Concept A: Card

Concept B: Scrollable

Concept C: Accordion

Concept C: Accordian mid fidelity wireframes

Testers hesitated at the extra step in the card (A) and accordion (C), while the scrollable feed (B) expanded in one action and felt like continued reading.

Concept B: First High Fidelity Iteration

Concept B: High fidelity wireframes 1st Iteration

I decided I needed to focus on the transition from the preview to the full article that felt seamless and didn't involve another click.

Concept B: Second High Fidelity Iteration

Concept B: High fidelity wireframes Second iteration

Concept B: Third High Fidelity Iteration (Video)

VALIDATION AND TESTING

User Testing

3 person usability testing

I tested my prototype with three different NYT readers.

Online meeting with 3 people for usability testing

NYT Industry Evaluation

2 Designers working for NYT

I was able to pitch my idea to industry experts and gain amazing advice on next steps and other potential features

3/3

Completed the task

1.2

average clicks to complete task

TAKEAWAYS

1. More article information that was visible on the home page could be added to the preview card (example: reading time)

2. Readers do not necessarily want to know they are entering the article, they want a seamless transition into reading the full article

FINAL DESIGN DECISIONS

Concept B: Final High Fidelity Iteration

Concept B: 3rd High fidelity with small information additions

Concept B: Final High Fidelity Iteration (Video)

WHAT IS NEXT?

Throughout this project I encountered many design ideas that I wanted to iterate more on. But for successful design I felt I needed to narrow the scope and focus on prioritizing usability, micro interactions, and animations. My next design steps for this project are designing for:

Audio / Podcasts