Separate_block

Sen dai sushi

This project is the result of my study and practice on the redesign of an existing website of my favorite sushi restaurant in the area I live.

Separate_block

Background

At the moment I started working on improving their web site Sen Dai sushi had already offered pickup or delivery only.
Their preferred way to order was via Grubhub (pickup) they also provided delivery via Doordash and Uber Eats.

The picture below shows how the original website looks now and how I suggest it should look.

Separate_block

Before/After

Separate_block

Challenge

Increasing online orders due COVID-19 lock down.

Separate_block

Solution

Making the website more useful and visually attractive may increase number of views and orders.

Separate_block

Proposed user experience

Consistent CTAS to simplify the conversion process.
Add menu to the website to give to users more information for making an order.  
Separate delivery and pick up options in nav bar because both provide with different companies.
Renew visual design to make site look modern.
Design refresh to reflect standard web components.

Separate_block
Separate_block

Opportunity

New design helps users to make an orders quickly and easily.
It could help drive efficiency of orders placed.
Having an informative home base for rest well drive credibility and brand awareness compare to food service.

Separate_block

Self-reflection

Does the restaurant need mobile app? It help with reservation when rest will be open to eating inside.

Separate_block
Separate_block

Case study

Research

My first idea of making the website better was to add an opportunity to make an order directly through their website. I thought it would be less confusing to people to stay on the main site to make an order.
I’ve started working on this project right when we all were in our first weeks of shelter-in-place rules. That’s why I decided to conduct a survey to understand how people want to order their food in this new environment.

Separate_block

Survey

I did a research on Facebook to find out groups with people talking about their food delivery experience.

I put there most important questions, like how often they still have food from restaurants, whether they prefer take out or delivery, what could affect their choice and which order services they prefer.

Separate_block

"Firstly, people have no preference between delivery or take out"

"Most of the responders use Google Search or Yelp to find restaurants and make an order"

"It should be crucially important that the restaurant page looks good"

Separate_block

Interview

I decided to select a smaller group of people and interviewed them to get more quality information.
I had many valuable answers, but there was one very special that helped me to understand how I could make that website better.

The main concern from all those people I talked to was the lack of real life experience.

That’s why it was very important to re-create that environment on the website, to make people think they are almost in that restaurant. The best way to achieve that is to add visual information. In my case it were photos of most popular positions from menu.

Separate_block

Competitive analysis

There were two other popular sushi restaurants in my area. I also decided to add one more restaurant from a similar cuisine that had a pretty good website.

One of the main results from it was that some of those restaurants had the opportunity to make orders directly from the website.
This correlated with the survey results and could be really a good point for my website design, but as I had no chance to talk with the stakeholders I decided not to proceed this way. There could have been business reasons to have partnership with Grubhub.

Separate_block

Information Architecture

My research and interviews helped me to think throughout the information architecture.
It was important to make it clear for the users how to make an order, that’s why I updated the name and position of that button. One more big change is the separation of the pickup option from delivery.
I also decided to keep the information about that restaurant, their location and working hours on the main page, but made it more visible. This was reflected in my wireframes.

Separate_block

Site map

With all the results in my hands I was able to create a site map.
As it was found in my research, both options, takeout and delivery are important and that’s why I tried to separate them and make site navigation easy to follow. It was also important to have a possibility to look at the menu right on the main website, so, I added it as well.

Separate_block
Separate_block

Separate_block

Task flow

Here is my view of the task flow to show how users will navigate when they know what they want to get, either a pickup or order a delivery. I’ve also separated two types of users, regular and who just came to order for the first time.
A regular user expects to have less steps.

Separate_block
Separate_block

Separate_block

Wireframes

I created blueprints for all devices, including desktop, mobile and tablet version. They represented the arrangement of the website content with interface elements and navigation system and how they interwork.

Separate_block
Separate_block

Visual Design

Sen Dai Sushi founders describe the restaurant as a cozy family place with fast comfort food and gracious service.
I looked for inspiration on Pinterest and googled Japan-related photos. After collecting the necessary photos, I made a mood board and chose a color palette for the site.
Also, I updated the logo. For this purpose, I've chosen a LEMON MILK font.

Separate_block

Moodboard

Separate_block

Menu design

One of the most challenging parts of my work was creating the menu.
I took menu items from the Sen Dai Sushi page on Grubhub, and I built the menu for all three responsive versions.
I also created a visual symbol with new website colors that looks like a fish.

Separate_block

Separate_block

Prototype

Now hold on for a second and watch a short video with prototyping.
I wanted to demonstrate in an easy and nice form my responsive design for all types of screens created.

Separate_block

Separate_block