Established in 2018, Egg Karne is a breakfast/brunch cafe located in Herndon, Virginia serving a fusion of modern Filipino flavors and American classics. The food is inspired by family recipes from the Philippines and perfected in Virginia. Their focus is on simple, fresh food, locally sourced.
project overview
role
deliverables
timeline
User Persona
Task Flows
Wireframes
Branding
Hi-fidelity Prototype
UX/UI Design
Visual Design
UX Research
Usability Testing
80 hours
problem
Venmo does not offer the option of setting recurring payments to date and this is one point where users find it different and often troublesome compared to other money transfer apps which allow the setting of recurring and scheduled payments. Instead, users have to constantly request payments from other users for routine expenses like rent, utilities, etc. The lack of recurring payments leads many users to seek an alternative since this application is not the best for paying regular bills with friends, roommates, family, etc.
goal
Add a recurring transaction feature to make it easier for users to pay or request routine expenses
understanding the user’s motivations through
research
user interviews
who was interviewed?
Four different people who are:
Familiar with using the Venmo app
In Venmo’s target demographic (age 18-34)
Most likely to use the recurring feature in Venmo, e.g. people who’ve used the Venmo app to pay or request routine expenses
users’ top priorities when visiting a restaurant website
5/5 users - seeing the menu
4/5 users - making reservations
4/5 users - ordering online
5/5 users - reading reviews
users’ top challenges when visiting a restaurant website
Menu information isn’t up to date
Links aren’t working
Stock images of food
No menu pricing
Menu is hard to find
devices used while visiting a restaurant website
4/5 users use a mobile device while visiting a restaurant website
users’ motivations for using different platforms to learn about a restaurant:
Restaurant website - to view quick info about the restaurant including:
Menu
Contact Info
Online Ordering
Reservation
Location/Hours
Yelp
Reviews
Photos
Photos of food and restaurant
General ambience of restaurant
competitive analysis
I conducted a competitive analysis with other peer-to-peer payment sites that are either direct or indirect competitors with Venmo. This helped me see which products are currently already solving the problem of requesting or paying recurring transactions.
through user interviews I wanted to
Why users use Venmo over other peer-to-peer payment sites
What users most commonly use Venmo for
How often users use Venmo
How useful a recurring transaction feature would be
If the user currently uses auto-payments on other sites
user persona
Based on the research findings, I created a persona with the user’s needs/goals, motivations, and pain points in mind.
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, pictures and item descriptions?
ideating solutions
developing task flows
Based on the information from the user persona, I created a task flow with the users goals in mind:
Finding the menu
Finding the location/hours
Learning the history behind the restaurant
mid-fidelity wireframes
the home page
Based on the user research, the top reasons users look up a restaurant online is to:
View the menu
See online ordering availability
View pictures of the food
Read reviews
Find the location/hours and contact information
Since these were top priorities for users, I decided to include all of this information on the home page so it was easily available for users to find.
Based on feedback, I chose which low-fidelity sketches I wanted to create in mid-fidelity. 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 desktop version.
high-fidelity wireframes
low-fidelity wireframes
I created multiple sketches for each screen/page on the site. I wanted to brainstorm a variety of ways to lay out the site and see which layouts would be the best option for the user. After receiving feedback on my low-fidelity sketches, I created the mid-fidelity wireframes.
feature and site map
After finalizing the task flow, I created a feature and site map to organize the structure of the site.
Based on user interviews, competitive research, and the business goals I knew I needed to include the following pages on the website:
Menu
Order Online
Location/Hours
About
Contact
In addition to the pages, I also also wanted to include the following features on the website:
Testimonials
Links to social media/review sites
Pictures of food
Map/directions to the restaurant site
I created the order of the pages based on the importance to the user. Since all users interviewed wanted to see the menu on a restaurant website I included the menu first, then online ordering page, location/hours, about, catering/events, and last - the contact page.
the menu page
The menu was a critical page to get right on the website. All users interviewed said the main reason they go to a restaurant website is to view the menu. Based on user research, the menu should include:
High quality pictures of the item
Item description
Prices
I included all these features on the menu and also decided to organize the menu into sub-pages based on the menu item category. This way users can click through all the different menu options without having to scroll too long.
the hours/location page
Another important page to consider was the location/hours. 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 you 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.
the events/catering page
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
the contact page
A contact page was another important feature to include for users. This way users have an easy way to ask the restaurant about a variety of topics. I decided to include a dropdown of inquiry topics so users can easily choose what they’re messaging the restaurant about without having to type a whole message. This also helps the restaurant owners easily filter the messages they receive based on the inquiry topic.
usability testing
testing the initial prototype
After creating the prototype, I conducted a usability test where I tested the mobile version of the site with three users. I based the tasks on the initial task flow.
Task flow #2: Find the location/hours
Task flow #1: Find the menu
usability test results
Task #1:
100% completion rate
Task #2:
100% completion rate
What worked:
What didn’t work:
One user thought it would be helpful to highlight the page you were on in the navigation menu on the mobile site
One user thought it would be helpful to have an overlay appear when you click the picture of the dish on the homepage instead of it taking you straight to the menu
One user would like a brief description/definition of the different Filipino items like “ube”
Task flow #3: Read about the history of the restaurant
Task #3:
100% completion rate
100% of users said completing all three tasks was a very easy and simple process.
100% of users liked the menu and they all thought the pictures, descriptions, and pricing were helpful. Users also thought it was easy to toggle through the different menu item categories.
100% of users thought everything on the home page was helpful. All users liked that the menu was easily accessible on this page.
iterations
Based on the feedback from the usability testing I made the following changes to the prototype:
highlighted the menu page on the navigation bar
Users found it confusing to know what page they were currently on when they clicked the navigation menu. To prevent this confusion, I highlighted the navigation item so users would know which page they were on;.
final prototype
added a menu description overlay to the popular dishes section on the homepage
In the initial prototype when a user clicks the picture of a menu item under “popular dishes” on the homepage, the user would be taken to the menu page.
I updated this action so when a user clicks the picture of a dish an overlay will appear with the description of the item instead of the user being navigated to an entirely new page.
added brief descriptions to Filipino menu items
Users who weren’t Filipino didn’t know the definition for certain menu items. To clarify some menu items, I added definitions to food items that may be unfamiliar to customers who aren’t Filipino.
creating the visual design
updating the branding to reflect the restaurant’s values
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 modern Filipino food with an American twist, I wanted to keep the typeface modern and clean.
For colors I wanted to go with something more fun, bright and welcoming. Egg Karne is a breakfast cafe, so I wanted to play on the colors of the morning sun and colors associated with an egg so I went with yellow and orange. The restaurant also has bright orange furniture and plates which ties in nicely with the orange in the logo. I also included the deep purple color since it contrasts well with the orange and yellow. Purple also ties into the Filipino ube ingredient found in several of Egg Karne’s most popular dishes.
what i learned
focus on users’ top priorities
With the insights from the user interviews I was able to focus and prioritize on certain pages and features. 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’m currently working on creating a real prototype of the responsive website in Framer
Once I complete the responsive website in Framer, I’d like to conduct a second round of usability testing.