Tony's Big Cheese Pizza ☆
A UI/UX case study on improving the customer experience for a local restaurant.
march, 2025
Tony's Big Cheese Pizza is a popular pizzeria from my hometown (Yakima, Washington) that gets significant traffic. Their current website lacks usability and accessibility, which leads customers to often order by phone instead. Here I identify key usability and accessibility issues to redesign the site for a smoother, more responsive experience.
#html/css #figma #ui/ux #user_research
*ੈ✩‧₊˚༺☆༻*ੈ✩‧₊˚ problem *ੈ✩‧₊˚༺☆༻*ੈ✩‧₊˚
The usability issues on the Tonys Big Cheese Pizza website frequently drive customers to order by phone instead of using the website. The site lacks a clear hierarchy, making it difficult to navigate. It also has poor color contrast, making it hard to read.
usability analysis
I evaluated the website using criteria from interaction design principles: efficiency, learnability, and memorability.
efficiency
- Navigation is cluttered (too many navbar options)
- Duplicate "Order Now" and "Menu" functions confuse users
learnability
- Poor visual hierarchy makes key info hard to find (e.g., company story at bottom)
- Weak branding makes content harder to remember
memorability
- Excessive calls-to-action dilute clarity
- Center-aligned dense text reduces readability
accessibility analysis (WebAIM WAVE)
Images lacked helpful alt text, and the black-on-red color combination failed contrast checks, making the text difficult for visually impaired users. WebAIM's WAVE accurately identified these critical accessibility issues, confirming the need for improved color contrast and clear alt text.
*ੈ✩‧₊˚༺☆༻*ੈ✩‧₊˚ solution *ੈ✩‧₊˚༺☆༻*ੈ✩‧₊˚
First I built a clear, reusable style guide in Figma to help guide my final mockup designs and overall design philosophy for the website brand. I tried my best to tie in colors that have that retro feel and make the element design feel simple.
typography
- Headers: "Righteous," bold, clearly scaled by device size.
- Body: "Montserrat," regular weight, optimized for readability.
colors
- Primary Red: #C60A0A (high contrast, visually inviting).
- Background: White, with clear contrast and accessibility checks.
reusable components
- Buttons with clear hover and active states.
responsive mockups (mobile, tablet, desktop)
Desktop (3840px × 2160px)
- Streamlined horizontal navigation bar using Flexbox.
- Clear hero section highlighting their signature Large Pepperoni Cheese pizza.
Tablet (768px × 1024px)
- Collapsed navbar into a minimal hamburger menu (Shared with Mobile).
- Adjusted typography and spacing for easy tablet use.
Mobile (375px × 667px)
- Single-column scrolling layout for clarity.
- Large, touch-friendly buttons with ample spacing.
final design
Using my Figma mockups and design principles, I coded the final Tonys Big Cheese Pizza Homepage design with HTML and CSS.
*ੈ✩‧₊˚༺☆༻*ੈ✩‧₊˚ takeaways *ੈ✩‧₊˚༺☆༻*ੈ✩‧₊˚
My redesign specifically addresses usability and accessibility issues by simplifying navigation, creating clear calls-to-action, enhancing visual hierarchy to make key information instantly accessible, improving accessibility through descriptive alt-text and better color contrast, and ensuring a responsive, enjoyable ordering experience across all devices. The result is a website that is not only visually appealing but also user-friendly and accessible to all customers. Additionally, as an engineer, I ensured that the website is reliable and easy to maintain. I used semantic HTML and CSS best practices to ensure that the website is easy to read and understand. I also used a modular approach to design, which makes it easy to update and maintain the website in the future.
This project taught me the power of empathetic design; As an engineer designing for reliability, by thoughtfully addressing usability and accessibility, I transformed Tony's Pizza's online presence into an inviting, and delightful experience! Perhaps something that is as enjoyable as their pizza itself! (seriously)