UX | Elevating the Dining Experience at Hi Noodle

For this case study, our team aims to rethink and improve the dining experience at Hi Noodle through the application of the Design Thinking methodology. Our goal is to develop and present an elevated solo dining experience.

Over the course of 7 weeks, we utilized various user research methods to identify user pain points and potential design opportunities. We engaged in ideation, prototyping, and user testing to eliminate less effective ideas and focus on those that better resonate with users. Subsequently, we dedicated efforts to refining the prototype to achieve its optimal form.

Introduction

In the bustling culinary landscape of Singapore, where gastronomic adventures are aplenty, Chinese noodle restaurants have entrenched themselves as beloved establishments, serving up steaming bowls of comfort that resonate with the diverse palate of locals and foreigners alike. While these culinary havens have traditionally been associated with family-style dining, the surge in single diners tells a tale of evolving preferences within the Lion City’s dynamic food culture.

Why Hi Noodle?

As the culinary scene in Singapore continues to evolve, there is a discernible shift in dining preferences, with an increasing number of individuals opting for solo dining experiences. Recognizing this cultural shift, Hi Noodle created a dining experience tailored to the lifestyle and expectations of solo diners, offering a modern twist to traditional Chinese noodle restaurants. The question is, can more be done to enhance the experience of these solo diners?

Design Thinking Framework

The Design Thinking framework is a non-linear process comprising five stages. Its primary emphasis lies in comprehending users to craft solutions centered around human needs and experiences.

During our research, we employed the following methods at each stage:

The 5 stages in the Design Thinking Framework

1. Empathise

We decided to immerse ourselves in the restaurant environment to experience the dining process firsthand. We created empathy maps of our own before compiling our experiences in the Aggregated Empathy Map. Additionally, we utilized the fly-on-the-wall technique to observe the diners in the restaurant.

We proceeded with clustering to identify some shared thoughts and insights, as follows:

Upon reaching the restaurant

First-time diners experienced uncertainty, as no staff was present at the front of the restaurant. There were no clear instructions provided on what steps to take.
Each outlet presented a slightly different ordering experience, confusing even for diners familiar with the brand.

Ordering process

The queue at the self-ordering kiosks created pressure on self-conscious diners, urging them to quickly finalize their orders.
An abundance of options on the menu led to extended decision-making time for diners.
Upon placing orders at the self-ordering kiosk, it was unclear how diners would be notified when their food was ready.

While waiting for food collection

There was limited engagement during the wait for food collection, particularly during peak hours when food preparation took longer.

Considering these observations, we proceeded to Stage 2 of the Design Thinking framework.

2. Define

We developed two Proto-Personas based on earlier observations and complemented them with User Journey Maps to better understand our users. This approach allows us to grasp our users’ needs, challenges, and identify opportunities to address them.

Proto-Persona 1 — Gabriel

Gabriel, aged 30, recently embarked on his professional journey as a Corporate Salesman. Diligently dedicating most of his time to his job, Gabriel often finds himself dining alone to circumvent queues, as time is of the essence for him. Additionally, he utilizes his mealtime as a brief respite to recharge.

The image below follows Gabriel as he decides to have Hi Noodle for lunch. It is a weekday during the lunchtime rush hour. In this scenario, there was a long queue much to his disappointment.

Proto-Persona 2 — Anna

Anna, a 23-year-old university student from China, maintains a jam-packed daily schedule filled with academic commitments. While she has an appreciation for diverse cuisines, she tends to gravitate towards familiar options, especially when longing for the taste of home. Anna favors the use of technology for placing orders, as it is time-saving. She is also mindful of her spending as she is still a student.

The image below follows Anna as she heads down to Hi Noodle for a treat after missing her lunch on a regular school day. In this scenario, there was no queue and she hoped for some quiet time alone.

By looking at both Gabriel’s and Anna’s user journey maps, we can conclude that Hi Noodle is a single-diner-friendly restaurant that tried to minimise human contact with customers. However, as Gabriel visited during the peak hour, there was a long queue which resulted in the staff having to manage the queue and seating to enhance efficiency.

Despite Gabriel and Anna selecting Hi Noodle for distinct reasons, both sought a hassle-free dining experience due to their busy schedules. Additionally, they both appreciated the quiet time offered during their dining experience.

In this case study, our primary focus will be on elevating the dining experience for individuals who value time and efficiency, while seeking some quiet time alone.

3. Ideate

We created How Might We (HMW) statements as part of our ideation process. These HMWs are derived from our research above.

Our initial pool of How Might We statements

Subsequently, we deliberated and chose 3 HMW statements that we believed would effectively address the users’ pain points to proceed with brainstorming. Below are the 3 statements we chose to focus on:

How might we help diners order comfortably without worrying
about the queue?
How might we improve the touchpoints in the restaurant experience
for single diners to feel confident in patronizing the store?
How might we enhance the waiting experience for single diners
to be more productive?

