Waikiki Grass Shack Bistro’s app goes beyond a normal menu app by allowing customers to choose their food before even stepping a foot in line—allowing them to take their time without holding up queues. WGSB’s app provides a QR code of the customer’s order that is scanned at the counter, making fast food fast again.
To stay true and transparent, WGSB lets customers submit photos of their orders which can be added to the menu for future and returning customers to see.
The problem
Non-native speakers have trouble communicating and ordering food items when traveling to a vacation destination like Hawaii.
Photos of menu items are often misleading and don’t match what’s on the actual plate.
The solution
To create a menu app that doesn’t hold up queues by making it easy and convenient to order.
The solution will also allow users to see past reviews—making them more confident in their order.
User pain points
1
Food menu descriptions don’t show or match the actual food presentation
2
Online menus can be difficult to navigate
3
Text heavy menus in apps are often difficult to read and order from
4
Online/Apps/QR menus take away from the restaurant experience
Personas
Primary
Name: Andrew Kahale
Age: 38 years
Hometown: Honolulu, Hawaii
Occupation: Whale photographer
Andrew is a whale photographer who spends most of his days out on a boat, without signal. He enjoys planning quick lunches and dinners in advance for his colleagues and visiting scientists. Ordering in store can be overwhelming as visiting clients don’t know the local foods, but placing an order in advance can be difficult as timing can be tricky when out on the field.
Secondary
Name: Valentina Alcalde
Age: 24 years
Hometown: Madrid, Spain
Occupation: Nurse
Valentina and her wife love traveling. During their trips, they like getting food to go and eat it while adventuring. However, food menus can be confusing and intimidating, especially in places where they don't speak the language.
Valentina would like for there to be a way for her to order food efficiently without having to attempt to speak a different language and not risk getting something they may not enjoy.
User journey
P&P wireframes
Before moving into digital designs, I wanted to get a feel of what the app would feel when put in front of users.
Lo-fi wireframes
Affinity diagram
After going through the first usability study I had to find themes and insights as to what to solve.
Wireflow
Menu
Understandable by users
My goal was to create an easy-to-understand menu with user-friendly visuals. A lot of the time, users can't comprehend the visuals that apps throw at them.
​
I solved this issue by using icons to help users of all nationalities understand on a more familiar level.
​
I also wanted to give tourists and new users a guide for them to order from. "Crowd favorites" solves this by showcasing items with the best reviews and real customer photos.
My favorites
Fluent, fast, efficient
A goal of mine was for users to have easy access to their favorite items in order to decrease unnecessary time spent browsing.
​
After the first usability study, I realized that most users wanted their favorites categorized, so I created a section for each type of food item.
​
My order
Fast counter checkout
Ordering in advance can be challenging when you don't know the exact time you will be arriving at the restaurant.
​
According to my research survey, around 70% of users get overwhelmed and anxious when ordering from a new place, especially when there is a line behind them.
​
My goal was to achieve a quick and easy counter checkout.
With the scan of a QR code, users can provide the cashier with their order and pay. This speeds up checkout and helps improve communication for international users.
Profile
Transparent and positive user relationship
Doing research, I found out that most users get disappointed when their food order doesn't match their expectations.
​
I wanted the Waikiki Grass Shack Bistro menu app to have a fully transparent relationship with users. For this reason, I added the option for clients to leave both typed and photo reviews of their ordered items.
​
Recurrent users will also have the option to earn rewards.
Style guide
Utilizing a loud gradient consisting of lime greens contrasting with a popping purple felt like the perfect fit for Waikiki Grass Shack Bistro. The lime green helps evoke a fun, happy feeling from users and when paired with the purple, it creates a nice balance that feels energetic but organized.
The main typeface of choice for the app is Poppins. I felt this typeface best fit the app due to it's extreme versatility through uppercase and lowercase styling, as well as dark and light text fills.
My takeaways
Working on the Waikiki Grass Shack Bistro menu app was incredibly rewarding. I got to experiment with Figma and some of its new features. I thoroughly enjoyed fully being part of the design process from researching to final prototyping. Although I was not able to fully flesh out other features and designs like I would've liked due to time constraints, I am very excited to implement the things I learned and more in future projects.
Don't forget to check the process below!