COFE+ Barista Ecosystem
A multi-device robotic coffee ordering experience balancing efficiency with brand experience, has been recognized by international design awards.
· Cross-Device Ecosystem · Emotional Automation · Service Experience ·
Role
Designer
Timeline
3 months
April - July 2024
Team
1 Project Manager
2 Designers
Skills
User Research, Competitive Analysis, Flow Design, Visual Design, Wireframing, Usability Test, Prototyping
01 The Problem
Shanghai-based start-up “Hi-Dolphin Robot Technology Co., Ltd.“ launched their new robotic coffee kiosk product.
Based on market research and app review analysis on competitors, we identified 3 key problems in the current ordering experience :
1️⃣ Robotic coffee systems prioritize efficiency but lack emotional engagement.
2️⃣ Cross-device experiences are fragmented, creating friction across the user journey.
3️⃣ Inconsistent visual language weakens brand identity and obscures its technological sophistication.
02 Solutions
A unified cross-device system with a character-driven interaction and scalable visual language.
03 Flow Design
Customers experienced fragmented interactions across devices, with information overload and unclear transitions among key steps, leading to confusion and inefficiency.
→ Design Response:
I designed the overall user flows among the machines: mobile, tablet, display screen, robotic barista.
There are mainly 4 parts: Order 👉 Track 👉 Pick Up / Cancel
With the overall user flow in mind, we broke into 3 groups to draw wireframes on 3 devices.
🟡 Mobile App : 2 members
🟡 Tablet App : 1 member
🟡 Display Screen : 1 member (Me)
Iteratively tested to improve clarity and reduce friction across key steps.
04 Visual Design
Humanizing Robotic Service
Customers perceived robotic coffee services as efficient but impersonal, leading to low emotional engagement.
→ Design Response:
Introduced a character-driven interaction layer to make the robotic experience more approachable and emotionally engaging.
06 Style Guide
I organized the Style Guide for the team to keep the consistency and scalability.
Style Guide
I built a scalable visual system for the team to keep the consistency.
05 Final UI Design
After creating the design system and applying them, we got a visually consistent prototype, strengthening the brand identity of “COFE+“.
Mobile App
Tablet App
Display Screen
06 Reflection
⭐ This project explores how automation can be balanced with human-centered design.
⭐ By combining system thinking with visual identity, the experience shifts from a purely functional tool to a more engaging service.
⭐ It highlights the role of design in bridging efficiency and emotional connection.