From the HMW statements, we generated ideas using the Lotus Blossom method as it allows us to go wild with our imaginations. Following that, we employed the SCAMPER and Converging method to maximise the potential of the generated ideas.

*Yellow post-its are the shortlisted ideas before we refine them through the SCAMPER and Converging method.

Generating ideas using Lotus Blossom technique

After extensive discussion, we determined that enhancing their web app to serve as the primary ordering system was crucial, especially since its current use is limited to takeaway orders. We perceived it as an underutilized asset. Given that each Hi Noodle outlet has its web app, the decision was made to consolidate them, aiming to simplify the overall ordering process.

Remote ordering
We believe that incorporating remote ordering is a valuable feature as it saves time for busy diners and enables them to place orders at their own pace. Additionally, implementing this feature would allow Hi Noodle to reduce physical queues at the ordering kiosk, as individuals with smartphones and internet access can utilize the web app from any location.
SMS notification
To create a seamless experience, diners have to input their mobile numbers when placing orders so that Hi Noodle can notify them via SMS when their food is ready. This approach allows diners the freedom to engage in other activities without the need to wait in the restaurant.
Set menus and recommendations
To boost the confidence of first-time diners, we propose introducing set menus and recommendations for easier decision-making. Given Hi Noodle’s extensive menu, the addition of set menus and recommendations serves to expedite the overall ordering process.
Streamline ordering process
To simplify the overall ordering process, we decided to present the customization option as a button rather than displaying all the options. This approach saves diners time and mental effort, eliminating the need for them to navigate through and skip individual customization options. It also contributes to maintaining a clean overall user interface.

In addition to these four main propositions, we believe it would be good to introduce more point-of-sales materials (POSM) such as floor stickers, wobblers, hanging mobiles, etc. These materials can guide first-time diners on the dining process, particularly during non-peak hours when no staff is stationed at the entrance.

*Amenities such as electrical outlets, free wifi, and phone chargers can be provided to cater to solo diners looking for places to decompress.

4. Prototype

To develop a functional prototype for testing, our first step was to establish an optimal user flow. The user flow chart provided below outlines the remote ordering process, accommodating both dine-in and takeaway options across all outlets.

After establishing our user flow, we developed a mid-fidelity prototype.

We tested it among ourselves and made several rounds of adjustments before we advanced to a hi-fidelity prototype and proceeded to conduct real user testing.

5. Test

With the hi-fidelity prototype done, we organised testing sessions with five users, including a mix of regular diners and individuals new to Hi Noodle. The objective of the test was to see if users did feel an improvement in the ordering process and to gauge the utility of our proposed ideas.

Taking reference to our solutions and proto-personas, we came up with 2 scenarios. The associated tasks were kept straightforward, aligning with the objective of each scenario, which is to save time for regular diners and ease of ordering for first-time diners.

Users were asked to go through the redesigned web-app based on the scenarios given. They were briefed before testing to be vocal with their thoughts and to share feedback as and when they wanted. While the users were performing the task and experiencing the prototype, we recorded their process and noted down their reactions.

Screen Shot 2024-04-09 at 4.47.17 PM.png

Screen Shot 2024-04-09 at 4.47.37 PM.png

Screen Shot 2024-04-09 at 4.48.10 PM.png

After the testing, user feedback was gathered based on the observations and recordings. The feedback was then categorised using the Rose, Thorn, Bud method to help us identify our successes, failures and also opportunities that we can rapidly improve on for a better experience.

Feedback consolidated in Rose, Thorn and Bud method

Rose, Thorn, Bud

Looking at the overall picture, we saw more Thorns than Roses or Buds, which wasn’t great to see. However we knew that it didn’t spell the end of our research process and took it as a stepping board to be able to improve on our prototype and move forward.

Rose

The feedback provided by our users centered around the revamped ordering process and the improved appearance of the ordering menu, both of which aligned with our objectives for the solution. Users also appreciated the inclusion of small indicators highlighting popular and recommended items, as it streamlined the meal selection process, boosting their confidence in ordering and patronizing the store.

Despite receiving more Thorns than Roses, the insights reaffirmed that we were on the right track with solutions addressing our "How Might We" statements. This feedback also confirmed the presence of a target audience seeking a simpler and more seamless dining experience.

Thorn

Reviewing our Thorns, the majority of raised issues revolve around the user experience with our prototype. Some concerns were raised by multiple users, including uncertainty about their queue number and confusion about how to proceed in the user journey. Each Thorn is detailed below:

