Mokutan: Website Redesign
Defining the Problem
As shown in the current website images, the design really lacks an overall theme with hardly any color used throughout. The visual hierarchy needs a lot of improvement and it’s very text heavy, making for a poor user experience while navigating the site. The website just has the bare information and it feels neglected from a design perspective.
Overview
Mokutan is a new Japanese restaurant in Santa Barbara, CA that is looking for a website redesign in order to gain local traction and improve their internet presence.
Role
Sole UX Strategist and Designer.
Problem
Mokutan’s current website is very bare and neglects many key design principles. I was tasked with redesigning their website to improve the overall usability and the responsiveness.
Research
Competitor Analysis
Before redesigning Mokutan’s website I needed to research the current market. Competitive analysis was conducted with a major focus on local restaurants in Santa Barbara since they are direct competitors in the restaurant space.
KEY TAKEAWAYS
Every website has some kind of image carousel of the food and ambience of the restaurant
Each has a page dedicated to just the menu
Every restaurant has a contact page where users can find their different locations and contact information
They all follow a similar organizational structure throughout
Some restaurants lack good contrast so some sections were hard to read
Some sites are very text heavy in certain sections which could deter users from navigating further throughout the site
A lack of hierarchy for some restaurants which makes their links and buttons difficult to understand and use
Survey
After surveying the current market by analyzing local websites I wanted to survey users/patrons to understand their restaurant preferences and how they rate different characteristics of a restaurant.
KEY TAKEAWAYS
The most important website features customers look for are reviews, location, and food/atmosphere
Reservation options are a low priority when choosing a restaurant
Downtown Santa Barbara is the most popular region to go out to dinner in the city
Pictures of the food plays a significant role in choosing a restaurant to dine at
User Persona
After compiling and analyzing the survey data I was able to create Jeff, the user persona. He is a huge foodie and primarily uses his social media profiles to post pictures of food and new restaurants he’s discovered. Before trying a new restaurant, Jeff needs to be able to understand the atmosphere and the quality of food presentation. It’s also a plus for Jeff if a restaurant is in the lively downtown area. Jeff’s perspective was taken into account throughout the rest of the redesign process.
Design
Wireframes
The main focus was initially on the homepage as all direct competitors had a compelling landing page consisting of image carousels, pictures of the restaurant, and overall lots of color.
I had the chance to meet with the owner to go over the sketches and explain the design decisions that went into each of the potential elements in the sketches.
He liked the idea of showcasing every part of the restaurant right on the landing page: the food, reviews, and the ambience of the restaurant. After sharing my overall vision of the website through sketches, he was excited to see the next steps.
Style Tile
After meeting with the owner on sketches and wireframes, the next focus was replicating the atmosphere and feel of the physical restaurant through the styling of the site. The owner put a lot of emphasis on natural decorations like plants and exposed wood throughout the restaurant so I wanted to emulate that in the color palette choices.
High Fidelity Designs
HOME PAGE
MENU
CONTACT US
Test
Usability Testing
After the first iteration high fidelity prototype was complete I recruited 5 participants to help with usability testing.
KEY FINDINGS
Users expected functionality throughout a lot of the website such as clicking on the logo, zooming and clicking on the map, clicking on images to zoom, etc
The mobile menu was difficult to navigate for most users due to a lack of visual hierarchy and some general prototype issues
The menu on desktop was very dense with text, it could use better organization
Iterate
Major Iterations
DESKTOP MENU DROP DOWN:
The menu was an obvious pain point. There was just a lot of text and content to absorb all at once and that needed to be addressed.
I updated the menu to a dropdown with different overlays instead of having all menu text readable at once
Improved general formatting of the text
MOBILE MENU FUNCTIONALITY:
The mobile menu was another pain point I observed during testing. The original overflow function made it difficult to navigate and the overall learnability wasn’t up to par.
The mobile menu functionality was improved by removing overflow scrolling and updating some of the spacing and readability in the mobile format
General formatting and spacing was improved throughout the entire design as well
DESKTOP IMAGE CAROUSEL:
The desktop image carousel brought about some minor confusion.
Carousels were updated to an endless scroll and removed the status dots
Removed hover title effect as users mistook it for a button function
Reflection
This website redesign definitely had it’s share of challenges. The time constraint and owner expectations were the biggest challenges I faced. Although it was difficult at times to manage the expectations of the owner and explain the small scope of this project, I really enjoyed meeting, sharing ideas, and providing updates throughout the research and design process.
Next Steps
Given the time constraints of this project, the iterations were based on one round of usability tests. For future updates it would be great to explore different menu options. Some A/B testing would be valuable in finding what menu format is most preferred and easiest for the users.
Another constraint was with the stakeholder and owner of the restaurant. I tried my best to replicate the restaurant’s menu as we discussed but I think an overhaul of the menu design could improve the readability as a whole.