Kitaro Sushi

Project overview

During the pandemic, a lot of small businesses suffered especially those in the food industry. So when given the opportunity to help a small business revamp their digital presence - I jumped at the chance.

When I first heard about Kitaro Sushi, I remember hearing about how amazing the food was and how poor their website was. The moment I opened up the website, I knew that this was the business I wanted to help.

I aimed to redesign Kitaro Sushi's digital experience to boost up their Yelp and Google reviews.

Problem:
Kitaro Sushi patrons find it hard to place food orders over the phone

Solution:
Redesign the current Kitaro Sushi website to include a seamless online ordering system

Impact:
Increase in the number of online orders with zero to no mistakes in the order

Project:
Unsolicited project guided by a Mentor

Deep Dive

It was important to start off the project by taking a deeper look into Kitaro Sushi's online presence!

What is going on with their current website?

The first step was to analyze the current Kitaro Sushi website. I really wanted to understand what was going on with the interface and
I used the 10 usability heuristics formulated by Jakob Neilson.

What do their patrons think?

The second part of the deep dive involved seeing exactly what their patrons thought of the restaurant and their food - so I conducted a user generated content analysis (basically I took a deep look into their yelp reviews).

Going through their yelp reviews, I was starting to have a good idea of what was and wasn’t working for the business and the struggles of their customer base.

What customers did not know about the Kitaro Sushi?

10% Off

10% off of the bill if you pay with cash, have a valid student or military ID

BYOB

They are a BYOB restaurant so customers can bring any drink of their choice while dining in

What did customers love about Kitaro Sushi?

Lunch special

Their daily lunch special is a customer favorite

Food quality

Food is made to order, “fresh”, “authentic” and flavor full - and super “affordable”

What was frustrating to the customers?

Placing orders

Placing phone orders is often a frustrating experience

Ambience

Hate eating indoors as the ambiance is very poor

Establishing a persona

Stalking Kitaro Sushi on Yelp gave me really poignant insights as to where they are struggling but it also gave me an insight into who their target audience was:

Hana is essentially looking for a meal that is cheap, healthy, and delicious. She needs to be able to place their orders quickly without losing time in between meetings or classes but she does not want to sacrifice the quality of her meal - because then what was stopping her from eating fast food every day?

Mapping out the scope

Before jumping into the solution, it was important to map out the business pains/goals along with Hana's.

But wait! Why doesn't Hana or Kitaro Sushi just use a meal delivery service like Grub-hub or DoorDash?

Great question! The reason we want to avoid a meal delivery service is because they are not actually good for small businesses - read more about that here.

Problem Statement

“How might we redesign the Kitaro Sushi website experience for customers so that they can place an error-free online order through the digital platform?"

What is the competition doing?

Before jumping into sketching out ideas, I wanted to see what other Sushi restaurants were doing in Dallas. They all offered a variety of different features:

Some of these restaurants were not “family-run” businesses and had chains or a more established fine-dining background so not all of these features could be included in the website re-design for Kitaro Sushi.

Mapping out the interiors

If I was going to redesign the Kitaro Sushi digital experience then the first step would be to map out their site architecture.

This is their current site map:

This is the new proposed site map:

Some key changes include:

Including “order now” and “make a reservation” CTAs on the navigation menu
Having CTAs on their landing page
Have more information about the restaurant on the landing page

Why these changes though? It is important to remember that Hana wants a seemless ordering process AND wants to feel confident in the food that she buys.

Sketches

I quickly sketched out a few ideas to get my creative juices flowing:

Landing page

Reservation page

Mid-fidelity wireframes

Before diving straight into Figma, I used Whimsical to flesh out a task flow to help me visualize the different screens Hana would need to place an order online:

As I fleshed out my task flow, I simultaneously started creating my mid-fidelity wireframes. The key was to get peer feedback or mentor feedback on the screens so that I could either validate or make appropriate changes to the designs.

The “order online” wireframes went through the most amount of iterations:

Original wireframe had a continuous scroll pattern

The next version introduced the nav bar and search bar on the left with no header

The final version ended up with the search bar nestled underneath the header

The menu was laid out in a manner that allowed Hana to quickly peruse and add food to her cart. She also had a visual representation for her cart, which gave her the power to remove or modify her order without having to click elsewhere on the screen.

These are a few of the other screens:

Check-out page

Order confirmation page

Time to make it pretty!

Giving Kitaro Sushi a UI makeover was a very exciting part of the design process! I explored color, and typography to create a detailed design system.

These are a few of the key desktop screens:

These are a few of the mobile screens:

Testin' time

I recruited 5 individuals from my Bootcamp discord community who were avid lovers of sushi and were very familiar with ordering food online. I conducted a remote moderated usability test that had the participants use the “Think Out Loud” method to complete the following task:

Place a lunch order

Findings and revisions

For the first task, the users were able to complete the task with a 100% success rate. All 5 participants described the ordering experience as “very intuitive” and it felt super “easy” to do.

Before checking out, I asked them to change the quantity of the order and 3 out of 5 participants were able to modify the quantity of the order on the check-out page. But the other 2 participants went back to the original screen and re-added the same menu item however, they were unable to find a "back" button.

To help them with this I made the following changes:

View prototype

Okay, so what’s next?

It is very important for me to reach out to the owners of Kitaro Sushi and approach them with this pro-bono project.

But before do I that I would need to clarify for myself and the business how I would measure the impact of this new redesign:

The number of online orders versus phone orders
Increased positive views on Yelp/Google reviews
An increase in the number of error-free food orders