Work

About

Resume

Zippy's • UI Design Intern • Web Redesign

Redesigning Zippy's Newsroom for Clearer Content Discovery

ROLE

UI Design Intern

Team

1 UI designer
1 manager

TIMELINE

Sep - Dec 2024

Tools

Figma

Builder.io

Adobe Suite

TLDR;

I redesigned the News directory and four reusable article templates to create a more responsive, accessible, and visually structured content system.

I redesigned the News directory and four reusable article templates to create a more responsive, accessible, and visually structured system.

My role

UI Design Intern

• Redesigned the News directory for faster scanning and content discovery
• Created reusable templates for standard articles, holiday hours, food specials, and sweepstakes
• Reduced oversized containers and improved responsive behavior
• Evaluated front-end feasibility using Builder.io

01 • discovery & the problem

The existing newsroom lacked a clear content hierarchy

The News directory and article pages were difficult to scan. Decorative cursive typography reduced readability, oversized containers occupied nearly one-third of the viewport, and inconsistent spacing weakened the hierarchy between headlines, metadata, body content, and calls to action.

The News directory and article pages were difficult to scan. Decorative cursive typography reduced readability, oversized containers, and inconsistent text styles weaken the hierarchy

The News directory and article pages were difficult to scan. Decorative cursive typography reduced readability and inconsistent spacing weakened the hierarchy.

02 • The solution

A scalable content system built for readability and responsive behavior

IMPACT

01 — Made the News section more accessible & readable

02 — Delivered designs tested to work for front end

03 — Aligned the newsroom with branding

04 — Turned design decisions into research-backed choices

DELIVERED OUTCOME

01 - Improved readability and information hierarchy

02 - Stronger visual hierarchy for content and easier scannability

03 - Aligned reusable templates with Zippy's brand

FEATURE 01

Responsive News directory with featured and categorized content

FEATURE 02

Standard article template with metadata, hierarchy, and share actions

FEATURE 03

Holiday Hours template with accordion-based schedule disclosure

FEATURE 04

Food Specials template with reusable promotional containers and CTAs

03 • RESEARCH & SYNTHESIS

I evaluated the existing News experience for readability, information density, hierarchy, and responsive behavior.

Auditing the interface and benchmarking newsroom patterns

I evaluated the existing News experience for readability, information density, hierarchy, and responsive behavior.

Patterns worth adapting

The 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.

The audit showed that effective newsroom systems distinguish featured content from secondary stories and reuse predictable article structures.

Patterns worth adapting

The audit showed that effective newsroom systems distinguish featured content from secondary stories and reuse predictable 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.

03 • RESEARCH & SYNTHESIS

I evaluated the existing News experience for readability, information density, hierarchy, and responsive behavior.

Auditing the interface and benchmarking newsroom patterns

04 • LAYOUT EXPLORATION & TRADEOFFS

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.

I explored carousel-led and multi-column directory layouts, comparing their hierarchy, information density, and responsive behavior.

The product had a semi-established interface, so I focused on UX suggestions based on data.

Explorations included:
• A featured-story carousel
• Two-column story layouts
• Smaller, reusable content cards
• Clear featured-versus-secondary story priority

From there, I created lo-fi wireframes of how the layouts would look like. We ended up going with option 2 as it would work better responsively.

I selected the second direction because it used the available page width more effectively and reflowed more predictably at smaller breakpoints. This reduced the risk of narrow cards, compressed text, and one-off responsive behavior.

05 • FINAL DESIGN & key decisions

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 evaluate how the layouts behaved in a front-end environment.

I translated the direction then used Builder.io to evaluate how the layouts behaved in a front-end environment.

The product had a semi-established interface, so I focused on UX suggestions based on data.

News directory: increasing scanability and content density

Insight: VISUAL CATEGORIES

Scannable web writing improves usability and users read only a portion of content

decision

Reduce card copy and separate headlines, dates, and CTAs into distinct levels

Standard article template: creating a predictable reading structure

Article templates w/ type hierarchy and accompanied visuals

Insight: TYPE HIERARCHY

Most users scan new pages instead of reading word by word

decision

Make categories visually distinct so users can quickly recognize topics

Holiday Hours template: simplifying complex schedules

• Grouped operating hours by holiday.
• Used accordion components to progressively disclose detailed schedules.
• Created consistent expanded and collapsed states.
• Added a branded promotional region for related gift-card content.

• Used accordion components to progressively disclose detailed schedules
• Added a branded promotional region for related gift-card content

• Used accordion components to progressively disclose detailed schedules
• Created consistent expanded and collapsed states

Food Specials template: balancing promotion and clarity

• Separated offer details, imagery, and ordering actions.
• Created reusable promotional containers.
• Applied consistent CTA placement.
• Preserved Zippy's visual identity without weakening text legibility.

• Separated offer details, imagery, and ordering actions
• Created reusable promotional containers
• Added CTA for users to incentivize engagement

• Separated offer details, imagery, and ordering actions
• Created reusable promotional containers
• Applied consistent CTA placement
• Preserved Zippy's visual identity without weakening text legibility

Learnings

01 - Build reusable structures with Auto Layout

02 - Connect interface decisions to evidence

03 - Communicate frequently with stakeholders to align their needs and users needs

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.

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 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.

Contact: Laureemytam@gmail.com
Say hi! :]

101010101101010010110101010100101001101001101010100101001010010101010110101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010010101101010010101101010010101101010

011001100110