What if Sugarfish by Sushi Nozawa provided an innovative way to train their employees?
ROLE
TIMELINE
UX Designer
April 2024- August 2024
CLIENT
2Cube
TOOLS
Figma
Zoom
A Company is only as good as the people it keeps.
Sugarfish by Sushi Nozawa, a famous Sushi restaurant with establishments across Los Angeles and New York, takes pride in serving traditional sushi of the highest quality. Open for 15 years, the company continues to grow immensely, in both its number of restaurants and employees. Unfortunately, turnover rates continue to be an epidemic in the service industry, and Sugarfish is not exempt from this fact.
Revolutionize Restaurant Training
This is what my client, the CEO of 2Cube, stated when asked what the primary goal of their business was. 2Cube aims to launch an immersive and fun platform that provides training to new hires at Sugarfish . For the next couple months, I journeyed to design a mobile application that prioritizes users’ concerns of easily navigating the Sugarfish training process.
PROBLEM
Becoming a Host at Sugarfish is very challenging. The system is complicated and the pace is rapid. The financial cost of training a new employee also includes extra attention from managers needed and the hours spent post-training still adapting to the Sugarfish Pace.
GOAL
Revolutionize restaurant training by integrating interactive video-game style simulation into the learning experience.
SOLUTION
A strong training program not only enhances overall efficiency but also elevates employee satisfaction, reduces turnover rates, and ensures a consistent, exceptional guest experience.
Step 1 of our journey…
When first approached by my client about the product he and his company wanted to build, I was curious to see the reasoning behind him wanting to create a training platform, especially since it would be the first of its kind. Currently an Assistant Manager at Sugarfish at SoHo, Manhattan, my client firmly believes there is a way to lower the existing high turnover rates at Sugarfish.
“Our goal is to revolutionize restaurant training by integrating interactive video-game style simulation into the learning experience”
-Evan Wu, CEO of 2Cube
My client, but wanted its initial launch to be in New York City, her location of License Certification. When asked the goals of the platform she wanted to create, my client mentioned:
“We want to be known for being able to take a very difficult learning process and streamlining it to make it more efficient, all while having fun throughout the process.”
Who are we up against?
Since the Sugarfish Restaurant Training application would be the first of its kind, I decided to perform research on popular mobile applications that had both an educational and a gamified component to them.
-
Duolingo
Mobile app that provides over 30+ languages to learn with bite-sized lessons based on science.
STRENGTHS
• Very easy walkthrough
• Designated Mascot/ Animations
• Levels and score feedback/ progress bar
• Several languages available
WEAKNESSES
•Some buttons and code are not updated
upgrades destroy functionality•Some readings for certain languages are incorrect
•UI, some words are crammed together
•Gamification isn’t weighted for difficulty
-
Rosetta Stone
Games and Activities feature of the Rosetta Stone Foundations that reinforces language learning
STRENGTHS
• Users can sharpen skills through games
As users advance in levels, games get harder• Multiple games that can target specific skills
• Users are able to record themselves and get instant feedback
WEAKNESSES
• No reminders to continue lessons. Your progress depends on your own will.
• You won’t receive any certification or language learning credits at the end of your courses
• Current curricula might be weak for the price of the Lifetime Subscription
-
Overcooked
Video game where players control a number of chefs in kitchens to rapidly prepare meals under a time limit
STRENGTHS
• Game “captured the fast paced work environment of culinary friends in the real world, in a cartoon way
• Puts skills to test with challenges and moving objects
• Educational, teaches you to cook
• Good visuals from birdeye view, gives user entire view of restaurant, fun characters, fun
WEAKNESSES
•Controls are too “touchy” or “gimicky”
•“Fun but it was unnecessarily difficult. Made user give up after 30 minutes because it was infuriating. If it was slighter easier (more time, less orders, it would be better. Or the option for a difficulty changer. Would play more if it was easier”
•levels are so hard to point of giving up
Key takeaways
After conducting my competitive analysis, I found the following key insights to be the significant areas to consider before creating a solution:
Simple walkthrough: Especially when it comes to entering a program for the first time, users appreciate a clear, and concise walkthrough of the game.
How to showcase progress: Users prefer a visual way to show them how they are making progress.
Leveling up: How can users increase difficulty level without levels being too hard?
Our Audience
The best way to get insight on Sugarfish’s current training experience would be to hear firsthand from the current employees that work there. I wanted to hear from other users firsthand how their training process went, the biggest challenges they’ve faced, and what could have made their training process easier. I interviewed a total of six participants (3 female, 3 male), in their 18-20’s.
Additionally, I felt it would be important to gather insight on the training experience from the management side. I was given the opportunity to interview Elaina, the General Manager of Sugarfish Soho, learning some vital points on her perspective:
200+ data points to 6 themes…
The following insights were found when creating my affinity map following the user interviews:
3/6 participants ranked food running as their least favorite host position, with the other 3 ranking it second, compared to the main host and side host positions.
FOOD RUNNING POSITION LEAST PREFERRED
3/6 participants found the six day training to be exhausting, yet still felt unprepared for the job, with 5/6 rating their training confidence a “3” or lower on a 5-point scale.
TRAINING ALONE DOES NOT PREPARE ENOUGH
THE NEED FOR VISUAL AIDS
3/6 participants would appreciate some type of visual aids to better remember the fish, table numbers, and food tickets.
4/6 participants found that being trained by different people led to inconsistent training and confusion on correct procedures.
LACK OF CONSISTENT TRAINING
5/6 users expressed difficulty in learning the food running system since an overload of information is thrown at a them at once.
OVERWHELMING FOOD RUNNING SYSTEM
SOME FORM OF KNOWLEDGE/ TESTING
4/6 participants would appreciate practicing the menu and procedures through a fun form of practice and testing.
Snapshot of some clusters from Affinity Map below:
Meet Molly
Molly, an aspiring actress, new to New York City and a new hire at Sugarfish, is a persona created to humanize the user’s Sugarfish training experience. I’ve gathered the goals, pain points, and motivations to help guide my design making process.
What features to prioritize?
Upon analyzing my user research, my client and I decided which features to prioritize in relevance to when the trainee would be first accessing the app. We felt it made the most sense for the user to get access to the app at the very beginning of their six-day training, since food running was the first host position they would be learning over the span of 2 of the 6 days. Both Elaina and Evan agreed it would make the most sense if the trainee was given some exposure to the education/ knowledge of Sugarfish about 30 minutes before “opening” hours, and could access the app and practice throughout their training week.
FEATURE SET
-
At the very core, to ensure proper food delivery, it is vital for the trainee to be able to easily identify the fish and dishes they are serving. I felt it apparent for menu knowledge to be a key feature
-
It is also crucial for the trainee to have a clear understanding of the exact table and seat numbers they will be running the dishes to. Miscalling and misdropping food to the wrong table can lead to food waste and guest complaints, so it is best to avoid this as much as possible.
-
This feature would give the user the ability to practice food running in a video game style, where the trainee is physically running the food to the guests in the app. This would involve understanding certain concepts like how to read the ticket windows, tickets, and how to hold tables
Go with the user flow
To guide my design decisions on following. the user’s journey, I stepped into the POV of Molly, someone who is on her first day of training. If I were Molly, I’d practice learning about the menu and fish items first.
“Molly wants to practice the Fish Identification Module.”
Now that Molly has a proper idea of the food she will be running, the next step would be to learn the map of the restaurant, including the tables and seat numbers:
“Molly wants to practice the table module.”
Molly is now familiar with the menu and table map of the restaurant. She would now like to practice the food running simulation.
“Molly wants to practice the Food Runner Simulation Module”
At the drawing board
Sketching the low-fidelity wireframes allowed me to envision the overall structure of the Sugarfish Training app and placements of components. This step also helped me determine the potential number of screens to design.
Let’s turn it up notch
Digitalizing my wireframes to mid-fidelity screens allowed me to provide more detail such as text and layers.
Who is Mind Mural Therapy?
Creating the brand’s identity is probably the step I had the most fun with. To start off, I took a look at the Circler’s core values:
Warmth, Safety, Curiosity, Inclusivity
Wanting to incorporate her her back story of finding inspiration behind the brain and flowers art piece, I suggested adding elements of that art piece into her logo:
We agreed that we would keep the full name “Mind Mural Therapy” in both the desktop and mobile version of the logo. After playing around with a couple of sketches, I came up with the final digitalized design:
OFFICIAL COMPANY LOGO
STYLE TILE
Let’s kick it into high gear
When it came to designing the high-fidelity screens incorporating the color palette and style tile, I kept the users’ needs in mind when it came to designing the primary features of the site. Some iterations made from the mid-fidelity wireframes included reducing the number of screens from the free consultation booking flow, and being more selective with the amount of white space.
A responsive site with a no-frills landing page
I kept in mind the users this platform would be attracting, some of whom may be in distress when seeking help. Therefore, it was pivotal for me to make sure the landing page was simple, to the point, yet informational.
The landing page immediately dives into the therapist that the potential client will be working alongside with, followed by the services offered, core values, and testimonials.
The user has the option to learn more about each section by clicking on the navigation links at the header or the “learn more” buttons under each segment
Extensive overview of services offered and therapist’s specialities and background
It’s vital for the user to know what they are getting into and whom with when it comes to seeking mental professional health. Separate pages were created for “About Me” and “Services”
The “About me” page was probably one of the most challenging to tackle. Because this was the one space she would be able to introduce herself, her back story, and all she had to offer, we felt it was necessary to include a majority of information given. I made the design decision to separate the following sections into tabs: Welcome, Education and Background, Specialties, Therapeutic Approach, and Story behind “Mind Mural Therapy”. This way the user wouldn’t feel overwhelmed with all the information given on one page.
The services page includes a short segment of the counseling services. provided and a link to learn more, leading the user to separate pages.
Transparency on insurances and pricing
Most users mentioned pain points in finding therapy websites that were up-front about their session costs and the insurance they’d take. My client was initially against making her fees public, but after going through user feedback, we decided to take the chance.
Insurance page provides insurance partners that Mind Mural Therapy is in-network with, and costs of sessions out of network.
Seamless and Smooth booking process
Since the booking process was going to be the most dynamic flow I was designing, I had consider a lot of factors that would ensure a straightforward, non-tedious process for the user. My client and I agreed that we would minimize the number of screens in this flow to avoid overwhelming the user.
Designed screens with a progress wizard, showing users where they are in their booking process.
Applied straightforward directions, with text copy containing just the necessary details
How well does our product work?
I conducted usability tests on five participants to gauge how easily they were able to successfully complete three separate tasks.
Testing was moderated in 30-45 minute time frames, both person and through Zoom screen share with Figma Prototype Mode.
⮕
Task 1
Navigating to the Individual Counseling Page
Task 2
Navigating to insurance page
⮕
⮕
Task 3
Booking a free consultation
Measuring Success
The following metrics were used to measure success in testing my prototoype:
Asked users to rate each task on an scale of 1 (easy) to 3 (difficult)
Asked users to think aloud while completing tasks to identify thought process
Whether the user successfully completed the task
Number of errors that occurred while users were completing the task.
100%
of participants completed all three tasks successfully
1 of 5
participants made a total of 0 errors.
3 of 5
of participants rated all three tasks a 1 (easy)
To gauge next steps, I created a feedback grid that allowed me to visually take note of key insights from the usability testing and separated them into categories: What worked, what needs to change, any questions asked, and ideas.
I then sorted common feedback notes into a chart that that ranged on severity and frequency.
Key Insights
Most users initially clicked on “FAQ” to find the insurance page. “Fees” was the second option most users went with, but wasn’t obvious enough for them to click the first time.
Users found the “About Me” page not as intuitive to navigate due to the sections only being accessible through the separate tabs. Most users preferred the information to be displayed on one page.
Users would appreciate a note on confidentiality in the free consultaiton form, especially since they’e giving out quite a bit of information.
The “Select Service” page confused most users since they layout makes it seem as if they are receiving that service during the consultation.
The “Identity” page involved too much scrolling, users preferred a condensed version and suggested either a dropdown, radio buttons, etc.
Users would like to see some form of detail overview before clicking “submit form” on the free consultation form.
Design Iterations
BEFORE
“Fees” wasn’t intuitive enough for users to click on when accessing insurance information. Users wanted easy access to contact the clinic.
AFTER
Changed “Fees” to “Insurance/Fees” and added a navigation link for “Contact”
BEFORE
Original “About Me” had sections accessible in different tabs depending on what the users wanted information on.
AFTER
Allowed “about me” info to be scrollable but made tabs “sticky scroll” at the top that way user can access different sections by clicking on the respective tabs.
BEFORE
Some users felt that there should be some type of copy saying that information will be confidential
AFTER
Added a blurb about what the free consultation entails to avoid confusion. Also added confidentiality statement
BEFORE
Users were confused as to whether selecting the service would mean that they will be receiving the service in the consultation.
AFTER
Got rid of the time and added a “NOTE” disclaimer, so users will read that they will not be receiving that service during the consultation
BEFORE
Users were confused as to whether selecting the service would mean that they will be receiving the service in the consultation.
AFTER
Got rid of the time and added a “NOTE” disclaimer, so users will read that they will not be receiving that service during the consultation. Also added time stamp at bottom of each screen as a reminder for the selected appointment date and time.
And Now, for the Grand Finale
Introducing
Mind Mural Therapy
With our designs are finalized, we are ready to take our users on a journey to a seamless, smooth way to start therapy.
Next Steps
What’s in store for Mind Mural Therapy?
With the designs handed off to my client, Mind Mural Therapy is now in production of launching their site. My client is in the works of creating a site that tailors to both residents of New York State and India.
This project’s primary focus was to create a minimum viable product. If given the opportunity to improve the user experience, I would do so by adding the following features:
BLOG AND WORKSHOPS
Designing an area for blogs and workshops would be a goal my client would eventually want to have. Once her practice expands, she’d like to host workshops and write articles to share on her site.
PSYCHO-EDUCATION
A feature that my client and I felt was important, but not necessary in the early stages of design was having a psycho-education aspect to the site. We believe users would benefit from getting a more in-depth learning experience about the type of therapy my client specializes in.
LIVE-CHAT OR INSTANT MESSAGE
This is likely a feature that would be developed in the far future when my client has a team of people she were working with. Users would be able to get a quick response to any questions they’d have.