Designing a responsive website for Egg Karne,
a Filipino-American breakfast cafe
role
deliverables
timeline
User Persona
Task Flows
Wireframes
Branding
Hi-fidelity Prototype
Product Designer
80 hours
problem
Egg Karne, a Filipino-American breakfast cafe located in Herndon, Virginia, currently doesn’t have a website. Instead, customers can find information about Egg Karne via the business’ Facebook, Instagram, and Yelp pages.
As a result, it’s difficult for customers to know everything Egg Karne has to offer - like their menu, catering options, and private event space available to book.
goal
Design a responsive website for Egg Karne to give existing and new customers a way to view the menu, location, catering details, etc. all in one place.
Enhance the brand identity and re-design the logo to reflect the business values and communicate the Filipino-American culture.
understanding the user’s motivations
and needs through research
I interviewed five users, between the ages of 26-63. All participants were familiar with using restaurant websites before, and three of the users were past customers of Egg Karne.
user interview insights
make the menu easily accessible and updated
5/5 users visit a restaurant website first and foremost to view the menu. Users find it frustrating when the menu is hard to find, doesn’t include pricing, and isn’t up to date.
showcase photos of the food and the space
4/5 users like to view pictures of the food and the restaurant space when they research a restaurant online. Users find it frustrating when the photos of the menu items aren’t labeled and are poor quality.
include reviews and testimonials
5/5 users will always read the reviews about a restaurant before visiting it to ensure the food is good quality.
make location of restaurant clear
Users who had been to Egg Karne before all said the location was difficult to find since the restaurant is located in a golf course. To prevent confusion and frustration at arrival, clear directions to the restaurant will need to be given.
enable user to see menu on the go
4/5 users are more likely to use a mobile device while viewing a restaurant website.
competitive analysis
I conducted a competitive analysis where I reviewed both top restaurants in the United States and top Filipino restaurants in the country.
Click image to enlarge
The analysis allowed me to understand the most common pages to include on a restaurant website which were the:
Home page with pictures of the food, menu, location, reservation booking, online ordering CTA, social media links, and other contact information
Menu page with either a PDF or text on the screen
Location page with google map
Contact page with hours and email/phone number
About page with brief history of the restaurant/owners
Based on these findings, I knew I had to include all these pages and details on Egg Karne’s website.
In addition, insights from the competitive analysis gave me a better understanding of how restaurants structured and organized their menu pages. Many of the competitors I researched organized their menus by type of dish and used clear headings, descriptions, and pictures. However, not all the restaurants included a picture and price of every dish they had on the menu. Pictures and prices of each dish was important to users, and if Egg Karne included images and prices of every menu item, they would stand out against their competitors.
user persona
bio
Kathleen is a young professional who likes to unwind on the weekend by eating out at local restaurants. As a foodie, she's always researching restaurants before going to them for the first time so she can get a sense of the food offered and the overall atmosphere of the place. Being Filipino-American, her favorite restaurants to check out include Filipino cuisine.
needs & goals
Find authentic/high rated Filipino food in the area
See menu with all the dishes and pricing
See photos of the food and restaurant
frustrations
Menu is hard to find
Website doesn’t have pictures of the food
Menu doesn’t include pricing
how might we?
Using insights from the user persona, I created a How Might We statement in order to start ideating solutions.
how might we design a restaurant website to help users reach their goal of finding…
the menu with updated pricing and pictures of the items?
authentic and high-rated Filipino cuisine?
the location of the restaurant?
ideating solutions based on user needs
developing task flows
Based on the goals from the user persona, I created a user and task flow with the user’s goals in mind:
Finding the menu
Reading reviews and history behind the restaurant to understand if food is authentic
Learning about the services the restaurant offers
Finding the location/hours
I based this task flow on how I thought users would logically navigate through the website. Most users’ priority is the menu so they are most likely to navigate to that page first. Once users are satisfied with the menu items, where would they navigate to next? Based on the user interviews, most users want to read reviews and learn more about the authenticity of the food. I included top reviews on the home page (right after the menu) where users could read about past dining experiences. Users may also visit the About Page to learn about the history and authenticity of the restaurant. If users are then satisfied with the reviews they may be curious about other services the restaurant offers and visit the Catering & Private Events page. Last, users will decide they ultimately want to dine at the restaurant and find the location/hours.
sketches to hi-fi
Based on the task flows, I created multiple sketches for each screen/page on the site. After receiving feedback on my low-fidelity sketches, I created the mid-fidelity wireframes. Creating my mid-fidelity frames helped me visualize the layout, structure, and flow. I decided to create the mobile wireframes first since a majority of users visit a restaurant’s website on their phones. Once I had the mobile mid-fidelity wireframes finalized, I created the mid-fidelity desktop frames.
Mobile
Desktop
design decisions in high-fidelity
1. how might we help users easily find the menu with pricing and pictures of the items?
Place the menu where it’s easily accessible
Since the menu was the number reason why users visit a restaurant website, it was important to place the menu on the homepage, above the fold, where users can easily access it.
Below the fold, popular menu items with pictures, labels and descriptions were showcased. This gives users another way to immediately get a feel of the top menu items and view all the dishes.
Make the menu scannable
On the menu page, include the menu item name, price, picture and description so it’s easy for the users to read.
The menu is also organized into sub-categories. This way users can click through all the different menu options without having to scroll too long.
2. how might we help users know the restaurant serves authentic filipino cuisine?
Provide reviews and testimonials
5/5 users interviewed said they always read reviews about a restaurant before visiting so they know the food will meet their expectations. Reviews are also especially helpful for people who are looking for a specific cuisine and want to know if the food is authentic. Because of this, it was important to include the reviews and testimonials on the homepage of the website where users can easily find it. A link to the restaurant’s Yelp page was also provided so users can read even more reviews about the restaurant.
Include an about page with owners’ story
A story about how the restaurant got started was important to include because it gives users insight on how Egg Karne is unique from other Filipino restaurants in the area.
3. how might we let users know about other services offered?
Provide page about private event space and catering service
Egg Karne’s social media presence didn’t allow them to easily market their other services - like their private event space and catering. I wanted to ensure these services were easily available for users to see and made a separate page for them.
During user interviews, I discovered that many users were frustrated by other restaurant sites that didn’t have contact information to book private event space and catering. Users also didn’t like when a restaurant website didn’t have an overview of their catering menu or the pricing. Because of this, I made sure to include the following features on this page:
Contact information for both private event space and catering
Catering menu which includes item descriptions, serving sizes, and pricing
4. how might we ensure users arrive to the correct restaurant location?
Provide clear directions and photos
The location of Egg Karne is in a bit of an odd spot - a golf course. I interviewed users who had gone to the restaurant before and all mentioned how the restaurant was confusing to find. Using this information I made sure to include a map (that links to Google Maps) on the location page, directions on how to find the restaurant once users arrived, and both exterior and interior shots of the restaurant. All of these elements help to ensure users are going to the right place when they arrive.
making iterations based on user feedback
testing the initial prototype and making changes
I tested the initial prototype with four different users where I asked them to view the website to learn more about Egg Karne’s menu, catering/private event services, the history of the restaurant, and to find the location. Based on their feedback, I made the following changes:
home page iterations
added a menu description overlay to the popular dishes
before
When users clicked on any of of the popular dishes, they would be directed to the menu page with that item.
after
After usability testing, users said they didn’t want to be redirected to an entirely new page if they wanted to just learn about the single item featured. Now, when a user clicks a popular dish item on the homepage, an overlay will appear with the item description.
menu page iterations
added pictures of all menu items
before
I initially wanted to save space on the screen and include only pictures of the popular items on the menu page.
after
I received feedback from users that it was helpful to see pictures of all the menu items, especially if it’s food from a cuisine they aren’t familiar with.
displayed all menu categories on the screen
before
In the initial design, the user could choose the different menu categories by swiping the navigation bar.
after
After receiving feedback that it would be better for the users to view all the menu categories at once, instead of having to swipe, I added all the categories to the screen.
creating the visual design
updating the branding to reflect the restaurant’s values
creating the logo
Currently Egg Karne’s branding is very plain - black and white colors with an egg and their business name. I asked users what they thought of the current branding and many said it could use more color and also reflect the Filipino culture.
Using this feedback I decided to incorporate the egg shape from the original logo and also add the sun from the Filipino flag in the middle of the egg. Since the restaurant brands itself as a restaurant that serves modern Filipino food with an American twist, I wanted to keep the typeface modern and clean.
before
after
choosing the colors
I chose colors that reflected Egg Karne’s values - welcoming, warm, and friendly. I also wanted the colors to reflect Egg Karne’s menu items (yellow eggs, purple “ube” waffles) and the restaurant space (orange trays and furniture were used throughout the place).
takeaways
focus on users’ top priorities
With the insights from the user interviews I was able to focus and prioritize certain pages (like the menu). I was able to get a deeper understanding of why users liked to see certain details on restaurant websites (like pictures, descriptions and pricing for menu items).
understand the industry standard
Conducting a competitive analysis was extremely helpful with this project. I was able to understand what pages and features are standard when it comes to restaurant websites, and utilize those industry standards in my own website.
next steps
create the responsive website
I’d like to create a real prototype of the responsive website in Framer.
second round of usability testing
Once I complete the responsive website in Framer, I’d like to conduct a second round of usability testing.
