Penghao Zhu

COFE+ Robot

COFE+ Robot

COFE+: Intelligent Coffee Assistant - Mobile App UX/UI Design

COFE+: Intelligent Coffee Assistant - Mobile App UX/UI Design

COFE+ Robot

COFE+: Intelligent Coffee Assistant - Mobile App UX/UI Design

COFE+ Robot

COFE+: Intelligent Coffee Assistant - Mobile App UX/UI Design

COFE+ Robot

Team Project Sep - Dec 2023 (12 weeks)

COFE+ Robot

Team Project Sep - Dec 2023 (12 weeks)

COFE+ Robot

Team Project Sep - Dec 2023 (12 weeks)

Long Island Zoning Atlas 2

Team Project Mar - May 2024

CONTEXT

Client:

Shanghai Hi-Dolphin Robot Technology

TEAM

Penghao Zhu (Me)
Jierui Chen
Yuxiang Qi
Chenyu Zhang

Xinyue Guo

MY ROLE

User Research

UIUX Design

IP Design

TOOLS

Figma
FigJam
Google Form

Photoshop

Red Dot Design Award

Core77 Design Awards

UX Design Awards

2024 Gold Prize

Background

What is COFE+ Robot?

COFE+ is a robot café that is designed for a modern coffee lifestyle. It is created to suit various indoor and outdoor scenarios, including office buildings, airports, parks, plazas, etc. Users can place orders via the COFE+ mobile app or the pad screen on the machine.

What is the Client’s Goal?

The goal of this project is to design an app that provides intuitive, customizable, and seamless experiences, aligning with COFE+.

User Research

What do Users Want?

After sending out the survey, we received 200+ responses. Results showed 78% prioritized time-saving, 67% found robot-made coffee interesting, and 86% drank 1-2 cups daily, with 43% drinking 3+ cups. Additionally, 73% valued a pre-order app to avoid peak-hour queues.

User Interview

Following these results, we reached out to 22 individuals representing various groups, such as professionals, students, and tech-curious consumers, conducting 30 minutes one-on-one interviews to better understand their habits, pain points, and expectations.

Persona

After analyzing user research results, I identified the target user groups and their pain points. To gain deeper insights into user goals, I developed two personas, each representing one of the main target user groups and their behavior patterns and goals.

Competitive Research

We also conducted extensive competitor research, including both direct and indirect competitors. Here is the complete and detailed competitor research link—please feel free to view it.

Ideation

Brainstorming

Based on insights identified from user research, I explored three key directions to enhance the COFE+ experience: efficiency, robotic barista experience, and interactive ordering system. 

Design Opportunity

"How might we design a user-friendly Coffee robot app that have:"


  1. clear visualization for the waiting process throughout ordering, waiting, and pick-up?


  1. a simple way to enable quick ordering or easily reordering process?


  1. engaging interactions with the app and COFE+ robots to enhance user experience?

"How might we design a user-friendly Coffee robot app that have:"


  1. clear visualization for the waiting process throughout ordering, waiting, and pick-up?


  1. a simple way to enable quick ordering or easily reordering process?


  1. engaging interactions with the app and COFE+ robots to enhance user experience?

"How might we design a user-friendly Coffee robot app that have:"


  1. clear visualization for the waiting process throughout ordering, waiting, and pick-up?


  1. a simple way to enable quick ordering or easily reordering process?


  1. engaging interactions with the app and COFE+ robots to enhance user experience?

01 Problem

"How might we design a clear visualization for the waiting process throughout ordering, waiting, and pick-up?"

The COFE+ Process Bar Widget & Reorder Page

COFE+ Process Bar Widget: Focused on solving the lack of visibility during coffee-making, we designed a robotic-themed progress bar to provide real-time updates and clearly display waiting times in a simple, intuitive way.

Order Page: Created an order page where users can easily view order details and pick-up codes. Added interactive animations to boost engagement and enhance the overall experience.

02 Problem

"How might we design a simple way to enable quick ordering or easily reordering process?"

Simple Order Process & Reorder Process

Simple Ordering Process: Designed a clear ordering flow that highlights the coffee robot's personalization features, allowing users to customize their coffee preferences. Added a pick-up time customization option to save users time and ensure the coffee is served at the perfect temperature when they arrive.

Reorder Process: Created an Order History page and a Favorites page, enabling users to save and quickly reorder their favorite drinks, improving efficiency and user satisfaction.

03 Problem

"How might we design a engaging interactions with the app and COFE+ robot to enhance user experience?"

COFE+ IP & AI Order Recommendation

COFE+ Robot IP: Developed a distinctive IP character for the coffee robot, giving it a unique identity. This robot engages with users in the app, offering tips and order assistance through AI, adding fun and intelligence to the experience.

Final Design

01 Solution

Real-Time Progress: The COFE+ Process Bar Widget