Users are overwhelmed with unnecessary information when viewing their order status.
This issue seems to stem from the fact that our order status page included some information deemed unnecessary by the users. From a verbal sharing, 4 out of 5 users mentioned that the important information was their queue number and order status.
Solution: Revise the order status page to view only the necessary info.
Users were confused as to why they cannot view their order status after completing payment.
3 out of 5 users questioned the necessity of receiving a digital receipt via email before being able to access the order status page.
Solution: Include an option to view the order status on the payment success popup and the digital receipt page.
Users frequently overlook their queue number.
After payment, all 5 users noted that they missed out on the queue number in the payment success popup. Consequently, this led to confusion upon arriving at the order status page, as they were uncertain about which order was theirs and whether it was ready.
Solution: Ensure that the queue number is prominently displayed on the payment success popup and subsequent pages throughout the user journey.
Users are confused if the condiment selection shared on the order status page was something to order or not.
When users arrived at the order status page, they encountered multiple condiment combinations, which led to confusion about whether these condiments were meant for ordering or simply for reference. Upon reviewing our prototype, we realized that offering too many recommendations may be ineffective. Additionally, the copy may have misled users.
Solution: Revise the copy from ‘Condiment Selection’ to ‘Condiment Recommendation’ and limit the number of recommendations to 2.
Users felt discouraged when only given the option to order a set meal when customising the order.
When users were customizing their orders, they could not proceed with ordering the food item without adding on a set meal. Users could only order à la carte without customization. This was an error, and without testing, we would have missed this issue.
Solution: Include an “add to cart” button on the order customisation page.
Users are unsure of how to proceed after viewing their Digital Receipt.
3 out of 5 users were uncertain whether they should wait at the digital receipt page for it to refresh and reflect their order status, or if they should return to the menu.
Solution: Include the option to view the order status on the digital receipt page.
The receipts are too long, and it's challenging for users to group and view the pricing for items together.
After selecting their food items and proceeding to checkout, 3 out of 5 users found the receipts in the order summary somewhat challenging to view. This may have been because our receipt included images of the food items selected by the users, as we believed it would visually assist users in confirming their orders. However, during verbal sharing sessions, users expressed that they would prefer the receipt to be presented in a cleaner and more informative manner, with a focus on prices instead.
Solution: Enhance the appearance of the receipts on both the order summary page and digital receipt page to prioritize clarity and readability of prices.

Bud

The majority of the Buds we gathered from user feedback were related to enhancements in the ordering process, focusing on quality-of-life improvements that users desired. As our goal was to provide users with the best possible ordering experience, we carefully deliberated on how to incorporate this feedback into our redesign.

Digital Wallet payment options should prioritised
Users appreciated the availability of digital wallet payment options; however, they suggested that the hierarchy of payment options could be improved. 4 out of 5 users indicated a preference for digital wallet payment options over re-entering credit card details, especially if they had previously used digital wallets.
Order customisation and set options could be combined
1 user expressed a preference for combining the customization and set meal pages to streamline the ordering process. However, upon further consideration, we recognized that this might lead to usability issues due to the already extensive array of options available to the user.
Promotions could be displayed as banner
1 user noticed a menu category and assumed it was a promotion or collaboration with another brand. The user's assumption was correct, indicating that the promotion was not clearly presented and blended in with the rest of the menu categories. After deliberation, we concluded that improving the presentation of promotions would enhance the user experience by reducing the time needed to navigate the menu items.
The queue number could be pinned to the top of the page for easy reference at any time.
1 user suggested that it would be beneficial to view the queue number at the top of the page after making payment, providing a point of reference. After deliberation, the team agreed that this would be a valuable enhancement to integrate into the next prototype, further improving its utility.
Revising the current design
We implemented some of the user feedback into a new iteration of the prototype as seen below.

Redesigned prototype based on user feedback

Unfortunately, due to project timeline, we were unable to conduct further testing on the new iterations of the prototype. However, we remained mindful of potential progressions we would have pursued if additional time had been available.

Continued user testing would be our top priority to enhance the ordering process and assess the effectiveness of the revisions made after the initial testing. This would allow us to observe whether the changes have successfully improved the user experience.
Improving the UI would be our second priority as it was a concern raised by multiple users. Given more time, we could explore additional methods to present options and choices in a more intuitive and less overwhelming manner for users.
After improving the web-app, our next step would be to explore further integration with in-store materials. By seamlessly integrating the web-app into the store experience, we can develop and introduce new ideas to create a more holistic user journey that remains positive even after the user has left the store.

Reflections

Our primary challenge was to reorganize and streamline the information available on each ordering page to enhance the user journey and reduce decision-making time. However, we also had to remain mindful of business goals throughout this process.

We believe that our web-app iterations have enhanced the overall dining experience and have assisted our target audience in saving time and facilitating ease of ordering. Recognizing that app development is an iterative process, we acknowledge that there will always be room for improvement, and it will continue to evolve to meet the needs of our target audience.

Disclaimer: This is a school project done by a team of 3.