My Works
MMHG Brand Website Redesign
How can we make a restaurant group’s website more pleasing and delectable?
This restaurant group, MMHG, owns four restaurants, including the Michelin-starred MUME, as well as Le Blanc, Baan, and Coast. However, the group’s website was not as stunning as the dining experience it represents.
According to usability testing, the original website suffered from low readability and complex user flows. Although it contained a large amount of information, the content lacked clear organization.
Using a card-sorting method, I redesigned the website’s structure to better align with users’ needs. I also introduced a refreshed visual direction and subtle interactive animations to create a more engaging and refreshing experience.
02 Process
With a one-month timeline, I led Agile UX workshops and worked closely with the MMHG team. During the first two weeks, I collaborated extensively with the PR consultant responsible for brand marketing, and conducted usability testing through role-playing with the full team.
In the final phase, I translated insights into final UI screens and built an interactive prototype for validation.
03 Understanding
MUME Hospitality Group (MMHG) was founded in 2020 by Michelin-starred chef Richie Lin, with a mission to provide a friendly dining experience while exploring the infinite possibilities behind each dish.
Alongside its restaurants, MMHG launched a group website to build deeper connections with people beyond the dining table. The website also plays an essential role in branding and marketing.
The Business Goals
Before starting user research, I first aligned with the business perspective. I spoke with the PR consultant and restaurant manager, who are most closely connected to both the website and its users. Their insights and feedback became the foundation for defining our goals.
User Flow(Original Site)
04 Research
Primary users — Customers who want to build deeper connection with us
Based on Agile UX principles and the limited timeline, I created proto-personas and refined them as our user database grew. I discussed findings closely with the project team and reviewed existing data reports to ensure the personas reflected real target users.
We identified two main user groups:
Existing customers who want to build a deeper connection with MMHG
New users, including potential investors and partners, who want to learn more about the group
Following the principle of “design for the primary, accommodate the secondary,” we defined customers as our primary users. Over 50% of visitors came from customers who received the website link via business cards, reinforcing the importance of deepening post-dining engagement.
Usability Test (Role Playing)
To better understand our users, I divided the team into two groups and assigned each a persona and scenario. After a short preparation period, they were asked to complete specific tasks from the user’s perspective.
The post-test discussion was the most insightful part for me, as participants often shared unexpected feedback. This reinforced my belief in the importance of usability testing. I also collected individual suggestions from team members based on their departmental perspectives.
User Journey Maps
From the usability tests, I synthesized insights into user journey maps. Both primary and secondary users expressed dissatisfaction with the visual design and felt frustrated when navigating unorganized information.
An additional key finding was that users were uncomfortable with the drop-down navigation. For example, one participant mentioned she preferred seeing an overview of all restaurants rather than guessing options from a menu.
Card Sorting Method
To create a navigation structure aligned with user expectations, we conducted an open card-sorting exercise and analyzed the results using the Best Merge Method (BMM).
The dendrograms showed that 56% of users perceived restaurants, charity, collaboration, and shop as closely related. Based on this insight, we adopted this classification to communicate MMHG’s offerings more clearly.
05 Ideation
How Might We Statements
How Might We (HMW) questions are always an effective way when it comes to brainstorming ideas. And by writing down the HMWs, it is easier to keep the statements in mind during the design phase.
Sitemap
Overview of the collaboration board with developer
06 UI Design
Homepage
To make the homepage more engaging, I reorganized the structure to tell a clearer story about the group. Compared to the original website, I introduced “Vision” and “Collaboration” sections to complete the narrative, along with subtle animations to draw attention.
Colors and Typography
When designing the main visual style, I decided to minimize the color I used and emphasized the corporate image. As a result, I designed the whole vision based on corporate identity color and used photo materials as complementary colors, such as the marble background on the homepage.
Grid System
About
According to user research, most users wanted to learn not only about the company’s mission, but also about the people behind it and key milestones. As a result, I placed this information on a single page and added side navigation so users could better understand the page structure and find information more easily.
Restaurant
On the restaurant page, I aimed to create a more immersive experience by revealing each restaurant’s exterior on hover and guiding users to its section on click. In addition, I used a block-based layout for each restaurant and highlighted awards with background color to improve clarity and emphasis.
The screens shown above highlight the core pages of this project. To keep the focus on key user journeys and design decisions, not all pages are included here.
If you’re interested in exploring the full experience, feel free to reach out and let’s talk.
