Mala Hotpot is a local restaurant chain that serves hot-pot – a Chinese cuisine in which people cook their food at the table by dipping bite-sized portions of raw ingredients into simmering broth. Given the success of their first location, they have recently opened a second location; however, they are struggling to attract new customers. One way that they hope to expand their consumer base is redesigning their website.
Mala Hotpot feels that their current website does not express their appeal as a restaurant. In their efforts to entice new customers, they want a complete redesign that shows people why they should consider eating at Mala Hotpot. This new design should do what the existing one does not: express a cohesive brand and communicate the unique experience of hotpot.
Mala Hotpot wanted me to provide them with high-fidelity mockups in desktop and mobile for their main website as well as an online ordering portal. (Their current website uses a third-party system for online ordering, but they are considering developing an internal system instead.) The main website pages ended up including a Homepage, Locations page, Menu page, “About Hotpot” page, and Reservations page.
These mockups have not yet been developed, so I have considered usability testing and client feedback as my metrics on the design performance. During my usability testing, all 6 participants (3 for desktop, 3 for mobile) were able to complete the tasks of making a reservation and ordering a menu item online. Mala Hotpot liked the mockups and gave no suggestions for modifying the designs.
If/when the designs are developed, I would like to see stats on how often people who visit the website go through with making a reservation to gauge the overall impact of the redesign on business goals. To measure the effectiveness of the new online ordering design, it would be useful to compare how long it takes to complete an order using it vs. the time taken using the existing design.
homepage
.png)
menu
order
checkout
Mala Hotpot’s main goal for their website is to appeal to people who are unfamiliar with hotpot. Given the lack of hotpot options (and thus exposure) in the area, they feel that they will be able to access an untapped pool of customers by attracting people who are new to the cuisine. Making hotpot feel approachable will be the highest priority.
Another goal is to design an easy-to-use mobile ordering system. This is because Mala Hotpot wants to encourage dine-in customers to place their orders online, which saves the waiters time from having to input orders into the computer system. Their website currently uses a third-party ordering portal that is confusing and inefficient.
Through competitor analysis and interviews, I wanted to:
The results from competitive analysis and interviews revealed the following:
Moving forward, I created a persona of the target user group for the website, and I realized that I wanted to focus on:
After creating task flows and a sitemap to determine what pages to design, I started working on wireframes for the website. Besides the standard restaurant pages and the online ordering portal, I also included an “About Hotpot” page to briefly explain what hot pot is and how it works.
Although Mala Hotpot is considering implementing an internal online-ordering system, they are not completely sure, so they would like separate designs for the Menu page and Ordering page.
Wireframes were developed for desktop and mobile in Figma. (The mobile versions are excluded here for brevity; however, the final designs for mobile are presented at the end.) My main challenges were:
Unlike with most restaurants, every item on the menu for hotpot is a base ingredient rather than a complete dish. In Mala Hotpot’s case, this means that a customer can order from a substantial amount of options for a meal:
4 soup bases, 4 dipping sauces, 10 meat items, 7 seafood items, 11 vegetable options, 4 mushroom options, 8 tofu options, 10 noodle options
The base ingredients require accompanying images for people to understand what they are. With names like “eye round beef slices”, words alone cannot clearly communicate what the customer should expect.
The following section outlines my reasoning for certain design decisions.
These wireframes were used to create a low-fidelity prototype in Figma for usability testing. There were six participants: 3 for testing the desktop version, 3 for testing the mobile version, and I asked them to go through the tasks of making a reservation and placing an online order.
Everyone was able to complete the tasks without any issues and without any help from my end.
Since all of the participants were already familiar with hotpot, I could not gauge whether my designs helped to explain the cuisine. If I had more time, I would have liked to find people who had never had hotpot before so that I could ask them about their impressions of the cuisine after going through the website.
In terms of testing for the mobile ordering experience, I was surprised and relieved that all of the participants immediately knew how to use the horizontally-swiping card system I used for the Menu and Ordering pages.
...so I shortened the combo meal section and made the lunch vs dinner cards hidden by default; in this way, the a la carte options would be visible in the same viewport.
Other than compressing the combo section, I did not make any major revisions to the designs since the participants were able to easily complete the tasks. I did not worry about visual branding in the wireframing stage, but I knew that it would play an important role in conveying Mala Hotpot's identity and appealing to new customers in the final designs.
Welcoming
Distinctive
Comforting
Timeless
The logo for Mala Hotpot was already created when I started the project, so it was used to inform the branding of the website.
With red established as the theme color from the logo, I used bronze as an accent color to evoke a warm, inviting feeling. I took inspiration from traditional blue-and-white Ming Dynasty-inspired plates for other sections on the website. Because I was using classic primary colors like blue and red, I used gradients to inject a more modern feel to the design.
The logo used Fira Sans, so I carried that font over to the body text. With Mala Hotpot trying to express a duality of being both traditional and modern, I paired Fira Sans with the transitional serif font, PT Serif. To add a more distinctive quality to the website, I picked Tenor Sans for the headings.
homepage
.png)
menu
about
order
combo
checkout
The homepage uses imagery in conjunction with unique typography and color choices (that were based on the existing logo as well as discussion with the client about Mala Hotpot’s brand) to represent the restaurant’s personality and atmosphere.
The Homepage and “About Hotpot” page shine a spotlight on hotpot. Through imagery and text, these pages add an educational aspect to the website to show people why they should try hotpot.
The Menu and Ordering pages clearly break down the restaurant’s uncommon menu options. As an effort to make online ordering more efficient on mobile, the Ordering page allows users to add a la carte items directly to the cart without having to open a modal, saving a tap for each a la carte item.
.png)
