Redesigning Zippy's Newsroom
I rebuilt the News directory into five reusable, accessible templates
I redesigned the news directory and five reusable article templates to create a more responsive, accessible, and visually structured content system. Through observing and testing the designs on the front end through Builder.io, I worked to reduce front-end development errors as much as possible.
- Redesigned the News directory information architecture for faster scanning and content discovery
- Built reusable templates for standard articles, holiday hours, food specials, and sweepstakes
- Reduced oversized containers and improved responsive behavior across breakpoints
- Validated front-end feasibility of each template using Builder.io
The existing newsroom lacked a clear
content hierarchy
From observation, and considering Zippy’s target audience of older demographics and families, I noticed the news directory page and articles were difficult to scan due to a lack of type hierarchy, and users didn’t know which section mattered. Along with this, decorative cursive typography reduced readability and compromised accessibility.
Zippy's News: A Scalable Content System
Readable at a glance, built to scale
Accordion-based containers hold large amounts of information without overwhelming the page.
Reusable containers and CTAs keep every seasonal offer consistent and easy to update.
Auditing the interface and benchmarking newsroom patterns
I evaluated the existing News experience for readability, information density, hierarchy, and responsive behavior.
Popeyes Newsroom
Subway Newsroom
Apple NewsroomThe audit showed that effective newsroom systems distinguish featured content from secondary stories, expose category and date metadata early, and reuse predictable card and article structures. I used these patterns as directional evidence, adapting them to Zippy's established brand and content needs rather than copying a competitor's visual treatment.
Choosing a structure that could adapt
across breakpoints
I explored carousel-led and multi-column directory layouts, comparing their hierarchy, information density, and responsive behavior within the existing interface.
Lo-Fi DirectionsExplorations included
From lo-fi wireframes of each direction, I selected the multi-column layout: it used the available page width more effectively and reflowed more predictably at smaller breakpoints, reducing the risk of narrow cards, compressed text, and one-off responsive behavior.
Building a reusable newsroom system within front-end constraints
I translated the selected direction into high-fidelity components using Figma Auto Layout, then used Builder.io to validate how the layouts behaved in a front-end environment.
Scannable web writing improves usability, since users read only a portion of content — I reduced card copy and separated headlines, dates, and CTAs into distinct hierarchy levels.
Most users scan news pages instead of reading word by word, so I made categories visually distinct and separated metadata from the headline to help readers quickly recognize topics.
Operating hours are grouped by holiday and disclosed progressively through accordion components, with consistent expanded and collapsed states and a branded gift-card promotion.
Offer details, imagery, and ordering actions are separated into reusable promotional containers with consistent CTA placement, preserving Zippy's visual identity without weakening legibility.
Eligibility, campaign period, and official rules are organized into accordion sections, keeping dense legal copy out of the way until a visitor actually needs it.
Final reflection
This project taught me how to improve an established interface while designing within an established brand identity. I translated an interface audit into reusable content patterns, evaluated layout decisions against responsive constraints, and communicated implementation considerations during handoff.
With more time, I would test content discovery, article comprehension, keyboard navigation, and mobile usability with Zippy's customers.