COFE+ process bar widget: designed a process bar widget that monitors and provides real-time feedback on the coffee-making progress. By incorporating a robotic theme and clearly displaying the waiting time, we addressed the pain point of the lack of visibility during the coffee-making process in an intuitive and straightforward way.

Real-Time Progress: The COFE+ Process Bar Widget

COFE+ process bar widget: designed a process bar widget that monitors and provides real-time feedback on the coffee-making progress. By incorporating a robotic theme and clearly displaying the waiting time, we addressed the pain point of the lack of visibility during the coffee-making process in an intuitive and straightforward way.

Real-Time Progress: The COFE+ Process Bar Widget

COFE+ process bar widget: designed a process bar widget that monitors and provides real-time feedback on the coffee-making progress. By incorporating a robotic theme and clearly displaying the waiting time, we addressed the pain point of the lack of visibility during the coffee-making process in an intuitive and straightforward way.

Seamless Ordering Experience: Intuitive Order Page with Interactive Delight

Order page:  designed an intuitive order page where users can view all the details of their order, including their pick-up code. Additionally, interactive animations are incorporated to enhance engagement and provide a delightful user experience.

Seamless Ordering Experience: Intuitive Order Page with Interactive Delight

Order page:  designed an intuitive order page where users can view all the details of their order, including their pick-up code. Additionally, interactive animations are incorporated to enhance engagement and provide a delightful user experience.

Seamless Ordering Experience: Intuitive Order Page with Interactive Delight

Order page:  designed an intuitive order page where users can view all the details of their order, including their pick-up code. Additionally, interactive animations are incorporated to enhance engagement and provide a delightful user experience.

02 Solution

Personalized & Time-Saving: A Simple, Smart Ordering Process

Simple ordering process: designed a clear and straightforward ordering process. Furthermore, this ordering method fully highlights the coffee robot's powerful personalization capabilities, allowing users to customize their coffee based on their preferences. To save users time, we offer an option to customize the pick-up time, enabling users to collect their coffee without enduring long waits. The robot also prepares the coffee according to the selected pick-up time, ensuring that it is served at the optimal temperature when the user arrives.

Personalized & Time-Saving: A Simple, Smart Ordering Process

Simple ordering process: designed a clear and straightforward ordering process. Furthermore, this ordering method fully highlights the coffee robot's powerful personalization capabilities, allowing users to customize their coffee based on their preferences. To save users time, we offer an option to customize the pick-up time, enabling users to collect their coffee without enduring long waits. The robot also prepares the coffee according to the selected pick-up time, ensuring that it is served at the optimal temperature when the user arrives.

Personalized & Time-Saving: A Simple, Smart Ordering Process

Simple ordering process: designed a clear and straightforward ordering process. Furthermore, this ordering method fully highlights the coffee robot's powerful personalization capabilities, allowing users to customize their coffee based on their preferences. To save users time, we offer an option to customize the pick-up time, enabling users to collect their coffee without enduring long waits. The robot also prepares the coffee according to the selected pick-up time, ensuring that it is served at the optimal temperature when the user arrives.

Quick Reorders Made Easy: Favorites & Order History Pages

Reorder process: designed an Order History page and a Favorites page. Users can save their orders in the Favorites page, making it quick and convenient to reorder in the future, enhancing both efficiency and user experience.

Quick Reorders Made Easy: Favorites & Order History Pages

Reorder process: designed an Order History page and a Favorites page. Users can save their orders in the Favorites page, making it quick and convenient to reorder in the future, enhancing both efficiency and user experience.

Quick Reorders Made Easy: Favorites & Order History Pages

Reorder process: designed an Order History page and a Favorites page. Users can save their orders in the Favorites page, making it quick and convenient to reorder in the future, enhancing both efficiency and user experience.

03 Solution

Meet Your Coffee Companion: The COFE+ Robot IP

COFE+ Robot IP: created a unique IP character for the robot, giving the COFE+ robot its own distinctive identity. This little robot interacts with users within the app, providing tips and assisting with orders using AI, enhancing the overall experience with added fun and intelligence.

Meet Your Coffee Companion: The COFE+ Robot IP

COFE+ Robot IP: created a unique IP character for the robot, giving the COFE+ robot its own distinctive identity. This little robot interacts with users within the app, providing tips and assisting with orders using AI, enhancing the overall experience with added fun and intelligence.

Meet Your Coffee Companion: The COFE+ Robot IP

COFE+ Robot IP: created a unique IP character for the robot, giving the COFE+ robot its own distinctive identity. This little robot interacts with users within the app, providing tips and assisting with orders using AI, enhancing the overall experience with added fun and intelligence.

Homepage

Efficiency Meets Enjoyment: The COFE+ Homepage Design

