QUICK LOOK DESIGN
A New York Times Feature
Research to Design
From Headlines to Previews: Bridging the Gap
Research revealed that readers need a lightweight middle step between headlines and full articles, so we’re moving forward with a Reader Mode Preview that delivers quick, distraction-free snippets to improve flow and engagement.
I began by carefully analyzing what information the New York Times currently provides at each stage of the reading journey. On the homepage, users are given only a headline and an image, which can spark curiosity but often leaves them unsure of whether the article is worth their time. On the other hand, once they click through, they’re confronted with the full article, a long scroll of text, subscription prompts, and additional elements that demand a higher level of commitment.
Since my design challenge was to bridge this gap between a minimal preview and the full article, I mapped out the differences in information density at each step. The headline alone lacked context, while the full article overwhelmed readers who just wanted a quick sense of relevance. I wanted to create a “happy medium” that gave users enough to decide whether to continue, without undermining the NYT’s business model or overwhelming them with content.
After weighing the value of different article elements,
I landed on a balance: show the headline, the author, and the first three paragraphs.
The headline anchors the reader, the author adds credibility and trust, and the first three paragraphs provide just enough depth to signal tone, topic, and importance. This combination aligned with my research insights, users wanted more than a headline but less than a full scroll, and it positions the Reader Mode Preview as a low-friction, high-value feature that directly addresses user needs.
Current NYT Homepage Info
Full Article Info
What's in between??
Designing the Quick Look
I began by identifying the key information I wanted to include in the quick-look experience and experimenting with how it could be composed on the screen. Since the NYT homepage features articles in a variety of sizes and layouts, I designed two preview formats that would flexibly accommodate most web versions. From there, I iterated on the placement of the title, author, and opening paragraphs to find a layout that felt both clear and natural within the flow of the existing interface.
I ultimately chose the starred versions because they were the most visually comfortable for readers, offering a clear and intuitive information hierarchy. This layout made it easy to quickly scan headlines and opening text without overwhelming the user. For the smaller version, I realized that making the preview scrollable created an opportunity to present more information in a limited space, while still keeping the experience lightweight and flexible. This balance allowed the design to serve both quick skimming behaviors and deeper curiosity, depending on the user’s needs. The scrollable feature can be applied to the larger pop up as well.
After several rounds of iteration and quick user testing, the main consensus was clear: once readers had skimmed the preview, they wanted a simple, direct way to continue into the full article. Without this step, the preview felt incomplete, users didn’t want to scroll back or search for links; they wanted a natural handoff from “skim” to “deep read.”
To solve this, I introduced a “Read Full Article” button that provides an immediate pathway into the original piece. My goal was to keep the interaction seamless within the New York Times’ existing design language, so I studied the platform’s current buttons and interaction patterns. I then blended these visual cues, typography, spacing, and subtle styling, into my design, ensuring the new feature felt native to the NYT ecosystem rather than an external add-on.
Current NYT button design
My NYT button design
The button design is intentionally clean and minimal, giving users a quick and effortless way to continue into the full article without distraction. To reinforce exploration within the preview itself, I also added a subtle scroll bar indicator, signaling that more information is available below the fold. This interaction is especially important in the smaller version, where the text is naturally cut off, the scroll prompt encourages readers to engage further instead of assuming the content ends abruptly. Together, these elements create a smoother and more intuitive transition from skimming to deeper reading.
Icon Design
I kept the icon design deliberately simple to align with the existing visual language of the New York Times interface. Consistency was important, users are already familiar with NYT’s restrained, minimal iconography, so introducing anything overly stylized would have felt out of place. The interaction was also tailored for different platforms: on web, the icon would reveal the preview on hover for a fast, lightweight experience, while on mobile it would activate on tap, reflecting standard touch behavior. This ensured the feature blended seamlessly into the current design system while remaining intuitive across devices.
Current NYT icons
My NYT icon
Quick Look Final Design (Web)
Here is a walkthrough of how the quick look icon is utilized on a web application. The icon is triggered through a hover.
Take a look at the walkthrough video.
Quick Look Final Design Dark Mode (Mobile)
Here is a walkthrough of the screens that pop up once the quick look icon is used for mobile. The icon works differently here, instead of a hover its a click.
Take a look at the walkthrough video.
Reflection
Designing the Quick Look feature gave me the opportunity to take a small but impactful problem, the friction between a headline and a full article, and shape it into a user-centered solution. What stood out most during this project was how much value can be created by addressing the “in-between moments” of an experience. Readers didn’t want a radical redesign of the New York Times; they wanted a smoother handoff, a chance to decide more confidently before committing.
Through quick observations, lightweight interviews, and iterative design, I learned that even subtle interface changes , like adding previews, scroll prompts, or a clean “Read Full Article” button, can meaningfully improve the flow without disrupting brand consistency. The challenge was not just designing something functional, but making sure it felt native to the NYT’s established design language.
Looking back, this project reinforced the importance of balancing user needs with existing systems. By respecting the New York Times’ visual identity while introducing a new layer of interaction, I was able to design a feature that blends seamlessly into the platform. It taught me that impactful UX design doesn’t always mean reinventing the wheel, sometimes,
the biggest improvements come from refining the edges of an experience.