Zippys • Ui designer • APP REDESIGN
News Section for Hawai'i's #1 Diner of Choice
News Section for Hawai'i's #1 Diner of Choice
ROLE
ROLE
UI Design Intern
UI Design Intern
Team
Team
1 UI designer (me)
1 manager
1 UI designer (me)
1 manager
TIMELINE
TIMELINE
Sep - Dec 2024
Sep - Dec 2024
Tools
Tools
Figma
Figma
Builder.io
Builder.io
Adobe Suite
Adobe Suite
THE context
THE context
THE context
Manoa Now is a student-led marketing organization connecting UH Mānoa with the community.
Zippy's is Hawai'i's #1 diner of choice.
Zippy's is Hawai'i's #1 diner of choice.
Zippy’s is a beloved local Hawaiian restaurant chain famous for its diverse menu, blending American diner classics with Hawaiian, Japanese, Chinese, and Filipino comfort foods
01 • THE PROBLEM
01 • THE PROBLEM
01 • THE PROBLEM
Accessibility was hard and it lacked structure
Users are lost navigating the existing app & aren't satisfied visually.
Accessibility was hard and it lacked structure
The news section had cursive text that made readability hard. There was a lack of type hierarchy and the design had large containers that took up 1/3 of the screen. The News article had a lack of structure and oversized elements.
The news section had cursive text that made readability hard. There was a lack of type hierarchy and the design had large containers that took up 1/3 of the screen.
02 • The solution
02 • The solution
An accessible and concise interface for Zippy's customers of all ages
An accessible and concise interface for Zippy's customers of all ages
IMPACT
01 — Integrated research, leading decisions from data
02 — Delivered designs tested to work for front end
03 — Aligned the newsroom with branding
04 — Turned design decisions into research-backed choices
IMPACT
IMPACT
01 — Made the News section more accessible & readable
01 — Integrated research, leading decisions from data
02 - Delivered designs tested to work for front end
02 - Delivered designs tested to work for front end
03 — Aligned the newsroom with branding
03 — Aligned the newsroom with branding
04 — Turned design decisions into research-backed choices
04 — Turned design decisions into research-backed choices
FEATURE 01 • Carousel function to show latest news & visual categories
FEATURE 01 • New, professional, & intuitive interface w/ engaging visuals
FEATURE 01 • New, professional, & intuitive interface w/ engaging visuals
FEATURE 02 • Structured article templates with type hierarchy and share functions for users
FEATURE 03 • Revamped dining section layout with switch btw. facilities
FEATURE 04 • New calendar interface showing events & users bookmarked events
FEATURE 03 • Holiday hour article template w toggle drop downs & structured containers w/ brand-aligned visual elements
FEATURE 02 • New map interface w/ switches between dining, facilities, & deal offers
FEATURE 04 • Special menu template with structured containers that align with branding of Zippy's
FEATURE 04 • New calendar interface showing events & users bookmarked events
FEATURE 04 • New calendar interface showing events & users bookmarked events
FEATURE 05 • Sweepstakes template with toggle drop downs of content categories
FEATURE 05 • Clubs & RIO's section clearly sorted with popup w/ info & visuals
02 • DESIGN PROCESS
We didn't have enough time to conduct data
We didn't have enough time to conduct data
I was tasked with redesigning the news section and 5 templates, but the internship timeline was 3 months.
I joined in during the mid-design process. Rather than restarting, I gathered more information on how to elevate the app.
My role
My role
UI Design Intern
• Conducted the end-to-end redesign for the News section
• Audited competitors news sections to gain data and see layouts that work
• Used Builder.io to test design functionality on backend
• Directed the mid-to-end redesign
• Planned the research approach & analyzed data to find user pain points & opportunities
• Regularly oversaw the high-fidelity execution of the design
My UI Design Process
This was my second UI role and this was the process I did.
This was my second UI role and this was the process I did.
01 / OBSERVE
01 / OBSERVE
01 / OBSERVE
Observations
& Audit
Observation
& Audit
Observation
& Audit
Locate friction and inconsistency
Locate friction & inconsistency
Locate friction and inconsistency
02 / COMPARE
Competitor Audit
Find patterns worth adapting
→
02 / COMPARE
02 / COMPARE
Competitor Audit
Find patterns worth adapting & help users
Find patterns worth adapting & help users
→
03 / EXPERIMENT
03 / EXPERIMENT
03 / EXPERIMENT
Lo-fi Design
Lo-fi Design
Testing different layouts & what works
What are our students saying?
Testing different layouts & what works
04 / MAKE & REFINE
Hi-fi Redesign
Apply insights to existing UI
05 / TESTING
Prototype & Test More
Connect & refining user flows
06 / SHIP
Deliver & Hand Off
Finalizing design then handoff
→
→
→
↓
06 / SHIP
06 / SHIP
Deliver & Hand Off
Documenting, finalizing, & handoff.
Documenting, finalizing, & handoff
←
05 / TESTING
05 / TESTING
Prototype & Test More
Connect & refine user flows
Connect & refine user flows
←
04 / MAKE & REFINE
04 / MAKE & REFINE
Hi-fi Design
Choose best layout & refine
Choose best layout & refine
03 • RESEARCH & SYNTHESIS
I audited Zippy's current News section and noticed problems with accessibility, sizing, and visual hierarchy.
Searching for pain points & auditing competitors to see what works
I audited Zippy's current News section and noticed problems with accessibility, sizing, and visual hierarchy.
Benchmarking newsroom patterns to make Zippy's news easier to browse
I conducted a survey with 36 respondents on the existing app
I audited Popeyes, Subway, and Apple Newsroom to understand how brand-led newsroom pages help users scan updates, recognize story types, and move from a featured story into deeper articles.
Among 36 respondents, clarity & accessibility rated highest. Motivation & satisfaction posed the strongest redesign opportunity.
They all had engaging and structured layouts that focused strongly on visual hierarchy with contrast of items and gave the user options to share and engage with the article.
To get a better understanding of user patterns, I found secondary research
I researched into user patterns and their behavior with scanning content and how visuals impact their experience.
I audited Popeyes, Subway, and Apple Newsroom to understand how brand-led newsroom pages help users scan updates, recognize story types, and move from a featured story into deeper articles.
VISUAL CATEGORIES
aNN/g measured scannable web writing as 47% more usable, and found users read only about 20% of text on a page.
Decided to: Indicate clearer headlines, date, body, & CTA levels with info breakdowns in toggle drop downs.
aNN/g measured scannable web writing as 47% more usable, and found users read only about 20% of text on a page.
Decided to: Indicate clearer headlines, date, body, & CTA levels with info breakdowns in toggle drop downs.
TYPE HIERARCHY
NN/g found that 79% of users scanned new web pages while only 16% read word-by-word.
Decided to: making categories visually obvious so users could quickly recognize news, specials, holiday hours, and sweepstakes.
NN/g found that 79% of users scanned new web pages while only 16% read word-by-word.
Decided to: making categories visually obvious so users could quickly recognize news, specials, holiday hours, and sweepstakes.
Sources: Nielsen Norman Group - Auto-Forwarding Carousels, Visual Hierarchy in UX, F-Shaped Pattern of Reading, Card Sorting; Apple Newsroom; Subway Newsroom.
04 • Lo-Fi design
04 • Lo-Fi design
From there, I built layouts that felt intuitive for Zippy customers
From there, I built layouts that felt intuitive for Zippy customers
Given the information and considering Zippy's target market, I aimed to make the layout intuitive and visual hierarchy strong to focus priority on certain elements.
The product had a semi-established interface, so I focused on UX suggestions based on data.
The product had a semi-established interface, so I focused on UX suggestions based on data.
I sketched lo-fi layouts for the directory and options that would be most engaging.
• Carousel with article highlights
• Two column layout
• Organized & smaller containers
The product had a semi-established interface, so I focused on UX suggestions based on data.
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 and allow the content to fully take up the page rather than getting too small.
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 and allow the content to fully take up the page rather than getting too small.
The product had a semi-established interface, so I focused on UX suggestions based on data.
To get a better understanding of user patterns, I found secondary research
I conducted a survey with 36 respondents on the existing app
I researched into user patterns and their behavior with scanning content and how visuals impact their experience.
VISUAL CATEGORIES
aNN/g measured scannable web writing as 47% more usable, and found users read only about 20% of text on a page.
Decided to: Indicate clearer headlines, date, body, & CTA levels with info breakdowns in toggle drop downs.
TYPE HIERARCHY
NN/g found that 79% of users scanned new web pages while only 16% read word-by-word.
Decided to: making categories visually obvious so users could quickly recognize news, specials, holiday hours, and sweepstakes.
Sources: Nielsen Norman Group - Auto-Forwarding Carousels, Visual Hierarchy in UX, F-Shaped Pattern of Reading, Card Sorting; Apple Newsroom; Subway Newsroom.
04 • final design
04 • final design
Building the hi-fi News section while also testing development on front end
Building the hi-fi News section while also testing development on front end
Once given the green light, I started building the design in high fidelity. I also used the Figma extension Builder.io to test how my design would look on the front end.
The product had a semi-established interface, so I focused on UX suggestions based on data.
The product had a semi-established interface, so I focused on UX suggestions based on data.
How do we integrate strong visual hierarchy and make the page easily scannable?
How do we integrate strong visual hierarchy and make the page easily scannable?
• Reduced amount of text in article containers
• Integrated carousel with captions for easy digestion
• Made categories visual for easy visualization & streamlined flows
• Changed cursive font to sans serif for readability
Users liked:
• Student essentials is easy access on the main page
• We kept it & changed it to be professional & minimal
Users liked:
• Student essentials being easy access on the main page
• We kept it & changed it to be professional & minimal
Let's integrate strong type hierarchy and the ability to share it into the article template
Let's integrate strong type hierarchy and the ability to share it into the article template
Article templates w/ type hierarchy and accompanied visuals
Before, the News section had: no date, no category, too much spacing
Now there is:
• Category at top
• Date
• Structured hierarchy to information
• Accompanying visual
Before, the News section had: no date, no category, too much spacing
Now there is:
• Category at top
• Date
• Structured hierarchy to information
• Accompanying visual
Holiday Hours template broke down into categories and toggle drop downs for info on hours
Holiday Hours template broke down into categories and toggle drop downs for info on hours
Article templates w/ type hierarchy and accompanied visuals
Now there is:
• Categories broken down into different holidays
• Toggle drop downs for certain days of the holiday
• Container to highlight main gift card item + aligned with brand identity
Now there is:
• Categories broken down into different holidays
• Toggle drop downs for certain days of the holiday
• Container to highlight main gift card item + aligned with brand identity
Food specials template with containers for information and visuals with a CTA to order
Food specials template with containers for information and visuals with a CTA to order
Article templates w/ type hierarchy and accompanied visuals
Features of the specials template:
• Containers with background visuals aligning with brand identity
• CTA to order it directly from the article
• Type hierarchy for information priority
• Visuals for users to easily see item
Features of the specials template:
• Containers with background visuals aligning with brand identity
• CTA to order it directly from the article
• Type hierarchy for information priority
• Visuals for users to easily see item
Sweepstakes template with toggle drop down info breakdown & header visual
Sweepstakes template with toggle drop down info breakdown & header visual
Article templates w/ type hierarchy and accompanied visuals
Features of the sweepstakes template
• Togglable dropdown for info breakdown, sorting, and visual variety
• Type hierarchy and structure integrated into design
• Visual header for engaging section to convey info & align with branding of Zippy's
Features of the sweepstakes template
• Togglable dropdown for info breakdown, sorting, and visual variety
• Type hierarchy and structure integrated into design
• Visual header for engaging section to convey info & align with branding of Zippy's
Learnings
01 - Be clean & concise with auto layout
01 - Be clean & concise with auto layout
02 - Research backed decisions are crucial, don't guess
02 - Research backed decisions are crucial, don't guess
03 - Communicate frequently with stakeholders to align their needs and users needs
03 - Communicate frequently with stakeholders to align their needs and users needs
06 • Project TAKEAWAY
06 • Project TAKEAWAY
Zippy's was my second UI Design Intern experience and it taught me valuable lessons about how to build a product that aligns with stakeholders needs. I wish that I could have acquired more primary data from Zippy's consumer base to produce a more tailored experience for them. Overall, this was a great experience and I learned a lot.
This was the first project where I led and also did this much user research. I felt a stronger sense of certainty in design decisions and leading my team with confidence.
Learnings
01 - Be clean & concise with auto layout
02 - Research backed decisions are crucial, don't guess
03 - Communicate frequently with stakeholders to align their needs and users needs
Contact: Laureemytam@gmail.com
Say hi! :]
