Chung Lok Dim Sum
Chung Lok Dim Sum
Chung Lok Dim Sum
An online food customization and ordering system
An online food customization and ordering system
An online food customization and ordering system
YEAR
2025
CLIENT
California Institute of Arts
PROJECT TYPE
Website Design
role
UI & UX Designer
CONTEXT
CONTEXT
CONTEXT
Crafting a smooth customization experience
This project was completed as part of the UI/UX Specialization Course held by California Institute of Arts. The prompt was to plan and design a website for a delivery-only restaurant, with the focus on creating an online food customization and ordering system for local customers.
THE PROJECT IDEA
THE PROJECT IDEA
THE PROJECT IDEA
A taste of Hong Kong, tailored to one's preferences
A customizable Cantonese-style dim sum platter service, offering an authentic experience that transports customers to the heart of Hong Kong.
THE CHALLENGE
THE CHALLENGE
THE CHALLENGE
The challenge of designing for a delivery-only model emphasized the need to effectively translate the richness and appeal of a traditional dim sum experience online. I anticipated design challenges in creating an intuitive and engaging customization process for a diverse range of dim sum items, clearly communicating portion sizes, and building trust and excitement without the benefit of a physical restaurant ambiance.
DESIGN METHODOLOGY
DESIGN METHODOLOGY
DESIGN METHODOLOGY
Alan Cooper’s Goal-Directed Design (GDD)
Alan Cooper’s Goal-Directed Design (GDD)
Alan Cooper’s Goal-Directed Design (GDD)
I employed Alan Cooper’s Goal-Directed Design (GDD) methodology for this project. GDD’s user-centric approach, focusing on understanding user goals and designing to facilitate their achievement, aligned perfectly with my objective of creating a seamless and enjoyable customization experience. This methodology guided my process through four key stages: Research, Requirements, Framework, and Development. The principles of GDD directly informed the project's focus on empowering users to build their ideal dim sum platter with ease and confidence, influencing the intuitive navigation and clear presentation of customization options throughout the design.
I employed Alan Cooper’s Goal-Directed Design (GDD) methodology for this project. GDD’s user-centric approach, focusing on understanding user goals and designing to facilitate their achievement, aligned perfectly with my objective of creating a seamless and enjoyable customization experience. This methodology guided my process through four key stages: Research, Requirements, Framework, and Development. The principles of GDD directly informed the project's focus on empowering users to build their ideal dim sum platter with ease and confidence, influencing the intuitive navigation and clear presentation of customization options throughout the design.
I employed Alan Cooper’s Goal-Directed Design (GDD) methodology for this project. GDD’s user-centric approach, focusing on understanding user goals and designing to facilitate their achievement, aligned perfectly with my objective of creating a seamless and enjoyable customization experience. This methodology guided my process through four key stages: Research, Requirements, Framework, and Development. The principles of GDD directly informed the project's focus on empowering users to build their ideal dim sum platter with ease and confidence, influencing the intuitive navigation and clear presentation of customization options throughout the design.
RESEARCH
RESEARCH
RESEARCH
Understanding the User
Understanding the User
Understanding the User
I began by defining the target audience for this dim sum platform. I hypothesized that these users would value premium dining experiences, appreciate cultural authenticity in their food choices, and be willing to invest in high-quality meals. I focused my research on individuals with a demonstrated interest in Cantonese cuisine and an openness to exploring customizable dining options.
To validate these assumptions and gain deeper insights, I conducted (simulated for this portfolio piece) user interviews with five individuals who fit this profile. My interview script focused on their current dining habits, their experiences with online food ordering platforms, and their specific preferences regarding authentic cuisine.
Key Insight:
- Customization is a top priority.
- Premium quality justifies higher spending.
- Authenticity drives engagement.
- Social context shapes dining decisions.
I began by defining the target audience for this dim sum platform. I hypothesized that these users would value premium dining experiences, appreciate cultural authenticity in their food choices, and be willing to invest in high-quality meals. I focused my research on individuals with a demonstrated interest in Cantonese cuisine and an openness to exploring customizable dining options.
To validate these assumptions and gain deeper insights, I conducted (simulated for this portfolio piece) user interviews with five individuals who fit this profile. My interview script focused on their current dining habits, their experiences with online food ordering platforms, and their specific preferences regarding authentic cuisine.
Key Insight:
- Customization is a top priority.
- Premium quality justifies higher spending.
- Authenticity drives engagement.
- Social context shapes dining decisions.
I began by defining the target audience for this dim sum platform. I hypothesized that these users would value premium dining experiences, appreciate cultural authenticity in their food choices, and be willing to invest in high-quality meals. I focused my research on individuals with a demonstrated interest in Cantonese cuisine and an openness to exploring customizable dining options.
To validate these assumptions and gain deeper insights, I conducted (simulated for this portfolio piece) user interviews with five individuals who fit this profile. My interview script focused on their current dining habits, their experiences with online food ordering platforms, and their specific preferences regarding authentic cuisine.
Key Insight:
- Customization is a top priority.
- Premium quality justifies higher spending.
- Authenticity drives engagement.
- Social context shapes dining decisions.
Target Audience and User Personas
Target Audience and User Personas
Target Audience and User Personas
Based on these insights gathered from the (simulated) user interviews, I created four key target segments: Celebrators, Party Hosts, Family Planners, and Authentic Enthusiasts (primarily affluent professionals/entrepreneurs aged 25-65 in Indiranagar) seeking premium, customizable dim sum.
Then, I moved on to develop a deeper understanding of the individuals who would be using Chung Lok Dim Sum. To achieve this, I created three distinct user personas that represent the key segments of the target audience identified through the research. These personas helped to humanize the data and ensure that design decisions were consistently made with the user in mind.
Based on these insights gathered from the (simulated) user interviews, I created four key target segments: Celebrators, Party Hosts, Family Planners, and Authentic Enthusiasts (primarily affluent professionals/entrepreneurs aged 25-65 in Indiranagar) seeking premium, customizable dim sum.
Then, I moved on to develop a deeper understanding of the individuals who would be using Chung Lok Dim Sum. To achieve this, I created three distinct user personas that represent the key segments of the target audience identified through the research. These personas helped to humanize the data and ensure that design decisions were consistently made with the user in mind.
Based on these insights gathered from the (simulated) user interviews, I created four key target segments: Celebrators, Party Hosts, Family Planners, and Authentic Enthusiasts (primarily affluent professionals/entrepreneurs aged 25-65 in Indiranagar) seeking premium, customizable dim sum.
Then, I moved on to develop a deeper understanding of the individuals who would be using Chung Lok Dim Sum. To achieve this, I created three distinct user personas that represent the key segments of the target audience identified through the research. These personas helped to humanize the data and ensure that design decisions were consistently made with the user in mind.
Understanding the Task
Understanding the Task
Understanding the Task
To understand the existing market and identify opportunities for differentiation, I conducted a feature comparison chart of existing food delivery platforms, focusing on Domino’s and Swiggy (websites). I chose these platforms as they represent established players in the food delivery market and offer varying levels of customization.
The feature comparison chart of Domino's and Swiggy highlighted a key opportunity for Chung Lok Dim Sum. While both platforms offer customization, Domino's is limited to its core product, and Swiggy's varies by restaurant. Neither provides the granular control I aim for, such as specifying exact portion sizes or wrapper choices. This underscores a market gap for deeply customizable dim sum.
I also conducted a SWOT analysis for each competitor, which highlighted a market gap for a platform offering deep, granular customization for premium dim sum, which Chung Lok Dim Sum aims to fill.
To understand the existing market and identify opportunities for differentiation, I conducted a feature comparison chart of existing food delivery platforms, focusing on Domino’s and Swiggy (websites). I chose these platforms as they represent established players in the food delivery market and offer varying levels of customization.
The feature comparison chart of Domino's and Swiggy highlighted a key opportunity for Chung Lok Dim Sum. While both platforms offer customization, Domino's is limited to its core product, and Swiggy's varies by restaurant. Neither provides the granular control I aim for, such as specifying exact portion sizes or wrapper choices. This underscores a market gap for deeply customizable dim sum.
I also conducted a SWOT analysis for each competitor, which highlighted a market gap for a platform offering deep, granular customization for premium dim sum, which Chung Lok Dim Sum aims to fill.
To understand the existing market and identify opportunities for differentiation, I conducted a feature comparison chart of existing food delivery platforms, focusing on Domino’s and Swiggy (websites). I chose these platforms as they represent established players in the food delivery market and offer varying levels of customization.
The feature comparison chart of Domino's and Swiggy highlighted a key opportunity for Chung Lok Dim Sum. While both platforms offer customization, Domino's is limited to its core product, and Swiggy's varies by restaurant. Neither provides the granular control I aim for, such as specifying exact portion sizes or wrapper choices. This underscores a market gap for deeply customizable dim sum.
I also conducted a SWOT analysis for each competitor, which highlighted a market gap for a platform offering deep, granular customization for premium dim sum, which Chung Lok Dim Sum aims to fill.
REQUIREMENTS
REQUIREMENTS
REQUIREMENTS
Defining the User, Client and Visual Requirements & Selecting the Ideal Device
Defining the User, Client and Visual Requirements & Selecting the Ideal Device
Defining the User, Client and Visual Requirements & Selecting the Ideal Device
For the premium, highly customizable experience of Chung Lok Dim Sum, a desktop website was prioritized. I hypothesized that users taking the time to personalize their gourmet dim sum would prefer the larger screen to comfortably explore the extensive options, review intricate details, and fully appreciate the visual presentation. This deliberate interaction aligns with the brand's sophisticated positioning.
For the premium, highly customizable experience of Chung Lok Dim Sum, a desktop website was prioritized. I hypothesized that users taking the time to personalize their gourmet dim sum would prefer the larger screen to comfortably explore the extensive options, review intricate details, and fully appreciate the visual presentation. This deliberate interaction aligns with the brand's sophisticated positioning.
For the premium, highly customizable experience of Chung Lok Dim Sum, a desktop website was prioritized. I hypothesized that users taking the time to personalize their gourmet dim sum would prefer the larger screen to comfortably explore the extensive options, review intricate details, and fully appreciate the visual presentation. This deliberate interaction aligns with the brand's sophisticated positioning.
VALUE PROPOSITION
VALUE PROPOSITION
VALUE PROPOSITION
Experience the joy of building your perfect Cantonese dim sum platter with ease. Chung Lok Dim Sum allows you to customize every detail of your meal, from portion sizes to layers to dipping sauces, offering never-seen-before personalization. We blend traditional flavors with modern convenience, because every meal should feel like a unique experience.
Experience the joy of building your perfect Cantonese dim sum platter with ease. Chung Lok Dim Sum allows you to customize every detail of your meal, from portion sizes to layers to dipping sauces, offering never-seen-before personalization. We blend traditional flavors with modern convenience, because every meal should feel like a unique experience.
Experience the joy of building your perfect Cantonese dim sum platter with ease. Chung Lok Dim Sum allows you to customize every detail of your meal, from portion sizes to layers to dipping sauces, offering never-seen-before personalization. We blend traditional flavors with modern convenience, because every meal should feel like a unique experience.
FRAMEWORK
FRAMEWORK
FRAMEWORK
Crazy Eights & User Flow Diagram
Crazy Eights & User Flow Diagram
Crazy Eights & User Flow Diagram
The Crazy Eights exercise rapidly generated diverse interface ideas for key Chung Lok Dim Sum screens. This quick ideation explored various menu layouts and customization approaches, directly informing the initial structure and intuitive flows of the wireframes.
The user flow illustrates the efficient path to ordering a customized dim sum platter: Browse Menu → Select Item → Customize → Add to Cart → Review Cart → Checkout. Optimized for ease of use, the flow emphasizes clear navigation and visual feedback during customization, ensuring a seamless experience.
The Crazy Eights exercise rapidly generated diverse interface ideas for key Chung Lok Dim Sum screens. This quick ideation explored various menu layouts and customization approaches, directly informing the initial structure and intuitive flows of the wireframes.
The user flow illustrates the efficient path to ordering a customized dim sum platter: Browse Menu → Select Item → Customize → Add to Cart → Review Cart → Checkout. Optimized for ease of use, the flow emphasizes clear navigation and visual feedback during customization, ensuring a seamless experience.
The Crazy Eights exercise rapidly generated diverse interface ideas for key Chung Lok Dim Sum screens. This quick ideation explored various menu layouts and customization approaches, directly informing the initial structure and intuitive flows of the wireframes.
The user flow illustrates the efficient path to ordering a customized dim sum platter: Browse Menu → Select Item → Customize → Add to Cart → Review Cart → Checkout. Optimized for ease of use, the flow emphasizes clear navigation and visual feedback during customization, ensuring a seamless experience.
Wireframes & Design Systems
Wireframes & Design Systems
Wireframes & Design Systems
The low-fidelity wireframes establish the structural blueprint, prioritizing user needs for easy navigation, clear menu presentation, and an intuitive customization area. Layout choices ensure efficient cart management and a streamlined checkout process, focusing on clarity and usability.
The mood board for Chung Lok Dim Sum captures the vibrant nighttime aesthetic of Hong Kong, utilizing a palette of dark grey, striking yellow, and rich red. This visual direction aims to evoke the authentic and bustling atmosphere of the city. The logo mirrors traditional Hong Kong restaurant signage, featuring the name in Cantonese alongside a smaller English translation in a classic serif font, grounding the brand in its cultural heritage.
The Chung Lok Dim Sum design system ensures a clean and appetizing visual language. It employs a premium and readable serif font for headlines, and a straight-forward, easy-to-read sans serif font for the body. High-quality dim sum photography is integral to the visual appeal. The color palette is presented creatively using vector dim sum illustrations, each showcasing a key brand color. The system also defines essential UI elements, including clear text field styles, distinct default and visited states for navigation, and consistent button designs, including the 'Add to Cart' interaction and the initial cart display upon item addition.
The low-fidelity wireframes establish the structural blueprint, prioritizing user needs for easy navigation, clear menu presentation, and an intuitive customization area. Layout choices ensure efficient cart management and a streamlined checkout process, focusing on clarity and usability.
The mood board for Chung Lok Dim Sum captures the vibrant nighttime aesthetic of Hong Kong, utilizing a palette of dark grey, striking yellow, and rich red. This visual direction aims to evoke the authentic and bustling atmosphere of the city. The logo mirrors traditional Hong Kong restaurant signage, featuring the name in Cantonese alongside a smaller English translation in a classic serif font, grounding the brand in its cultural heritage.
The Chung Lok Dim Sum design system ensures a clean and appetizing visual language. It employs a premium and readable serif font for headlines, and a straight-forward, easy-to-read sans serif font for the body. High-quality dim sum photography is integral to the visual appeal. The color palette is presented creatively using vector dim sum illustrations, each showcasing a key brand color. The system also defines essential UI elements, including clear text field styles, distinct default and visited states for navigation, and consistent button designs, including the 'Add to Cart' interaction and the initial cart display upon item addition.
The low-fidelity wireframes establish the structural blueprint, prioritizing user needs for easy navigation, clear menu presentation, and an intuitive customization area. Layout choices ensure efficient cart management and a streamlined checkout process, focusing on clarity and usability.
The mood board for Chung Lok Dim Sum captures the vibrant nighttime aesthetic of Hong Kong, utilizing a palette of dark grey, striking yellow, and rich red. This visual direction aims to evoke the authentic and bustling atmosphere of the city. The logo mirrors traditional Hong Kong restaurant signage, featuring the name in Cantonese alongside a smaller English translation in a classic serif font, grounding the brand in its cultural heritage.
The Chung Lok Dim Sum design system ensures a clean and appetizing visual language. It employs a premium and readable serif font for headlines, and a straight-forward, easy-to-read sans serif font for the body. High-quality dim sum photography is integral to the visual appeal. The color palette is presented creatively using vector dim sum illustrations, each showcasing a key brand color. The system also defines essential UI elements, including clear text field styles, distinct default and visited states for navigation, and consistent button designs, including the 'Add to Cart' interaction and the initial cart display upon item addition.
DEVELOPMENT
DEVELOPMENT
DEVELOPMENT
Introducing Chung Lok Dim Sum
Introducing Chung Lok Dim Sum
Introducing Chung Lok Dim Sum
Building upon the foundational wireframes, the high-fidelity mockups brought the Chung Lok Dim Sum experience to life on the prioritized desktop platform. This stage focused on a meticulously crafted visual language, employing the vibrant Hong Kong nighttime aesthetic and the established design system.
Building upon the foundational wireframes, the high-fidelity mockups brought the Chung Lok Dim Sum experience to life on the prioritized desktop platform. This stage focused on a meticulously crafted visual language, employing the vibrant Hong Kong nighttime aesthetic and the established design system.
Building upon the foundational wireframes, the high-fidelity mockups brought the Chung Lok Dim Sum experience to life on the prioritized desktop platform. This stage focused on a meticulously crafted visual language, employing the vibrant Hong Kong nighttime aesthetic and the established design system.
Iterations for a Better Experience: Designing through Discovery
Iterations for a Better Experience: Designing through Discovery
Iterations for a Better Experience: Designing through Discovery
The journey of designing the customizable dim sum platter service was one of continuous learning and refinement. A few initial concepts often revealed unexpected user needs and logical inconsistencies upon closer examination. For instance, during the early "Framework" phase, I initially envisioned sauces as customizable options within each individual dim sum selection (through Crazy Eights). This quickly proved impractical, as it could lead to the nonsensical scenario of every single dumpling receiving a potentially unwanted sauce. This insight led to a crucial iteration, where sauces were repositioned as a separate, customizable item for the entire platter.
Similarly, the user flow for ordering multiple platters presented an unforeseen challenge. After a user customized their initial platter and added it to the cart, the question arose: how could they easily create a separate platter, especially to accommodate dietary restrictions like vegetarianism and avoid cross-contamination with seafood or pork? This valuable user-driven inquiry directly resulted in the implementation of a clear "Customize Another Platter" button within the cart or confirmation stage, significantly enhancing the user's ability to cater to diverse needs within a single order.
These examples underscore a fundamental truth in design: every step, every user interaction, provides an opportunity for learning and improvement. The iterative process, fueled by logical analysis and user-centric thinking, is not just about fixing mistakes; it's about continuously striving for a more intuitive, flexible, and ultimately, delightful user experience.
The journey of designing the customizable dim sum platter service was one of continuous learning and refinement. A few initial concepts often revealed unexpected user needs and logical inconsistencies upon closer examination. For instance, during the early "Framework" phase, I initially envisioned sauces as customizable options within each individual dim sum selection (through Crazy Eights). This quickly proved impractical, as it could lead to the nonsensical scenario of every single dumpling receiving a potentially unwanted sauce. This insight led to a crucial iteration, where sauces were repositioned as a separate, customizable item for the entire platter.
Similarly, the user flow for ordering multiple platters presented an unforeseen challenge. After a user customized their initial platter and added it to the cart, the question arose: how could they easily create a separate platter, especially to accommodate dietary restrictions like vegetarianism and avoid cross-contamination with seafood or pork? This valuable user-driven inquiry directly resulted in the implementation of a clear "Customize Another Platter" button within the cart or confirmation stage, significantly enhancing the user's ability to cater to diverse needs within a single order.
These examples underscore a fundamental truth in design: every step, every user interaction, provides an opportunity for learning and improvement. The iterative process, fueled by logical analysis and user-centric thinking, is not just about fixing mistakes; it's about continuously striving for a more intuitive, flexible, and ultimately, delightful user experience.
The journey of designing the customizable dim sum platter service was one of continuous learning and refinement. A few initial concepts often revealed unexpected user needs and logical inconsistencies upon closer examination. For instance, during the early "Framework" phase, I initially envisioned sauces as customizable options within each individual dim sum selection (through Crazy Eights). This quickly proved impractical, as it could lead to the nonsensical scenario of every single dumpling receiving a potentially unwanted sauce. This insight led to a crucial iteration, where sauces were repositioned as a separate, customizable item for the entire platter.
Similarly, the user flow for ordering multiple platters presented an unforeseen challenge. After a user customized their initial platter and added it to the cart, the question arose: how could they easily create a separate platter, especially to accommodate dietary restrictions like vegetarianism and avoid cross-contamination with seafood or pork? This valuable user-driven inquiry directly resulted in the implementation of a clear "Customize Another Platter" button within the cart or confirmation stage, significantly enhancing the user's ability to cater to diverse needs within a single order.
These examples underscore a fundamental truth in design: every step, every user interaction, provides an opportunity for learning and improvement. The iterative process, fueled by logical analysis and user-centric thinking, is not just about fixing mistakes; it's about continuously striving for a more intuitive, flexible, and ultimately, delightful user experience.
LOOKING AHEAD
LOOKING AHEAD
LOOKING AHEAD
What's Next?
What's Next?
What's Next?
- The next step would be to adapt the design for mobile and tablet devices, ensuring a responsive and optimized user experience across all platforms. I would also conduct thorough user testing to gather feedback and iterate on the design. I anticipate challenges in adapting the complex customization interface to smaller screens and would explore different interaction patterns to ensure usability.
- As the restaurant grows and demand increases, there is also potential to expand the platform into a dedicated mobile app. Continuous growth and evolution will align the platform with the restaurant’s scaling business goals.
- The next step would be to adapt the design for mobile and tablet devices, ensuring a responsive and optimized user experience across all platforms. I would also conduct thorough user testing to gather feedback and iterate on the design. I anticipate challenges in adapting the complex customization interface to smaller screens and would explore different interaction patterns to ensure usability.
- As the restaurant grows and demand increases, there is also potential to expand the platform into a dedicated mobile app. Continuous growth and evolution will align the platform with the restaurant’s scaling business goals.
- The next step would be to adapt the design for mobile and tablet devices, ensuring a responsive and optimized user experience across all platforms. I would also conduct thorough user testing to gather feedback and iterate on the design. I anticipate challenges in adapting the complex customization interface to smaller screens and would explore different interaction patterns to ensure usability.
- As the restaurant grows and demand increases, there is also potential to expand the platform into a dedicated mobile app. Continuous growth and evolution will align the platform with the restaurant’s scaling business goals.
Project Takeaways
Project Takeaways
Project Takeaways
- Simulated Interviews: This simulation provided valuable insight into user research processes and the importance of understanding user needs, which heavily influenced the focus on detailed customization.
- Value of Competitive Analysis & SWOT Diagrams: These tools were crucial in identifying market gaps and opportunities to differentiate Chung Lok DIM SUM through its own customization features.
- Simulated Interviews: This simulation provided valuable insight into user research processes and the importance of understanding user needs, which heavily influenced the focus on detailed customization.
- Value of Competitive Analysis & SWOT Diagrams: These tools were crucial in identifying market gaps and opportunities to differentiate Chung Lok DIM SUM through its own customization features.
- Simulated Interviews: This simulation provided valuable insight into user research processes and the importance of understanding user needs, which heavily influenced the focus on detailed customization.
- Value of Competitive Analysis & SWOT Diagrams: These tools were crucial in identifying market gaps and opportunities to differentiate Chung Lok DIM SUM through its own customization features.
Other Projects Other Projects Other Projects
