Umi Sushi is a local Japanese cuisine restaurant established in 2008
My role
User research, prototyping, UI design
Designed responsive website
Brand Identity
Tools Used
Sketch
Adobe Illustrator
Invision
Timeline
2 weeks
Summary
Now a days, it is common to see people look up the restaurant in advance to pick where to eat. More and more mobile device usage brings increased traffic to mobile version of restaurant site.
The goal of the project is to restructure the site to follow common patterns of other competitors so that even newcomers will feel familiar with navigations. Learn and implement features that serve user’s frustrations based on research.
The end product is a freshly rebranded responsive website for Umi Sushi. The site help users learn the menu with images and details that meets both the customers and restaurant owner.
👁 Discover
Market research to find out who are general target to conduct user interview
Through digging around online for publicly available statistics and demographics, I could narrow down to 3 different provisional personas who would be coming to Umi Sushi website.
“56% millennials are open to trying innovative cuisines.”
“84% of people in 18-34 have tried sushi, but only 50% of seniors.”
“4,000 sushi restaurants are around the country today.”
“People are looking for Healthier Diet.”
Looking at provisional personas, I tried to interview people with such characteristics. Biggest difference between participants were the age group.
To discover frustrations in current site and behaviors, I focused on these questions:
How they research restaurant
Why do they visit the restaurant site
Provisional Personas
Empathy mapping to discover common patterns of the users
Total of 5 participants were invited for user interview. All of the subject need to be current customers of the Umi Sushi to directly ask their experience on the site. Through synthesizing over empathy map, I learned that customers often check for prices, portion, and new menus.
4 of 5 said “I need the range of prices of the menu.”
4 of 5 said “I would like to know if this menu has enough portion.”
4 of 5 said “I am interested in learning new menus”
🤔 Define
User Persona to define the customers
Synthesizing data from empathy map, I created persona “John.” He is created from patterns I found from empathy map which then can be used for making design decisions. He may not cover all types of users but will cover primary users which I meant to focus for this project.
Came up with HMW questions to spark ideas for features
To start ideating, I wrote down HMW questions that is not too open ended but inspiring enough be creative. In order to do so, I brought insights and needs from empathy map. Then I created point of view statement for John to form a HMW question.
For brainstorming, I followed these steps:
Generate ideas on HMW question for 2 min.
Do the same for rest of questions.
Repeat previous steps for all questions again.
Opportunity Areas
Trying to come up with as many ideas as possible resulted in various wild ideas. I reviewed ideas to determine if this will benefit the user persona, John. Also it was important to think about what are some common goals for the owner of the restaurant and the customers using the site.
Detailed Descriptions
Provide exact image of the food easily identify the food and shows calories for portion of the food.
New Menu Indicator
Present new menus in landing page and mark them in menu page.
Modeling off of competitor websites to design familiar structure
Current website had ineffective and unusual structures and navigations. While referencing other competitor’s sites, I picked out commonly used pattern to ensure easy navigation even for newcomers of the site. Based on the pattern, back bone of the site is visualized in site map.
User flows for capturing experience of John finding information about the menu
Based on user persona John, I created specific scenario which in this case is finding menu for his dinner. I explore his actions and decisions in task flow & user flow to find out numbers of pages needed and right placement for features. Using modal screen for menu, customers can view details and close to keep browsing rest of the menu.
✍️ Design
Designed each screen to look similar to user’s most used apps for easier navigation
Started out from sketching on paper to making mid-fidelity wireframes in Sketch. While designing I made sure to entice customers with big menu pictures for better conversions. Since our user persona John’s need was to find new menu, I picked newly added menu to display on the front page.
Once I was happy with the desktop homepage, I moved on to making responsive designs for tablet and mobile phone. I tried to have consistent font sizes and each images to avoid complicating engineering teams work, based each layout from bootstrap grid.
With a short timeline, I decided to focus on making prototype on desktop version of the site to conduct moderated usability test. I’ve designed all screens on Sketch, then turned it into interactive prototype with invision.
Participants: 5 users, 23-33 years old.
Restrictions: People who searched for restaurant in past 4 months.
Tasks:
Checking price range of the menu
Finding out portions of the menu
Learning about the restaurant
Calories does not help to figure out portion
Reviewing interview results through affinity map, I noticed that users had hard time estimating portions just by the calories of the food.
Some had hard time understanding instructions on ordering catering menu. These confusions will later addressed on high fidelity prototype.
Completely rebranding to fit the restaurant and target customers
The Japanese word Umi means “wave.” With my choice of colors I wanted to have orange for the sun that represents the Japan. Light turquoise blue used in brand color can be seen when the wave hits the ground and break.
Here are some explorations.
✨Deliver
Showing weight of protein to give accurate information on portion
After testing the first draft of prototype, participants did not see the point of knowing calories. In menu description, with the protein, specific oz. is recorded.
More organized instruction on ordering catering menu
Previously instruction were recorded in small block of text. A lot of participant just ignored those text. To make sure they read them, I added title “How to order” and divided into small steps for easier understanding.
Conclusion
I created responsive website by discovering average users through market research, finding problems from interview of customers. I focused on implementing features in menu of the Umi Sushi. The first prototype was tested for it’s usability and minor fixes were made to perfect user experience. The rebrand was based on existing brand yet aimed toward user persona we created from interview.
Lessons
When creating prototype, it is easy to just focus on visual, but it is important to remember that you are designing for the user. Printing out user persona and putting next to the monitor helped.
Next Steps
Test Mobile version prototype.
Photoshoot actual food images for menu page.
Ready files for hand-off.