All projects
Online ordering app for a new business
The Nuk Cafe mobile app offers customers the convenience of ordering pick-up and delivery of to-go food online. The app is designed with streamlined ordering features, including estimated ready time, re-ordering capabilities, favorites, and store location information. In addition to the benefits provided by third-party food online ordering services, a dedicated app offers even more advantages to the customers and the business.
Company
NUK Café
Company
NUK Café
Company
NUK Café
Industry
Food and Beverage
Industry
Food and Beverage
Industry
Food and Beverage
Year
2021—2022
Year
2021—2022
Year
2021—2022
Deliverables
Mobile App Design
Deliverables
Mobile App Design
Deliverables
Mobile App Design
Toolstack
Sketch, Zeplin, InVision
Toolstack
Sketch, Zeplin, InVision
Toolstack
Sketch, Zeplin, InVision
Team
Sole Designer
Team
Sole Designer
Team
Sole Designer
My Role
UI/UX Designer
My Role
UI/UX Designer
My Role
UI/UX Designer
Involvement
Research, User flow, Wireframe, Design system, Visual design, Prototype
Involvement
Research, User flow, Wireframe, Design system, Visual design, Prototype
Involvement
Research, User flow, Wireframe, Design system, Visual design, Prototype
An app designed with streamlined ordering features, including estimated ready time, re-ordering capabilities, favorites, and store location information.
An app designed with streamlined ordering features, including estimated ready time, re-ordering capabilities, favorites, and store location information.
An app designed with streamlined ordering features, including estimated ready time, re-ordering capabilities, favorites, and store location information.
Problem Statement
The business owner is looking to increase customer loyalty by offering online purchase via an app for ordering delivery order and pick-up order, as well as providing a platform for customers to share their experience. This app will be used in Cambodia and Hong Kong.
Problem Statement
The business owner is looking to increase customer loyalty by offering online purchase via an app for ordering delivery order and pick-up order, as well as providing a platform for customers to share their experience. This app will be used in Cambodia and Hong Kong.
Problem Statement
The business owner is looking to increase customer loyalty by offering online purchase via an app for ordering delivery order and pick-up order, as well as providing a platform for customers to share their experience. This app will be used in Cambodia and Hong Kong.
Takeaway
Takeaway
Takeaway
Research
Design
Collaboration
Analysis
Analysis
Analysis
Business insights
Business insights
Business insights
User interviews
User interviews
User interviews
Secondary research
Secondary research
Secondary research
High-level IA
High-level IA
High-level IA
User flow
User flow
User flow
High level
High level
High level
Low level
Low level
Low level
Wireframe/Wireflow
Wireframe/Wireflow
Wireframe/Wireflow
Artifacts
Artifacts
Artifacts
Mockup
Mockup
Mockup
Usability tests
Usability tests
Usability tests
Design system
Design system
Design system
Prototype
Prototype
Prototype
Agile
Agile
Agile
Sprints
Sprints
Sprints
SIT
SIT
SIT
UAT
UAT
UAT
Business Insights
Interviews were done with the business owner and people who order to-go food on a regular base to gain insights about their ordering process. I also looked into similar and competitive apps and case studies to learn what new problems had come out since the pandemic started, and how these services attempt to solve them.
Business Insights
Interviews were done with the business owner and people who order to-go food on a regular base to gain insights about their ordering process. I also looked into similar and competitive apps and case studies to learn what new problems had come out since the pandemic started, and how these services attempt to solve them.
Business Insights
Interviews were done with the business owner and people who order to-go food on a regular base to gain insights about their ordering process. I also looked into similar and competitive apps and case studies to learn what new problems had come out since the pandemic started, and how these services attempt to solve them.
1
Long wait
Listing on major food delivery platforms makes it hard to compete for attention among many restaurants.
1
Long wait
Listing on major food delivery platforms makes it hard to compete for attention among many restaurants.
1
Long wait
Listing on major food delivery platforms makes it hard to compete for attention among many restaurants.
2
Complicated address (In Cambodia)
In Cambodia, riders sometimes have a hard time locating the customer's location in due to the complicated address system.
2
Complicated address (In Cambodia)
In Cambodia, riders sometimes have a hard time locating the customer's location in due to the complicated address system.
2
Complicated address (In Cambodia)
In Cambodia, riders sometimes have a hard time locating the customer's location in due to the complicated address system.
3
Competition
Listing on major food delivery platforms makes it hard to compete for attention among many restaurants.
3
Competition
Listing on major food delivery platforms makes it hard to compete for attention among many restaurants.
3
Competition
Listing on major food delivery platforms makes it hard to compete for attention among many restaurants.
User Research
The insights presented are drawn from a combination of primary and secondary research. This includes surveys and interviews conducted with 10 individuals from the Millennial and Gen Z generations residing in California. Further understanding was gained through the analysis of online customer comments, reviews, and industry reports. Finally, internal business insights from within the company provided a crucial perspective.
User Research
The insights presented are drawn from a combination of primary and secondary research. This includes surveys and interviews conducted with 10 individuals from the Millennial and Gen Z generations residing in California. Further understanding was gained through the analysis of online customer comments, reviews, and industry reports. Finally, internal business insights from within the company provided a crucial perspective.
User Research
The insights presented are drawn from a combination of primary and secondary research. This includes surveys and interviews conducted with 10 individuals from the Millennial and Gen Z generations residing in California. Further understanding was gained through the analysis of online customer comments, reviews, and industry reports. Finally, internal business insights from within the company provided a crucial perspective.
Questions
Tell me about your last online order?
Tell me about your last online order?
Tell me about your last online order?
What motivated to order online?
What motivated to order online?
What motivated to order online?
Why did you choose that app/method?
Why did you choose that app/method?
Why did you choose that app/method?
Anything annoyed you about it?
Anything annoyed you about it?
Anything annoyed you about it?
Why did you pick that restaurant?
Why did you pick that restaurant?
Why did you pick that restaurant?
Responses
They have developed a habit since COVID hit.
They have developed a habit since COVID hit.
They have developed a habit since COVID hit.
Good reviews make them more likely to pick the restaurant.
Good reviews make them more likely to pick the restaurant.
Good reviews make them more likely to pick the restaurant.
To maximize time efficiency, they make the order in advance to make sure they can get their order at a particular time.
To maximize time efficiency, they make the order in advance to make sure they can get their order at a particular time.
To maximize time efficiency, they make the order in advance to make sure they can get their order at a particular time.
Likely to order the same item more than half the times, since it's a safe choice and they don't have to think.
Likely to order the same item more than half the times, since it's a safe choice and they don't have to think.
Likely to order the same item more than half the times, since it's a safe choice and they don't have to think.
Estimated shipping time are usually inaccurate and unpredictable.
Estimated shipping time are usually inaccurate and unpredictable.
Estimated shipping time are usually inaccurate and unpredictable.
The inconvenience of returning makes me not want to buy from the seller again.
The inconvenience of returning makes me not want to buy from the seller again.
The inconvenience of returning makes me not want to buy from the seller again.
Secondary Research
Since business insight and user research done above are both based on one location, my secondary research aimed to look at researches done internationally. Popular food delivery service apps and restaurant apps from local and other countries, such as Grubhub, McDonald's US, Foodpanda, Starbucks, etc., were also studied to learn how they tackle and solve problems. Case studies about customers behavior were also looked at. Here are the findings.
Secondary Research
Since business insight and user research done above are both based on one location, my secondary research aimed to look at researches done internationally. Popular food delivery service apps and restaurant apps from local and other countries, such as Grubhub, McDonald's US, Foodpanda, Starbucks, etc., were also studied to learn how they tackle and solve problems. Case studies about customers behavior were also looked at. Here are the findings.
Secondary Research
Since business insight and user research done above are both based on one location, my secondary research aimed to look at researches done internationally. Popular food delivery service apps and restaurant apps from local and other countries, such as Grubhub, McDonald's US, Foodpanda, Starbucks, etc., were also studied to learn how they tackle and solve problems. Case studies about customers behavior were also looked at. Here are the findings.
1
Reserve
Users should be allowed to reserve a time for their delivery or pickup.
1
Reserve
Users should be allowed to reserve a time for their delivery or pickup.
1
Reserve
Users should be allowed to reserve a time for their delivery or pickup.
2
Alert
Alert the user of any unavailability as soon as possible in the shopping process.
2
Alert
Alert the user of any unavailability as soon as possible in the shopping process.
2
Alert
Alert the user of any unavailability as soon as possible in the shopping process.
3
Sudden Issues
Inform customers as soon as possible if store is not opened yet, or any sudden issues that would cause delays.
3
Sudden Issues
Inform customers as soon as possible if store is not opened yet, or any sudden issues that would cause delays.
3
Sudden Issues
Inform customers as soon as possible if store is not opened yet, or any sudden issues that would cause delays.
4
Out of stock
Allow users to see out of stock products while shopping. Make this a part of the flow instead of hiding it.
4
Out of stock
Allow users to see out of stock products while shopping. Make this a part of the flow instead of hiding it.
4
Out of stock
Allow users to see out of stock products while shopping. Make this a part of the flow instead of hiding it.
5
Extra Costs
Be upfront about extra costs that customer will have to pay.
5
Extra Costs
Be upfront about extra costs that customer will have to pay.
5
Extra Costs
Be upfront about extra costs that customer will have to pay.
6
Order status
Be transparent about ordering status at all times.
6
Order status
Be transparent about ordering status at all times.
6
Order status
Be transparent about ordering status at all times.
7
Marketing
Direct-to-customer marketing is way more efficient than using other platforms as intermediaries.
7
Marketing
Direct-to-customer marketing is way more efficient than using other platforms as intermediaries.
7
Marketing
Direct-to-customer marketing is way more efficient than using other platforms as intermediaries.
Takeaway
Takeaway
Takeaway
1
Transparency matters
To minimize ordering friction, it is always best to let customers know what to expect every step of the way in the process.
1
Transparency matters
To minimize ordering friction, it is always best to let customers know what to expect every step of the way in the process.
1
Transparency matters
To minimize ordering friction, it is always best to let customers know what to expect every step of the way in the process.
2
Estimation
Communication with customers about where their food is and when can they get their hands on it is crucial to reduce anxiety.
2
Estimation
Communication with customers about where their food is and when can they get their hands on it is crucial to reduce anxiety.
2
Estimation
Communication with customers about where their food is and when can they get their hands on it is crucial to reduce anxiety.
3
Familiarity
Familiarity leads customers to reorder the same item from known restaurants. Encouraging customers to revisit by treating them with special offers.
3
Familiarity
Familiarity leads customers to reorder the same item from known restaurants. Encouraging customers to revisit by treating them with special offers.
3
Familiarity
Familiarity leads customers to reorder the same item from known restaurants. Encouraging customers to revisit by treating them with special offers.
Recognizing patterns
Through in-depth research on customer behavior, needs, and pain points, along with comprehensive user interviews, we methodically recorded our findings on memo notes, identifying patterns. These insights guided the creation of detailed personas, enabling us to tailor our strategies and design decisions to effectively address our users' specific needs.
Recognizing patterns
Through in-depth research on customer behavior, needs, and pain points, along with comprehensive user interviews, we methodically recorded our findings on memo notes, identifying patterns. These insights guided the creation of detailed personas, enabling us to tailor our strategies and design decisions to effectively address our users' specific needs.
Recognizing patterns
Through in-depth research on customer behavior, needs, and pain points, along with comprehensive user interviews, we methodically recorded our findings on memo notes, identifying patterns. These insights guided the creation of detailed personas, enabling us to tailor our strategies and design decisions to effectively address our users' specific needs.
1
Shifted Customer Expectations
Lack of in-store try-ons leads to sizing issues, high returns, and increased anxiety.
1
Shifted Customer Expectations
Lack of in-store try-ons leads to sizing issues, high returns, and increased anxiety.
1
Shifted Customer Expectations
Lack of in-store try-ons leads to sizing issues, high returns, and increased anxiety.
2
Meeting Diverse Customer Needs
The return process influences purchase decisions due to unmet online expectations.
2
Meeting Diverse Customer Needs
The return process influences purchase decisions due to unmet online expectations.
2
Meeting Diverse Customer Needs
The return process influences purchase decisions due to unmet online expectations.
3
Strategic Omni-Channel Initiatives
If a product is out of stock, users will abandon the purchase or look elsewhere.
3
Strategic Omni-Channel Initiatives
If a product is out of stock, users will abandon the purchase or look elsewhere.
3
Strategic Omni-Channel Initiatives
If a product is out of stock, users will abandon the purchase or look elsewhere.
Wireframes
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Wireframes
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Wireframes
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Design System & UI Kit
The "order" use case is only one of the many use cases in this app. It is important to have a system the entire app will follow unanimously. This design system follows the Apple Human Interface Guidelines.
Design System & UI Kit
The "order" use case is only one of the many use cases in this app. It is important to have a system the entire app will follow unanimously. This design system follows the Apple Human Interface Guidelines.
Design System & UI Kit
The "order" use case is only one of the many use cases in this app. It is important to have a system the entire app will follow unanimously. This design system follows the Apple Human Interface Guidelines.
Mock-ups
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Mock-ups
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Mock-ups
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Ordering
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Ordering
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Ordering
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Loyalty Program
The "order" use case is only one of the many use cases in this app. It is important to have a system the entire app will follow unanimously. This design system follows the Apple Human Interface Guidelines.
Loyalty Program
The "order" use case is only one of the many use cases in this app. It is important to have a system the entire app will follow unanimously. This design system follows the Apple Human Interface Guidelines.
Loyalty Program
The "order" use case is only one of the many use cases in this app. It is important to have a system the entire app will follow unanimously. This design system follows the Apple Human Interface Guidelines.
Social Sharing
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Social Sharing
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Social Sharing
The business analysis and business owner has provided a high level user flow that shows how would users navigate through the delivery order process. With this information, I started the development with early wireframes. With this, I can start gathering feedback and making iterations.
Staff apps
Riders can receive and accept orders from restaurant. Restaurant staff can receive, update and assign orders to riders. Admin can manage stock, offers, order, members permission, push notification, vouchers, etc.
Staff apps
Riders can receive and accept orders from restaurant. Restaurant staff can receive, update and assign orders to riders. Admin can manage stock, offers, order, members permission, push notification, vouchers, etc.
Staff apps
Riders can receive and accept orders from restaurant. Restaurant staff can receive, update and assign orders to riders. Admin can manage stock, offers, order, members permission, push notification, vouchers, etc.
User flow
Each use case has been meticulously planned using wireflows and screen flows. This dual approach allows for a comprehensive understanding of user interactions and ensures a user-centered design. Wireflows, combining wireframes with flowcharts, provide a clear visual representation of the user's journey, from entry point to task completion. Complementing this, screen flows offer a detailed view of each screen and its transitions, further refining the user experience.
User flow
Each use case has been meticulously planned using wireflows and screen flows. This dual approach allows for a comprehensive understanding of user interactions and ensures a user-centered design. Wireflows, combining wireframes with flowcharts, provide a clear visual representation of the user's journey, from entry point to task completion. Complementing this, screen flows offer a detailed view of each screen and its transitions, further refining the user experience.
User flow
Each use case has been meticulously planned using wireflows and screen flows. This dual approach allows for a comprehensive understanding of user interactions and ensures a user-centered design. Wireflows, combining wireframes with flowcharts, provide a clear visual representation of the user's journey, from entry point to task completion. Complementing this, screen flows offer a detailed view of each screen and its transitions, further refining the user experience.
Reflection and moving forward
Launch Status: Delayed due to shifting priorities and changing roadmaps.
Android OS Version: Planned, but not yet implemented.
Design Guidelines: Currently follows Apple Human Interface Guidelines, best suited for iOS.
Future Android Adaptation: Adapt to Android OS following Google Material Design Guidelines.
Production Status: The deployed version was still under active development.
Post-Launch Optimization: Launch the full app and collect real-world user data for optimization.
Collaboration Challenges: Balancing client requirements, design, and development limitations.
Key Learnings: Important takeaways related to product and business processes.
Hello, I am Dennis. 👋🏻
As a dedicated UI/UX designer with 8 years of experience, I specialize in B2C app design, web design, and graphic design.
I thrive in small team environments, where I solve problems independently and deliver impactful, user-centered solutions.
🇭🇰
Made in Hong Kong
🇺🇸
Made in California
Hello, I am Dennis. 👋🏻
As a dedicated UI/UX designer with 8 years of experience, I specialize in B2C app design, web design, and graphic design.
I thrive in small team environments, where I solve problems independently and deliver impactful, user-centered solutions.
🇭🇰
Made in Hong Kong
🇺🇸
Made in California
Hello, I am Dennis. 👋🏻
As a dedicated UI/UX designer with 8 years of experience, I specialize in B2C app design, web design, and graphic design.
I thrive in small team environments, where I solve problems independently and deliver impactful, user-centered solutions.
🇭🇰
Made in Hong Kong
🇺🇸
Made in California
© 2025 Dennis Lam
Created by me in Framer
© 2025 Dennis Lam
Created by me in Framer
© 2025 Dennis Lam
Created by me in Framer