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.

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

Takeaway

Research

Design

Collaboration

Analysis

Business insights

User interviews

Secondary research

High-level IA

User flow

High level

Low level

Wireframe/Wireflow

Artifacts

Mockup

Usability tests

Design system

Prototype

Agile

Sprints

SIT

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

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.

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

Questions

Tell me about your last online order?

What motivated to order online?

Why did you choose that app/method?

Anything annoyed you about it?

Why did you pick that restaurant?

Responses

They have developed a habit since COVID hit.

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.

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.

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

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.

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.

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.

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

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.

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

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.

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

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

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

Mock-ups

Ordering

Loyalty Program

Social Sharing

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

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.