Your Coffee Companion
June 2025 - Aug 2025
PONG Mobile App Research and Development Internship
PONG is a product design startup based in Hong Kong dedicated to creating products that are interesting, functional, and beautiful. This project is related to their most recent, RedDot award winning design, Extracion—a smart coffee maker that teaches you how to brew your perfect cup of coffee.
During this summer, I co-led the early design and development of Extracion’s IT-pairing coffee companion app. The app provides users with personalized tools to explore coffee culture—ranging from smart brewing and café discovery to coffee diaries and loyalty rewards. The goal was to create a seamless ecosystem connecting users, partner cafés, and IoT coffee devices through a clean, intuitive interface.
Deliverables: Completed UI/UX design, high-fidelity prototype (100k+ lines of code), comprehensive solution documentation for the Extracion app.
Tools: Figma, ReactNative, Expo, AWS, Google Cloud, Meta Developer Tools, Shopify API, Node, Git
Roles: Project Manager, Researcher, UI/UX Designer, Frontend Developer, Lead Backend Solution Developer
Team: Wing Chan, Lachlan Lai, Helen Wong
Our Design Process
Before: Overwhelming and Fragmented
When we first joined the team at PONG, the design system felt visually heavy and conceptually disjointed. The dark theme, dense typography, and inconsistent layouts made navigation confusing and cognitively demanding. Each tab looked and behaved differently, and users often described the interface as “overwhelming” or reported feeling unaware where to begin. What was meant to feel like a friendly companion for coffee lovers instead felt like an unapproachable dashboard.
This redesign was more than a visual refresh, it was an exercise in design clarity. By turning a complex, feature-heavy prototype into something intuitive and emotionally resonant, we redefined what a “smart” coffee app could feel like: less about data, more about daily ritual and joy.
Impact
+30%
improvement in task efficiency
Users completed key flows (logging brews, finding cafés) noticeably faster after the redesign.
Overloaded navigation bar: Six icons with minimal labeling made it unclear what each section did; users couldn’t distinguish between “Café,” “Featuring,” and “Wallet.”
Competing visual hierarchies: Large promo banners, multiple button styles, and floating icons all competed for attention, with no clear primary action.
Low contrast and legibility issues: Light blue text on gray backgrounds reduced readability and accessibility, especially under natural light.
Visual clutter from duplicate affordances: Redundant navigation (top icons + mid-page buttons) created confusion and broke task flow.
Cognitive overload: Too many visual elements per screen left users unsure where to start, feedback from early testers described it as “busy” and “uninviting.”
We knew very early on that this design was not user-friendly. So we took it upon ourselves as a team to fundamentally redesign the whole product. From color palettes to layouts to the fundamental user experience, we reworked the entirety of the original app design with one goal in mind: to make coffee culture feel approachable.
After: Calm, Guided, and Human
We wanted this app to truly feel like your companion, to capture the warmth and creativity of coffee culture, to feel like a calm guide rather than a technical tool. Our north star was approachability: to make every interaction feel natural, intentional, and grounded in discovery. This meant reducing visual noise, clarifying hierarchy, and designing an experience that teaches and delights as users brew, scan, or explore.
Warm visual identity: Introduced a light, café-inspired palette (soft whites and espresso browns) to replace the flat gray, creating immediate emotional warmth..
Streamlined content layout: Consolidated multiple competing sections (classes, café finder, events) into clear, tappable cards that follow a consistent grid and aspect ratio.
Visual rhythm & spacing: Added breathing room between cards and section headers, making each element scannable and touch-friendly.
Encouraged engagement: Introduced an easily recognizable “+” button for adding new logs, a clear call-to-action replacing the previously ambiguous floating button.
Illustrative guidance: Added clean, animated vector illustrations to visualize brewing steps, replacing dense text and abstract icons.
Categorized filtering system: Added clear filter chips on both the Home Screen (Coffee Recipe, KOL Featuring, Promotion), and Brew Logs (Pour Over, Cold Brew, French Press) to help users quickly locate content/personal logs without cognitive overload.
Increased
perceived clarity and trust
9 out of 10 test participants described the new interface as “much cleaner” and “easier to navigate.”
Reduced
cognitive load on the user
Simplified layouts and improved hierarchy helped users complete actions with fewer errors and less hesitation.
Improved
consistency of the design system
Unified spacing, typography, and iconography across all modules built a stronger, more cohesive brand identity.
Bridged
the digital and physical
by mirroring the tone and materials of the physical product, the app now feels like a true companion to the brewing ritual.
Our Research and Development Process
Another large responsibility that was entrusted to me and my co-developer was the solution development itself. Because this was a company unfamiliar creating tech products, they relied on us to create the entire solution for the product whilst we were developing. This was an incredible learning opportunity, one that I am very grateful for and would like to showcase.
1. Authentication and Cross-Platform Integration
Research Goal:
Design a secure and seamless signup process that connects a user’s account across three platforms — the Extracion app, Shopify store, and Voucherify coupon system — without requiring multiple logins.
Final Implementation:
Implemented Supabase Auth for the core app, while deferring Shopify and Voucherify linkage to backend automation handled through webhooks. This approach ensured smoother user onboarding during testing while keeping the system modular for future expansion.
2. Home Feed and Newsletter System
Research Goal:
Create a dynamic feed that displays recipes, promotions, and company news pulled from the brand’s Instagram and internal CMS.
Final Implementation:
Developed a scrollable React Native home feed that renders newsletters and posts via Supabase-stored content. While the initial Instagram API integration was explored, the final build emphasized stability and content moderation through manual uploads synced with the backend.
3. Coupon and Rewards System
Research Goal:
Enable users to collect and redeem digital coupons from partner cafés, track reward points, and connect purchases to loyalty incentives.
Final Implementation:
Built a dedicated Rewards Wallet page showing partner coupons and points totals. Coupons were managed via Supabase tables and designed for in-person QR scanning, while point accumulation logic was simplified for the MVP stage, leaving deeper Shopify automation for later phases.
4. Café Finder
Research Goal:
Integrate the Google Places API to help users discover nearby partner cafés and view live details such as address, menu, and hours.
Final Implementation:
Implemented a functional café map and list view powered by Google Places, supplemented by stored café data in Supabase for consistent partner branding. Added the ability for users to save cafés to their personal list and view their profiles directly from the app.
5. Coffee Label Scanner
Research Goal:
Leverage AWS Textract and Rekognition to extract text and visual details from coffee bean packaging, automatically generating product entries with brand, origin, and flavor notes.
Final Implementation:
Prototyped a lightweight label scanning feature using local OCR testing and mocked recognition outputs, allowing users to photograph bean packaging and populate structured fields manually. Full AWS integration remains a planned post-MVP enhancement.
6. Smart Coffee Maker (IoT Connectivity)
Research Goal:
Enable Bluetooth Low Energy (BLE) communication between the app and the Extracion coffee maker to display live brewing metrics and guide users through the brewing process.
Final Implementation:
Developed a useBLE hook and shared BLE context across React Native screens for real-time data streaming (weight, temperature, time). Users could monitor brewing progress and visualize it through live state updates, successfully linking the hardware prototype to the mobile interface. We also were involved in the design of the brewing experience itself, researching steps needed to brew the perfect cup of coffee for our demo.
7. Brew Log
Research Goal:
Design a digital journal where users could record their brews, compare recipes, and track flavor progress over time.
Final Implementation:
Developed a Brew Log feature integrated with the BLE data stream, automatically saving brew metrics (temperature, duration, ratio) after each session. Users could add tasting notes, bean details, and brewing methods, turning each session into a personalized record. Data was stored on the user’s device with AsyncStorage for privacy.
8. Shop and E-Commerce Integration
Research Goal:
Enable users to browse and purchase coffee products, beans, and accessories directly through the app, powered by Shopify.
Final Implementation:
Implemented a Shop tab with a clean, card-based layout that pulled product data from Shopify’s Storefront API. Integrated purchase redirects opened the Shopify checkout within the app’s webview, maintaining brand continuity. For the MVP reward-point redemption were scoped for later backend development.
Impact
Through continuous iteration and close collaboration between design and engineering, Extracion’s research phase evolved into a polished, user-tested MVP that delivered the app’s core promise: a connected, personalized coffee ecosystem.Each feature was developed with modular scalability in mind—laying the foundation for machine learning–powered discovery, merchant analytics, and fully integrated e-commerce experiences in future releases.
Our Deliverables
1. Evolved Design System
Following iterative user testing and feedback from our pilot sessions, we refined the app’s visual and interaction language into a cohesive design system.
The updated interface emphasized clarity, warmth, and minimal friction, consistent with the sensory, slow-living values of coffee culture.
Key design changes included:
A modular card-based layout across all tabs for consistency
Updated color palette and typography for better contrast and accessibility
Simplified navigation bar with clearer hierarchy
Responsive states for BLE connectivity and scan feedback
Iconography and motion cues reinforcing the “craft meets technology” identity
These refinements unified the frontend experience and grounded the technical features in a visually coherent, emotionally engaging design language.
2. High-Fidelity Prototype and Frontend Implementation
Our high-fidelity prototype, built in Figma and implemented in React Native (Expo), represented the complete user journey from home feed to brewing visualization.
The final frontend integrated real data and interactions, allowing users to:
View cafés, coupons, and news dynamically from AWS
Connect to the physical coffee maker via BLE and visualize brewing metrics
Record each session in their Brew Log and browse products in the Shop tab
Navigate a cohesive visual language across light and dark modes
The implementation merged interaction design and production code, demonstrating how user experience decisions translated directly into live app features.
3. Solution Documentation
We compiled a complete 120+ page Solution Documentation Report outlining the final system architecture, technical specifications, and implementation plan for Extracion.
This document bridged design intent and engineering execution—detailing backend structure (AWS, React AsyncStorage, Instagram API, Shopify integrations), frontend data flow, and future development milestones.
It served as both a handover guide for engineers and a reference document for stakeholders to understand how the Extracion ecosystem operates across app, hardware, and partner platforms.
Key inclusions:
Backend architecture and API schema overview
BLE and IoT data flow between the Extracion device and mobile app
Frontend navigation map and database schema alignment
Future roadmap for feature scaling (LLM search, merchant portal, analytics)
Reflection
Working on Extracion was unlike any other project I’ve been part of. It wasn’t just an app—it was an entire ecosystem: connecting IoT hardware, a multi-vendor backend, a partner café network, and a growing community of coffee enthusiasts. Being entrusted with such a complex, high-stakes system as student designers and developers was both humbling and exhilarating. It challenged us to think beyond interfaces and design with scalability, security, and real-world partnerships in mind.
The project taught me how to balance creative vision with technical execution. Every decision, whether it was refining a screen transition or structuring our data models, required us to collaborate across disciplines and anticipate how design and engineering would coexist. I’m deeply grateful to have been trusted with that level of responsibility and autonomy.
But more than anything, what made this project special was the team. Our small but passionate group spent long days debugging, designing, and laughing together, often over actual cups (or cans) of coffee. We built not only a product, but also a shared sense of purpose and friendship. Those moments of late-night brainstorming, spontaneous breakthroughs, and collective pride when we saw the app running on a physical device are memories I’ll always carry with me. I look forward to our online Monopoly matches every week, and I am incredibly grateful to have not only had the opportunity to work with such passionate, phenomenal people, but to now call them my friends.
Extracion reminded me why I love building things: not just for what they do, but for the people and stories behind them. It was a project defined by trust, creativity, and connection, both in its design and in the team that brought it to life.
