James Fiesta Grill
Creating an intuitive website that will properly showcase a beloved Filipino restaurant for both new and loyal customers to utilize.
Design Process
Research
UX/UI Design
Branding
Prototyping
Usability Testing
Timeline
JULY 2024 - AUGUST 2024
(1 Month)
*Working on a part-time 20hr/week schedule
Problem
James Fiesta Grill has many photos and reviews online, but it lacks a dedicated website to showcase its offerings. Its online presence is scattered across platforms like Yelp and Facebook, making it inconsistent. As a small business primarily known within the local Filipino community, it relies on word-of-mouth. However, Google reviews suggest that outside customers may not always have the best experience.
Solution
I aim to create an intuitive website that effectively showcases James Fiesta Grill for both new and loyal customers. This will provide an opportunity to display high-quality photos of each dish, clearly list operating hours (as some reviews mention customer confusion), offer food ordering options for takeout, delivery, and catering, and share updates about the establishment.
The Research
With the problem and goal in mind, I began to plan out my research by gathering insights through 3 different methods:
Competitive Analysis
I assessed 3 local Filipino restaurants, focusing on how they promote Filipino culture and whether they utilize a website to enhance their brand visibility. This review highlights their strengths, weaknesses, and potential opportunities.
User Interviews
I spoke with 5 participants to gather their insights on what makes an intuitive website for a restaurant. This research will help design an effective website to attract new customers and increase profits for a small business.
**Key findings from my affinity map**
-
All 3 businesses provide Filipino cuisine through counter-service setups
They all focus on food delivery, pickup, and catering services
Their primary customer base seems to be Filipino food enthusiasts, with each business showcasing some form of Filipino culture
All 3 establishments operate small markets alongside their main offerings, with some overlap in products and customer service models
-
Mama Rosa Rotisserie Grill has a well-designed website with strong brand identity and clear interactive elements
Kuya Ja’s Lechon Belly has a more simplistic, but less user-friendly site. They also have 2 other chains that helps expand the business
Ligaya’s Filipino Food solely relies on its Facebook page posts authentic, unedited images regularly on social media, while the others rely on professional or aesthetic visuals
-
Having a Main Website: Can help establish credibility and expand reach. As well as enhancing engagement with new and current customers.
Better Product Presentation: Including more photos of dishes can engage customers, create stronger visual appeal, and drive interest in other menu items.
Online Ordering & Delivery Expansion: Adding features like online ordering, delivery, and catering options makes services more accessible to customers. as well as create additional revenue streams.
-
Customers rely on reviews, ratings, and photos to gauge the quality of the food and atmosphere.
A minimum of 4 stars on platforms like Yelp is expected.
Reviews help set preferences and expectations for the dining experience.
-
A well-designed website with easy navigation, high-quality images, and detailed descriptions is crucial.
Customers prefer websites with clear menus, location information, and online ordering options.
Having a modern, clean design with engaging visuals and accurate photographs is preferred.
-
Customers look for strong imagery, detailed descriptions, and relevant information like prices and menu options.
High-quality pictures, clear opening times, and information about special offers are important.
Visuals, clear menu options, and stress-free online ordering enhance the user experience.
Secondary Research
Aside from conducting a competitive analysis and user interviews, I also explored how the business operates through its most frequently used online platform—Facebook. I found that many customers ordering are part of a mature audience. Since many local Filipinos use Facebook, they prefer to look at the restaurant's menu there instead of searching on Google, especially those who are not very tech-savvy.
A key insight is the owner's active engagement with customers are done through Facebook, where he gives shoutouts and shares photos of orders, enhancing credibility and showcasing food quality. He also posts important updates like closures, keeping customers informed.
User Personas
Based on the insights of my affinity map and the information I gathered from my secondary research, I developed 2 personas that effectively represents the challenges and goals of my potential users.
For this instance, Ruby represents a small business owner who is looking to create a website that will promote her business onto another outlet. And Amir representing as food enthusiast who loves to try new food on their free time while also working in the food industry himself.
Customer Journey Map
To understand the potential feelings a users may experience when going through an app, I created a journey map to visualize the frustrations and delights of a customer.
This helped me grasp how someone would benefit from an restaurant who has an intuitive website that will take online orders with ease. For this map, I used my persona John to help illustrate the process.
Key Findings:
Clear, and high-quality photos of menu items are crucial; poor or missing images can lead to hesitation when ordering.
Customers love a fast, minimal-step checkout process with the option for mobile payments (e.g., Apple Pay). Manual card input adds unnecessary friction.
Users that are able to complete the ‘Ordering’ process in a easy layout increases the chances of buying more. It also helps with memory the next time they revisit the website.
Immediate confirmation screens and easily readable receipts are expected after placing an order. Delays or complicated layouts negatively impact the user’s experience.
POV and HMW Statements
With the research data, personas, and journey map in mind, I made it my goal to tackle this question:
User Flows
Going straight into the user flows, I developed 2 flows. These flows show the 2 pathways a user may go through when interacting with a restaurants website. Such as: picking an online order and contacting the establishment. Making the flows helped me identify any pain points and opportunities a user may encounter along the way.
Low-Fidelity Wireframes
Looking back between the journey map and user flows I developed, I sketched out my wireframes on paper. Sketching it out on paper was also a nice break from the screen and allowed me to easily conceptualize the appearance of the website.
The key frames I developed consist of the main landing page, the menu that showcases the dishes, a check out and confirmation page, and a contact page. While sketching out the frames, I focused on making a minimal and clean layout. Keeping in mind of potential users that can use this app to their advantage.
Mid-Fidelity Wireframes
Once I was able to conceptualize the design onto low-fi wireframes, I began to flesh them out in the mid-fidelity stage.
While working, I followed the order from how I sketched it out in the low-fi stage, while also referencing my flows to triple check everything is clear before the testing stage. But before I continue with the testing stage, I showed my work to my mentor and to my peer to see if there is anything I can improve or adjust.
I restructured the menu page for James Fiesta Grill to display all the dishes. A peer suggested that the long format was tedious to scroll through, so I divided the content into sections for easier reading. I also redesigned the category format using cards with icons for each category and made the pick-up and delivery buttons smaller.
Mid-Fidelity Testing
After making my adjustments, I moved onto user testing. So, I got in contact with 5 participants to test out the 2 main flows: the online order flow and contacting the establishment flow.
Although the feedback from my peers was positive, many users suggested adding customization options for the dishes. As well as come clarifications of the classification of the dishes, such as: what is a spicy dish, warm dish, or cold dish. Since my wireframes are still in the mid-fidelity stage, this presents a great opportunity to refine features and enhance the user flow before moving into high-fidelity designs and testing.
Here are some of the feedback given:
“...easy to navigate; add allergy in descriptions, if they made a specific instructions add it through the checkout list, make an ‘add’ option together with the ‘remove’ option...”
“ I know that there are cold and hot desserts, but clarify the difference.“
“You should make ‘chef’s recommendation’ sign on certain dishes at the top right on the cards on menu...“
“ Since these are cultural dishes that not a lot of people know about, add spicy levels indicator, or even with seasonings, to help the customer choose a dish to their liking.“
Logo Design
The original logo felt outdated and visually busy, but it had strong design elements that I could refine into a more modern look while preserving the brand’s identity.
I retained the structure of "James Fiesta Grill" but changed the fonts to Dai Banna SIL for "James" and Poppins for "Fiesta Grill," giving it a modern and clear look. The spoon and fork remain to honor Filipino culture, as both are typically used in meals, differentiating it from other East Asian traditions. I also kept the stars from the original logo and added a third star above the utensils for balance, subtly referencing the 3 stars on the Filipino flag.
To reinforce the "grill" aspect of the brand, I incorporated a flame into the design. For the color palette, I opted for a black and white scheme with a touch of red to add contrast and make the logo stand out.
High-Fidelity Wireframes
After reviewing the feedback from my testers and peers, I moved on to developing the high-fidelity designs.
Starting with the homepage, where users can get a general overview of the establishment. Here, they can check the restaurant’s operating hours, view the latest coupons and rewards, explore popular menu items, read customer reviews, and find the restaurant’s location.
I created a contact section for catering inquiries and communication with the owner. A grill illustration displays the contact information, enhancing visual appeal and reinforcing the restaurant's branding while adding warmth and character to the design.
Next, I worked on the menu section, where users can browse different categories, view pictures of the dishes, and reference a small key indicating chef’s recommendations and spice levels. Users can also choose between pickup or delivery based on their preference.
When selecting a dish, they have the option to various add on dishes and include special requests, such as removing a topping. Once they finalize their selections, they can add the item to their cart and proceed to checkout to complete the transaction.
I ensured that the transaction process remains familiar and seamless. After entering their information and selecting a preferred payment method, users are presented with a confirmation screen displaying an order number, which helps them identify their order upon receipt.
High-Fidelity Testing
I was able to reconnect with the same 5 testers from the mid-fidelity stage. While I tested them on the same user flows, I refined the tasks to be more specific to the high-fidelity designs. This approach allowed me to identify more precise pain points and opportunities for improvement.
I was pleased to receive overall positive feedback. There were only a few minor adjustments needed—one being the hero image, which I replaced with something more visually appealing instead of a fish head as the first thing users see.
Here are some other things that were said:
“...change the hero image to something more appealing, I don’t think a lot of people will like the look of a fish head--I think this will effect first impressions depending on the viewer. “
“Easy process, feel familiar when comparing to other restaurant websites.”
“I like the convenience of the button in the same section for minimal scrolling...“
Iterations
With the feedback in mind, I’ve made the proper adjustments that made the features clearer to understand and cleaned up parts of the design.
I was able to switch out the hero image into something that will appeal to the audience more. So instead of one singular dish, I chose an image that showcases an array of dishes.
Other minor adjustments were on the design side. One was to readjust the sizes of my icons so that the sizes are consistent. Another aspect that was adjusted was toning down the opacity of the red ombre on the cards and making the height of the flame on the homepages slightly higher.
Prototype
To try out James Fiesta Grill’s website for yourself, click here!
Conclusion
I particularly enjoyed designing for a real business, especially one that holds personal significance. A key challenge was ensuring the website appealed to a broader audience while maintaining cultural authenticity. Since most of my testers were familiar with the establishment, it was exciting to receive overwhelmingly positive feedback on the site. Many users even expressed how useful it would be as a real website.
Although I have some ambitious design ideas, like making an event page or a customer appreciation page, they had to be set aside due to time constraints, but they still remain as potential future enhancements.