Hasaki Grille & Sushi is a local restaurant in uptown Charlotte in need of a modernized website to fit their recent renovation.
Role: UX/UI Designer and Researcher (with support from my mentor Patricia Machado)
Timeline: 70 Hours
Project Type: Website Redesign
Tools: Figma, Figjam, Google Sheets, Zoom
The Renovation
Project Brief
Hasaki Grill and Sushi is a beloved local restaurant that has been a fixture in downtown Charlotte for approximately 15 years. Situated near major employers like Ally Bank and Duke Energy, Hasaki caters to the fast-casual dining needs of the corporate community. After a recent renovation following a generational ownership transition, the current owner aims to refresh the restaurant’s website to reflect its vibrant new atmosphere.
Finding the Solution
Competitive Analysis
User Interviews & Affinity Map
User Story
Discoveries
By analyzing the website, I identified areas for improvement to pinpoint what Hasaki's site was lacking. While exploring the website, I also noticed there was a lack of branding. I decided to take note of Hasaki’s main colors, themes, and the vibe that they were trying to exude.
Additionally, I determined which features were essential and what is typically included on other restaurant websites. However, I needed to complete more research.
I conducted user interviews with 5 participants to gain insights into users' dining preferences and habits.
My goal was to:
Explore how they find new restaurants to dine at.
Understand their motivations for visiting restaurant websites.
Determine what their typical preferences would be if they worked in an office, along with the reasons behind those choices.
I also created a customer story map to evaluate the end-to-end experience to evaluate the value and opportunities for improvement of the website.
The user story allowed me to understand the emotions and intentions behind the users choices from the initial feeling of hunger, to going out to eat, up until they return home.
Through the user interviews and user story research, I was able to determine that:
4/5 participants are significantly influenced by reviews to decide where they would like to dine.
4/5 participants state that visuals are crucial as they want to see the restaurant’s atmosphere and the appeal of the food.
3/5 participants often face challenges when deciding where to eat.
4/5 participants often opt for cafes or delis during work due to it being a quicker meal.
A busy bee
“I don’t have a long time to eat. I never really finish my food, so I go there to get something quick.”
Ultimately, users frequently feel overwhelmed by the vast selection of menu items and restaurants, and wait times pose a major challenge for those with limited meal breaks.
To address the key insights, these are the questions that guided me through the process.
How can we improve the menu to offer users better recommendations for trying new items?
How can we offer users a more efficient food ordering process to help accommodate their busy work schedules and reduce wait times?
How can we structure the menu to alleviate stress for users faced with numerous choices?
How can we present nutritional information in a clear way without overwhelming the menu?
Key Takeway:
With the key insights in mind, I was able to create two personas to identify and target their goals, motivations, and pain points.
Defining the Target Audience
Personas
Tackling the Problem
User Flow
I created a user flow to organize the menu and alleviate users' overwhelm.
I outlined the design for the individual item screen to support order modifications, display reviews—which greatly impact dining decisions—and provide nutritional information.
Additionally, I plan to add a checkout screen that allows users to select a pickup time for advance orders if they choose to, in hopes of helping to reduce wait times for busy clients with tight schedules.
Moodboard
While putting together the mood board for inspiration, I explored the color schemes and overall atmospheres often found in Asian restaurants. I found that many establishments prominently feature red in their palettes, a color that carries significant cultural meaning and is often associated with luck and prosperity in Asian traditions.
I wanted to incorporate red but also balance it with the restaurant's modern aesthetic. To achieve this, I decided to go for a deeper shade of red, which not only aligns with the cultural significance but also exudes a contemporary feel.
I also wanted to use more sharper shapes to create a modern feel but ultimately ended up choosing more rounded shapes to create a more inviting feeling.
Low Fidelity Designs
I put together some ideas for designing the homepage to effectively showcase images and organize information.
I also created a draft of the menu page to determine how to arrange the items in a user-friendly way that won't overwhelm users.
Idea 2
Menu Pop Up Window Idea 1
I experimented with creating cards and different layouts for the menu, as it’s the most critical aspect of the restaurant’s website. I aimed to identify which layout made the most sense, but I found it overwhelming. I ultimately chose a menu design that highlights images, as users frequently look for pictures of food when deciding what to eat.
Chosen Idea
Card Ideas
Idea 1
Early-Stage Design Selections
The Design Progression
Usability Testing and Design Feedback
When users click on a menu item, a menu overlay appears, allowing them to add the item to their cart or access more information, such as ingredients, customization options, and reviews. I implemented individual item reviews to provide users insight into others’ experiences with the dish, while also giving the restaurant valuable feedback on whether to remove an unsatisfactory item or explore ways to enhance it for a broader audience.
After discussing it with my mentor, I decided to adopt a categorization approach similar to Netflix, which effectively showcases its extensive library by organizing content into genres and personalized suggestions. This method reduces overwhelm by dividing items into manageable sections that users can scroll through. Additionally, Netflix emphasizes visuals, allowing users to click for more detailed information, which inspired me to organize the menu into color-coded blocks for easier navigation through different food categories. The “fan favorites'“ section should also be able to assist with the decision making for users as that was a huge issue from user interviews.
Throughout user testing, there was positive feedback on the menu layout and navigation, however, participants did mention there were inconsistencies within the text spacing and too high contrast in color.
I remedied that by creating more spacing to separate sections easier. I also added a touch of color to better categorize items and decrease the contrast in color.
Usability testing revealed that participants found the "see more" icon difficult to notice and suggested that displaying the menu upfront would reduce clicks.
To improve information hierarchy, I reorganized the layout to highlight key details like total reviews and allergen information at the top, as participants expressed a preference for seeing allergen details upfront.
Additionally, it made sense to position the total reviews prominently alongside individual item reviews.
After a user adds an item to their order, participants noted a lack of clear confirmation that their order had been updated. The existing icon in the top right was inadequate, so I implemented a popup displaying their order, providing a clear indication that the item had been successfully added.
Low Fidelity
Additionally, offering a straightforward feature that allows busy corporate workers to order food online in advance can significantly reduce wait times, enabling them to enjoy their meals as soon as they arrive or to quickly pick up their orders.
During usability testing, one participant pointed out that it was unexpected to find this option at the end of the ordering process. In response, I moved the feature to the beginning, making it easier for users to specify their preferences right away.
The Final Addition
Iteration 1
Final Design
Iteration 1
Iteration 1 - Expanded
Final Design
Iteration 1
Final Design
Glimpse of the Final Design
Interactive Prototype
Lessons Learned
Shifting Perspectives
This was my first experience redesigning a website. Initially, I intended to focus solely on enhancing its aesthetic appeal, as the original site felt outdated and lacked a polished presentation. However, after reassessing the target audience, I realized there was a valuable opportunity to improve the site by minimizing wait times. This experience taught me the importance of frequently shifting perspectives to uncover new avenues for improvement. It's easy to become fixated on a single idea, so adapting and employing various research methods is crucial to identifying opportunities. Through evaluating users' emotions in their user stories, I discovered the frustrations they encounter when deciding what to eat and dealing with long wait times.
Fun Insight
Additionally, user testing revealed an interesting insight: people often turn to Google Maps for reviews and food photos, rarely visiting restaurant websites. While reviews significantly influence their dining decisions, most individuals seldom leave feedback themselves.