Penghao Zhu
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
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:"
clear visualization for the waiting process throughout ordering, waiting, and pick-up?
a simple way to enable quick ordering or easily reordering process?
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.
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.
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.
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!
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.
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.
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…
Mood XR-(Coming Soon)
Browse dozens of professionally designed templates. Click, duplicate, customize.
UX/UI Design