Reusable cups paired with a coffee credit platform that connects companies and coffee shops.

Connected Cup

Project

Info

Role

Product Designer

Timeline

June - July 2024

Tools

Figma

In the Summer of 2024, I was contracted to work on a project for a reusable cup manufacturer - Topl. I prepared a web app prototype consisting of employee experience, admin management and cup scanner, merging all the flows into one ecosystem.

Overview

Company was planning to launch a new product - reusable coffee cups connected to a management platform. They had a basic overview of the system and needed a visual demo to present to stakeholders.

I designed the complete web app ecosystem interface with separate flows for each user segment and advised the client on product strategy.

Problem

Outcome

End result

The idea

Digital Cups - each coffee cup is manufactured by Topl and equipped with a digital tag. The cups are purchased by companies and distributed among employees. Each cup is reusable, digitally signed and can be scanned via mobile app.

Credit redemption - the cups can be scanned at coffee shops to redeem the coffee credit. Employees are granted benefits (coffee credits), meanwhile the corporations support small coffee businesses by purchasing credits in advance.

Key features of Connected Cup

Connected platform - the cups can be loaded with coffee credit through the platform. The platform connects corporations, coffee shops and employees, allowing credit purchase, expense tracking and waste reduction reports.

Design process

Understanding the product

1

internal meetings, analyzing business needs, projecting user stories, market research

2

Functional design

mapping out user flows, outlining information architecture

3

Ideation

exploring possibilities, wireframes and lo-fi prototype

4

Visual consistency

5

Final design

defining branding, testing, design iterations, building a design system

hi-fi prototype

Working on solutions

Remodeling operational design

Challenges and execution

As we uncovered more challenges and issues with the flow, initial business model had to be updated to accommodate all parties involved. As a result, I assisted as the UX strategist and was involved in the operational design planning. For example, we changed our approach about who would be purchasing the cups (corporations or coffee shops) and how they would be distributed. This affected the user flows and the UI and we had to thoroughly analyze multiple user scenarios.

Quick and easy access

Redeeming credits needed to be designed in a way that does not slow down coffee shop employees' daily rhythm. Scanning the cups and spending credits had to be immediate. I reviewed competitors' solutions to gain more insight into how coffee shops operate with reusable cups, however I wish we could have conducted field research and gather more empirical data.

Simplifying the UI

The platform was designed as a web app and meant to be a mix of ERP and CRM systems with custom reporting included. I had worked with such systems before so I used my professional knowledge and user-centric approach to make the interface as intuitive as possible. As the project continued, we realized how many more options need to be included and I had to redesign information architecture to accommodate all user segments' needs.

Website

Results

Project outcomes

This project would be an extension of the Toplcup (reusable coffee cup) already offered by the client. The prototype has been presented at World of Coffee conference in Copenhagen by Topl team and they are currently gathering funds to launch.

I delivered a high-fidelity prototype including UI design and flows for the employee (cup user), the corporate administrator, the coffee shop administrator and the barista. The platform has been designed as a web app, available for everyone via browser and adjusted for desktop and mobile devices.