Pepe's y Mito's
Pepe’s y Mito’s is a family-owned “Mex-Tex” restaurant with a 30-year legacy. This new website helped them reach new customers and guide users to more profitable engagement.
Role
UX Researcher
UX/UI Designer
Tools
Figma
Webflow
Google Analytics
The Problem
Pepe’s y Mito’s has a strong Yelp reputation, serving delicious food in a nightlife neighborhood, yet their dining traffic has dipped significantly since 2020.
Customers are beginning to return to the area since the COVID-19 pandemic, but many of them don’t know about this gem a few blocks down from popular bars. The neighborhood struggles with expensive, poorly maintained parking lots keeping away potential customers. Pepe's y Mito's wants to facilitate a smoother first-time experience for new customers, entice large groups and events, and explore expansion into online ordering.
The Solution
-
Create a responsive website that prioritizes online ordering and clearly presents accessible, affordable parking options.
-
Align the website design system with the updated bright, spunky graphic assets. Implement stronger SEO to reach customers looking for late-night bites.
-
Highlight positive customer experiences, national recognition, and popular dishes to entice new customers overall.
.png)
Key Features
Search Engine Optimization
-
Key words appear strategically on every page, and all pages are readable by Robot.txt
-
Google Maps is integrated in the Contact page, along with convenient parking information.
Featured Products and Services
-
Catering and event services are highlighted on the landing page.
-
Menu distinguishes dishes featured on national TV.
.png)
Simple, Quick Conversion
-
The user is guided to visit in-person or order catering within 1-2 clicks of the landing page.
Empathize
Stakeholder Interviews
The co-owners described their busy day-to-day, focusing on cooking and hosting at the restaurant. They recently invested in new graphic branding assets and re-reached capacity to offer catering services since the pandemic. While they cannot change the price or availability of parking, they know the best nearby options.
User Interviews
Customers, new and old, consistently lauded the quality of the food and service. Most of their customers are locals who simply didn’t know the restaurant was there, nestled in the far corner of the neighborhood. Similarly, many had not been around due to a perceived lack of parking in a car-centric city.
Define
How might we:
-
Engage new customers through search engine optimization?
-
Convert online activity into in-person dining?
-
Guide users to new, more profitable interactions?
Ideate
Site Map & User Flows
Challenge:
Where should the landing page call-to-action lead?
Hearing how much stakeholders and customers complained about the parking and commute, I first considered leading users straight to the Contact page. The Google Maps integration would allow users to get information on those aspects outside of the website, though.
After more careful user interviews, I decided to guide them toward the menu, instead. We found that users are most likely to visit the site because they are actively looking to dine somewhere. They are more immediately interested in the type and quality of food. If it aligns with their cravings, then they'll check for the address and business hours.
Iconography
I utilized a simple, eye-catching icon in the landing page and menu to reference the restaurant’s national notoriety via Diners, Drive-Ins, and Dives. This quickly builds reputation while giving customers a specific reason to dine in-person.
Visual Storytelling
I relied on photography and graphics to convey information and guide users, wherever possible. The menu posed an exception. Many of the dishes are unfamiliar to the typical American customer, and photos of each would. create excessive scrolling or clicking through a gallery. So, we prioritized text to concisely describe the unique “Mex-Tex” family recipes.
Prototype
Validate
Using Figma prototypes, I performed simple user testing to ensure flows were operable and understandable. Users were able to easily navigate between pages and find information as directed.
Test users also expressed a desire for more robust ways to explore event/catering options, as well as an online ordering flow. Stakeholders agreed that these features would be valuable to future updates.
After minor adjustments to UI, the new website was ready to launch! Google Analytics showed that traffic to the site roughly doubled in the first month. In-person dining continues to grow, and the owners are preparing to move into a larger space to accommodate their new customers.
Next Steps
-
Develop forms for catering/events inquiries and online delivery orders.
-
Build out the Events page with suggested catering packages.
-
Explore options for using analytics and AI tools to present personalized CTAs on the landing page. Prioritize catering or in-person dining CTAs, as appropriate.
Lessons Learned
-
Develop a strong, clear idea of each page's interactions and animations before creating component sets.
-
I eagerly started on components, particularly for sliding and scrolling elements. My ignorance to the component properties and behaviors had me doing unnecessary, tedious workarounds while prototyping later.
-
-
Setting local color and text styles are helpful but not the most efficient way to manage UI changes.
-
I quickly realized the tedium of individually updating fill colors and font sizes while working on pages with many shared elements, such as the menu. Before my next project, I made time to learn best practices for design systems and how to set up/ use variables in Figma.
-