Frita Batidos Website Redesign
A comprehensive digital experience redesign for Ann Arbor's beloved Cuban-inspired restaurant, bringing vibrant flavors and culture to life through modern web design.
Background
For this project, I redesigned the website of a well-known Ann Arbor favorite, Frita Batidos. The restaurant is popular among both locals and University of Michigan students for its authentic Cuban-inspired cuisine. On busy weekend nights, it’s not uncommon to see lines stretching out the door as people wait for their famous Cuban burgers and milkshakes.
Problem Statement
Right now, Frita Batidos’ website provides information about their story, locations, and menu, but users struggle to actually find what they need. Many visitors report difficulty locating the menu, placing online orders, finding store hours, or learning more about the restaurant’s background. These navigation issues increase cognitive load and user frustration, often leading people to exit the site before completing an order.
Task
The goal was to create a clear, intuitive website experience that helps users quickly access the information they need and confidently place an order online.
I focused on:
-
Reducing cognitive load by reorganizing content and making the menu and online ordering pathways more discoverable.
-
Improving navigation and clarity so users can easily find locations, hours, and the story behind Frita Batidos.
-
Enhancing overall usability to minimize user frustration and decrease drop-offs from visitors trying to place an order.
Design Process
Persona
To begin this project, I wanted to develop a deeper understanding of Frita Batidos’ current customer base. I started by creating a user persona to represent a typical customer. This process helped me step into the users’ mindset as they navigated the website and allowed me to identify key friction points in the existing design.
Sketches
The current website lacks a clear flow, making it difficult for users to understand where to go or how to complete key tasks. To address this, I focused on presenting Frita Batidos as both a restaurant and a community, giving users a sense of its vibe, flavor, and story before they ever step inside.
In my Crazy 8 sketches, I explored a variety of layout ideas, including a clean homepage with visible navigation, a brief story section, a menu or product listing page, a detailed item page with customization options, a cart overlay, and pages for checkout, order confirmation, and locations. These sketches helped me compare different directions and decide which elements to carry forward into my Figma designs.​
​
​
​
​
​
​
​
​
​
Design System
​
Before diving into the visual design, I extracted the primary colors and typography from the existing Frita Batidos website to maintain consistency with their brand identity. I also ensured all colors and elements met accessibility and contrast standards to support an inclusive user experience.
From there, I built out a set of core components, such as buttons and other basic components, to create a cohesive design system and streamline the rest of my design process.
​
​
​
​
​
​
​
​
​
​
​
Ideation & Feature Prioritization
​
-
Explored a wide range of ideas including a clearer homepage structure, an easily accessible menu, intuitive online ordering flow, detailed item pages with customization options, an interactive locations and hours section, an about page to highlight the brand’s identity, and streamlined checkout and order confirmation pages.
-
Focused on the most critical user needs such as making the menu easy to find, simplifying the online ordering process, and clarifying locations and hours. These features delivered the highest immediate value to users while maintaining feasibility, informing the core structure of the initial prototype.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​​
​
​
User Testing
​
Approach:
-
To evaluate whether the redesigned user flow improved the online ordering experience, I conducted comparative user testing using both my interactive prototype and the existing Frita Batidos website. The goal was to assess how easily users could complete a key task: ordering a single beef frita with cilantro-lime salsa for pickup.
-
Participants first interacted with the prototype to avoid bias from navigating the current website. They were then asked to complete the same task on the live site, allowing for a direct comparison of clarity, ease of use, and overall experience.
Test Structure:
-
Through UserTesting.com, participants completed a series of tasks and questions, including:​
-
Describing their past online ordering habits
-
Completing the order task in both the prototype and the live website
-
Thinking aloud as they explored each interface
-
Reflecting on pain points, moments of ease, and areas of confusion
-
Rating whether they would recommend or discourage ordering from each version
-
Providing open-ended feedback on what they liked, disliked, and would improve
-
-
Tasks and questions remained consistent across both platforms to highlight differences in usability and identify where the redesign succeeded or still needed refinement.
​
​
​
​
​
​
​
​
​​
​
​
​
​
​
​
​
​
​
​
​
​​
​
Affinity Diagramming
​
After completing user testing, I organized all participant feedback into meaningful categories to identify the most important areas for improvement.
​
Overall, users were able to order their beef frita with ease on the redesigned website, while many struggled to complete the same task on the original site. Participants also noted that the redesigned product pages, featuring clear photos and ingredient details, gave them a much better understanding of what they were ordering before committing to a purchase.
​
​
​
​
​
​​
​
​
​
​
​
​
​
​
​
​
​
​
"The flow felt intuitive and easy to follow" - Test Participant​
​​​​​​​​​​
​
​
Revised Screens
The Frita Batidos website redesign prototype received positive feedback from testers, who highlighted that it makes the ordering process simpler and reduces the stress of navigating multiple pages and features.
Key Outcomes:
-
Based on feedback from user testing and instructor critiques, I updated the prototype to improve usability and clarity.
-
Key revisions included reorganizing the menu layout, making the online ordering pathway more prominent, refining product detail pages for easier customization, and enhancing the hierarchy on the homepage and locations page.
-
Added features like expanded payment options and the ability to schedule a pickup, while resolving prototyping flow issues to create a smoother, more intuitive user experience.
-
100% task success rate: All testers successfully completed the tasks assigned in the user test
-
The redesigned Frita Batidos website streamlined the ordering process, making it easy for users to find the menu, customize their items, and complete purchases efficiently.
Conclusion
Research Findings:
-
From my research, I found that the main pain points for users stemmed from difficulty finding the menu, understanding product details, and navigating the online ordering process. These issues led to frustration and, in some cases, users abandoning their orders before completing them. The redesign addressed these challenges by improving clarity, streamlining ordering, and providing better access to menu and location information.
​
Overall Analysis:
-
​Before my Figma redesign, users struggled to navigate the Frita Batidos website and figure out how to place online orders, often relying on long in-person lines to understand menu items. My redesigned prototype provides clear imagery, detailed ingredient information, and an intuitive navigation structure, allowing users to understand products and find what they want without confusion. This streamlined experience supports quicker ordering and a smoother overall checkout process.
