top of page

KoKoLo Donburi

The ultimate app to streamline menu exploration, food reviews, online orders, and loyalty rewards program effortlessly for KoKoLo Donburi new and returning customers!

Duration

March - April 2022

My Role

End to end UX designer

Type

Mobile • Concept • Solo

Tools

KoKoLo Splash phone.png
  • Figma
  • Photoshop

Overview

KoKoLo Donburi is a Japanese restaurant chain located in Northern California. Working with current customers as well as food connoisseurs to understand their needs, I created an app for KoKoLo Donburi customers to be able to view food reviews as well as easily order all in one place.

Goals

1. Create a dedicated app for current and new KoKoLo Donburi consumers and adhere to their wants and needs.

2. Implement a system that incentivizes customers to write reviews and increase customer retention.

INITIAL STAGE

To get a better understanding, I asked myself a few initial questions. Who is the targeted users? What are some frustrations that users may have? Which features would users find the most important? What would make the interface familiar and easy-to-use? Having five participants fill out an initial survey, one main unanimous finding was that majority do not download dedicated restaurants app unless they frequent often, offer a quick order solution, or some kind of incentive.

COMPETITIVE ANALYSIS

Although there is no direct competitor who has a dedicated review app. I conducted a competitive analysis in order to get a better understanding of existing review apps. I considered Yelp, Foursquare, and EAT24 in my audit and cross examined each app on it's general information (business size, target audience, and what makes it stand out), first impression (desktop and app versions), interaction (flow, features, and usability), visual design, and it's content.

I was also inspired by widely used franchise dedicated apps such as Starbucks and McDonald's in order to understand and implement a reward system for customer retention and participation.

USER TESTING

PRIMARY

avatar.png

Name: Priscilla

Age: 22

Occupation: HR

Priscilla is a friendly recent graduate who loves to go out and eat with friends. Unfortunately, she has difficulty ordering from a menu with vast choices and would prefer to be able to look up food choices ahead of time. Due to her indecisive nature, she has ordered the same thing every time she has come to KoKoLo Donburi.

SECONDARY

download20230202151613.png

Name: Stephanie

Age: 35

Occupation: Accountant

Stephanie is a very busy accountant at a big firm. She frequents KoKoLo Donburi since it is very close to her office. In order to save time, she wishes to place orders ahead of time and grab her order quickly without having to wait in line.

Using the competitive audit as a comparison, I got an idea of mapping the user flow. This helped me put myself in the user's shoes and understand the path they would take to view items, read reviews, order from the app, as well as write their own review.

USER FLOW MAP

STORYBOARDING

Paper & digital wireframes

From the initial paper wireframes, I transitioned to digital wireframes choosing the features that I thought would be the best for the user journey. A simple low fidelity prototype was made by connecting the screens and then later tested through a unmoderated usability in order to make adjustments. 

Frame 1 (1).png

Key Insights (1st Usability Testing)

In an unmoderated usability test, I gathered 3 participants who has dined at KoKoLo Donburi before and 3 participants who has never eaten there before to test the lo-fo prototype. Although some users found it difficult to navigate without pictures or text, I managed to understand a few vital context listed below that needed to be implemented before moving on to high fidelity.

Users felt incomplete without a sign in page

There was no indication to which page the user was on

Users felt lost where to go if they were to write a review later

Checkout confirmation page

needs a location indicator

No button for accessing favorited items

Branding

COLORS

TYPE

#F2000F

#000000

#FFFFFF

#EEBD4D

BUTTONS/MENU

refining into high fidelity

After creating mockups as well as sticker sheets from the previous adjusted lo-fi wireframe from the usability test, I created mockups with color, fonts, and images. Later I connected the screens in order to create a high fidelity prototype then had users re-test it through a unmoderated study in order to make any further adjustments.

1. Create a dedicated app for current and new KoKoLo Donburi consumers and adhere to their wants and needs.

Using the same colors as KoKoLo Donburi's existing brand, I created an interface for customers to easily navigate through their menu, read other user's reviews (if they would like to), and place an order through the app.

2. Implement a system that incentivizes customers to write reviews and increase customer retention.

A points rewards system was implemented to encourage users to create an account, place future orders, and write their own reviews. These points can be exchanged for menu items existing on their menu.

PROTOTYPING

Screen Shot 2023-02-25 at 1.13.06 AM.png

KEY INSIGHTS & ITERATIONS

Another usability testing was conducted with the same 6 participants previously, this time with 4 unmoderated and 2 moderated. Users navigated the app with more ease compared to the low fidelity prototype, but a couple of insights were noted.

Front view (4).png

1. Looks for like an ordering app rather than focusing on reviews

The home page was more focused on the menu and favorited items. Most testers found that it took away the main purpose of being a review app. Iterations were made to feature the most 5 recent reviews.

With further study, it was expressed that UI did not seem consistent with each page, a couple of minor coloring was later changed for better readability and consistency.

2. Navigation for reviews, points, and favorites were confusing

During the testing, it was observed that users found navigation to find their favorites and recently ordered items difficult. Therefore, the best solution was to keep the navigation in one page.

Front view (6).png

3. Needs a better indication that lets users know something is in their cart

Although there was a popup confirmation to let users know that an item was added to their cart, there was no indication that let users know how many items were in their cart, this also lead to a visibly unnoticeable icon and took users a couple more seconds to locate the cart on their screen than intended. 

The new design contains a number representing how many items are in their order as well as a red dot to draw the eye towards it.

Some users also expressed that they did not find tags useful if there was no filtering or sorting purposes, so a decision was made to remove that feature to leave a cleaner look in the UI.

SUMMARY & TAKEAWAY

The main thing I found intriguing was that testing low fidelity prototypes were difficult, especially since most users were unsure of what each feature was given they were only squares and lines. Next time, I want to find a better way to test these frames or omit this testing and focus on 2 testings for high fidelity instead. Given more time, I'd test the hi-fi prototype again with new users and make revisions to the design based on their feedback. 

During this process, I worked with KoKoLo Donburi's business goals and user goals identified through research. I set priorities and brainstormed features based on these goals, sketched my ideas, and created basic mobile designs. I created a prototype for users to test, then improved the prototype further.

Currently, KoKoLo Donburi doesn't take mobile or web orders, but if they were to change this model, I would gladly take on the challenge of designing a refined version of this app to align closer with their goals/needs and create a website for them.

bottom of page