Our homepage design consists of three sections, arranged from top to bottom: real-time video of the robot making coffee, three efficiency-enhancing widgets, and a quick order area. The three widgets include: 1. Coffee-making process bar; 2. User points; 3. Time saved by using COFE+. We wish everyone can save time and enjoy with coffee!

Efficiency Meets Enjoyment: The COFE+ Homepage Design

Our homepage design consists of three sections, arranged from top to bottom: real-time video of the robot making coffee, three efficiency-enhancing widgets, and a quick order area. The three widgets include: 1. Coffee-making process bar; 2. User points; 3. Time saved by using COFE+. We wish everyone can save time and enjoy with coffee!

Efficiency Meets Enjoyment: The COFE+ Homepage Design

Our homepage design consists of three sections, arranged from top to bottom: real-time video of the robot making coffee, three efficiency-enhancing widgets, and a quick order area. The three widgets include: 1. Coffee-making process bar; 2. User points; 3. Time saved by using COFE+. We wish everyone can save time and enjoy with coffee!

  1. Live coffee making process

  1. 3 different widgets

  1. Quick ordering path

Impact

COFE+ won the Gold Prize at the Red Dot Award 2023

"Wow, the Cofe+ project looks amazing! I love the idea of having a robot assist with coffee orders — it’s so cool and futuristic, but also super practical. The design feels really user-friendly, and I can easily see myself using this daily!"

— From the client

Takeaways

"Looking back at the Cofe+ project, there were a few key things that really stood out to me as a UX designer."

Real user needs always come first

When we were designing, whether it was the coffee progress bar or the time-saving widget, the whole idea was to solve real, everyday user pain points. I realized how important it is to step into the user's shoes and ask: "What would truly make this easier or more enjoyable for me?" That mindset shaped almost all our design decisions.

Real user needs always come first

When we were designing, whether it was the coffee progress bar or the time-saving widget, the whole idea was to solve real, everyday user pain points. I realized how important it is to step into the user's shoes and ask: "What would truly make this easier or more enjoyable for me?" That mindset shaped almost all our design decisions.

Real user needs always come first

When we were designing, whether it was the coffee progress bar or the time-saving widget, the whole idea was to solve real, everyday user pain points. I realized how important it is to step into the user's shoes and ask: "What would truly make this easier or more enjoyable for me?" That mindset shaped almost all our design decisions.

Data can do more than I thought

One thing that stood out to me was how excited users got when they could actually see tangible benefits, like the amount of time they saved using Cofe+. It reminded me how powerful simple numbers can be—not just as a feature but as a motivator. This is something I’ll definitely carry into future projects.

Data can do more than I thought

One thing that stood out to me was how excited users got when they could actually see tangible benefits, like the amount of time they saved using Cofe+. It reminded me how powerful simple numbers can be—not just as a feature but as a motivator. This is something I’ll definitely carry into future projects.

Data can do more than I thought

One thing that stood out to me was how excited users got when they could actually see tangible benefits, like the amount of time they saved using Cofe+. It reminded me how powerful simple numbers can be—not just as a feature but as a motivator. This is something I’ll definitely carry into future projects.

Innovation is cool—simplicity is cooler

The robot was the superstar of this project. But what I found really interesting was how much users appreciated the simplicity of the interface and flow. It made me realize that no matter how fancy or innovative your feature is, if it’s not easy to use, it doesn’t really work.

Innovation is cool—simplicity is cooler

The robot was the superstar of this project. But what I found really interesting was how much users appreciated the simplicity of the interface and flow. It made me realize that no matter how fancy or innovative your feature is, if it’s not easy to use, it doesn’t really work.

Innovation is cool—simplicity is cooler

The robot was the superstar of this project. But what I found really interesting was how much users appreciated the simplicity of the interface and flow. It made me realize that no matter how fancy or innovative your feature is, if it’s not easy to use, it doesn’t really work.

Teamwork makes the magic happen

As much as user needs and design expertise shaped the project, this wouldn’t have been possible without cross-team collaboration. The way we all worked together—whether it was designers, developers, or researchers—taught me that UX design is really a team sport. Good communication and understanding between disciplines were key.

Teamwork makes the magic happen

As much as user needs and design expertise shaped the project, this wouldn’t have been possible without cross-team collaboration. The way we all worked together—whether it was designers, developers, or researchers—taught me that UX design is really a team sport. Good communication and understanding between disciplines were key.

Teamwork makes the magic happen

As much as user needs and design expertise shaped the project, this wouldn’t have been possible without cross-team collaboration. The way we all worked together—whether it was designers, developers, or researchers—taught me that UX design is really a team sport. Good communication and understanding between disciplines were key.

You may also be interested in…

Mosaic

Mental health app that offers personalized resources, therapy, wellness practices.

UX/UI Design, Mobile Design

Mood XR-(Coming Soon)

Browse dozens of professionally designed templates. Click, duplicate, customize.

UX/UI Design