Project
Just Hotpot online order experience
Background
Just Hot Pot, inspired by Taiwan's Oni Hot Pot, offers six unique hotpot options crafted with all-natural ingredients. We prioritize high-quality, fresh ingredients, including our premium Japanese Wagyu. Alongside our exceptional soup bases, we also feature Chinese BBQ skewers and a selection of drinks, catering to refined palates.
Role
User Research
Design system Interaction design
Prototyping & testing
Device
Desktop
Mobile
Challenge
Background
Just Hot Pot, inspired by Taiwan's Oni Hot Pot, offers six unique hotpot options crafted with all-natural ingredients. We prioritize high-quality, fresh ingredients, including our premium Japanese Wagyu. Alongside our exceptional soup bases, we also feature Chinese BBQ skewers and a selection of drinks, catering to refined palates.
Role
User Research
Design system Interaction design
Prototyping & testing
Device
Desktop
Mobile
Introduce Chinese food culture and our unique offerings, like premium Japanese Wagyu, while optimizing the mobile web experience for easy access to our menu enhance engagement, and encourage trial and purchase.
User interview
Edwin from Just Hot Pot connected me with his actual customers for contextual inquiries and interviews. Additionally, I've reached out to other diners who enjoy a variety of restaurant experiences to gather unique insights for our platform.
Key takeaway
-
Lack of knowledge - Lack of knowledge on the best way to enjoy A5 Wagyu.
-
Limited information - Most online ordering platforms provide limited information about dishes, making it difficult to make informed choices.
-
High service fees - Service fees on online ordering platforms can be high, sometimes exceeding the original price of the dishes.
-
Customization issues - Delivery apps often do not allow customers to customize or adjust their orders.
Target customer
I conducted user interviews to gain insights into their needs and pain points with other platforms, their content creation approaches, and the tools they use. From this research, we learned that people like Frank are our target customers who would like to try new things.
Map opportunities for enhancement
Frank loves exploring new food options, even if a restaurant is brand new and has few Yelp reviews. He typically researches to find places that catch his interest. While creating a customer journey map for him, I empathized with his thoughts, needs, and pain points at each stage. Analyzing these insights revealed several opportunities to enhance our platform.
Competitive analysis
During COVID-19, dine-in options were unavailable, forcing customers to order online. Many restaurants lacked websites, so orders could only be placed through delivery apps. While these apps offered convenience, users often found them costly and slow. Based on interview insights, research was conducted on various delivery apps and the online ordering systems of popular restaurants to analyze their strengths and weaknesses.
Strength
-
The delivery app makes searching for different restaurants and placing orders easy.
-
The app frequently offers promotions to encourage user orders.
-
Most restaurants allow users to set pick-up times and provide direct instructions to the restaurant.
-
The app features straightforward navigation and an attractive visual aesthetic.
Weakness
-
The delivery app lacks dish descriptions, customer reviews, and images for some items.
-
Not all dishes are listed, making it hard for users to make informed choices.
-
Users must scroll down to see all available items.
-
Orders sometimes don’t match restaurant descriptions.
-
At the store, orders are occasionally unprepared, causing wait times.
Define clear structure
Many restaurants have unique web flows due to specific requirements. In addition to the menu and online ordering features, our specialty is Wagyu. Effectively introducing ourselves to our audience is crucial. A clear platform architecture will ensure that users can easily access all the information they need while providing a pleasant user experience.
Enhanced interaction to intrigue customer
As a small business with a limited budget for online chat, it’s essential to create a platform that facilitates effective asynchronous communication between users and the restaurant. We should provide clear and concise information to enhance the overall user experience.
Customized browsing experience
-
Detail View: This option is designed for customers unfamiliar with the restaurant, offering more information to help them explore.
-
List View: This option is tailored for customers who know what they want to order or who want to save time.
A flavor journey to discover
An engaging, interactive illustration of a cow’s anatomy, where users can explore each cut of beef and learn about the distinct flavors and textures they offer. As users hover/click on different parts, they’ll be guided through a virtual tasting experience, with detailed descriptions of each cut’s taste profile—whether it’s the tender, melt-in-your-mouth ribeye or the lean, flavorful sirloin.
Branding development
I focused on establishing Just Hot Pot’s brand identity throughout our research and definition processes.
The “H” in the brand name ‘Just Hot Pot’ symbolizes spicy, flaming, or trending, making it central to our brand. The logo features Chinese calligraphy strokes representing a two-flavor hot pot, elegantly forming the letter “H.” Both the Chinese and English names are incorporated alongside it. The color red was chosen for the logo, perfectly aligning with our brand identity. The stakeholders were pleased with the final design.
UI kit
In developing the concept, I considered every aspect—from the main image to the minor details—to illustrate the interconnectedness of all elements and emphasize the brand’s unique identity. Since the hot pot is a hearty and flavorful meal, I chose solid and bold colors as the primary palette to reflect that essence.
Key feature design
When users access this prototype, they should immediately recognize the ‘Just Hot Pot’ design style through the visuals, from the underline of the text to the overall layouts, conveying a strong brand identity. Since most users prefer to order food via mobile devices, I designed the mobile version to differ slightly from the web version, considering screen size and interaction methods.
Santity instruction
Communicated to customers that the store is fully prepared to welcome them with detailed instructions for navigating pandemic-related guidelines.
Menu: detail view VS list view
Detail view: Designed for users who want to explore more information about the menu items. This includes stacked labels at the top to indicate the types of food offered. We also provide ingredient lists for each hot pot base, catering to users unfamiliar with the options. Additionally, this section includes descriptions and customer reviews for further exploration and reference.
Listed view: Tailored for customers who already know what they want to order or those looking to save time, offering a quicker and more streamlined browsing experience. Each section features its label and includes all products along with essential information.
Dish details
The product page offers detailed information about each item, includes customer reviews for reference, and recommends related products for further exploration.
Wagyu introduction
The Wagyu section introduces the differences between A4 and A5 Wagyu and showcases professional certificates to enhance credibility. Users can interact with a beef anatomy illustration to learn about Wagyu and understand how different cuts influence taste and texture.
Place an order
To make the hot pot ordering process smoother and more intuitive, I highlight the main categories at the top (e.g., Broth, Proteins, Seafood, Vegetables). This allows users to quickly glance at their options without being overwhelmed by a long list of items. Each category will be clearly defined, enabling users to make decisions effortlessly. Grouped selections, with recommendations and brief descriptions, help users navigate the menu with ease and select their preferences faster. This streamlined approach ensures a quick and enjoyable ordering experience.
Iteration
I received positive feedback and constructive criticism after presenting the prototypes (web and mobile versions) to stakeholders and participants. Participants found the platform highly detailed, with many eye-catching design elements encouraging further exploration. They particularly praised the online order layouts and the integration of the beef anatomy illustration, noting that they were both successful and engaging. This feature enhanced their interaction with the platform and provided valuable information.
Boost sales
Since we've invested significant time and effort into building this website, we want to leverage it to boost our sales. Beverages, one of our most profitable items, are a key focus for promotion. We plan to encourage customers to purchase more by highlighting beverages throughout the shopping experience, even during the checkout process, to increase their chances of adding drinks to their orders. This targeted approach will drive both sales and customer satisfaction.
Provide beverage option to encourage sales
Proposed adding beverage options for users to select with their dish orders, enhancing their experience and encouraging extra purchases.
Ability to add more
To drive higher sales and improve user convenience, we've implemented an "Add More" button in the checkout process, enabling users to seamlessly add additional items without interrupting their order flow—making it easier than ever to increase their order size.
Reservation
Participants expressed a preference for making reservations directly on the website to avoid phone calls, opting to contact the restaurant via email instead. To accommodate this, we’ve added a reservation section, ensuring a smooth and efficient booking process without confusion. This feature provides convenience and streamlines the reservation experience for users.
Learning: website VS mobile
To ensure the success of both mobile and web platforms, designers must collaborate effectively in two critical areas during the design process. For mobile, touch interactions are vital for engaging users. Meanwhile, when designing the web version, creating features that encourage user interaction is essential.