Designed and conceptualised a tracking platform
for stakeholders to track their hardware, production
and consumption volumes of their spirits
Successfully onboarded and migrated close to
20 partners onto the new system
Role
UI Designer, UX Researcher
In Collaboration with
Agile Labs
Tools
Figma, Lucid Chart
ecoSPIRITS is a circular economy sustainable packaging company tackling the environmental impact of single-use glass in the spirits industry. One of its core hardware - the ecoTOTE, enables reusable packaging for spirits, significantly reducing waste and emissions. However, there is no system in place to address the usability and operational challenges.
This case study explores how we addressed the problems of asset tracking and operational inefficiencies through a user-centered redesign of the CircularONE platform.
Lack of Fleet Protection
- ecoTOTEs are unaccounted for as totes get missing last known location of the tote is unavailable, creating accountability and logistical issues
Complexity of managing multiple applications to track their daily operations
- Users are using 3 applications to complete their daily operations
Hence, there is a need to design a user friendly and scalable interface that enables all stakeholders to be able to seamless track their ecoTOTEs, consolidate daily operations into a single platform and simplify onboarding process while ensuring that data privacy is not compromised.
To uncover user needs and behavioral patterns, we conducted interviews with our internal Operations Team. We identified five primary user personas, each with unique goals, responsibilities, and interactions with the platform.
Persona #1: Brand Owner
Interested in understanding how much of their owned spirit has been filled and consumed over time.
Persona #2: Licensed Operator
Manages the filling of ecoTOTEs with spirits and tracks filling history.
Users who are able to conduct filling activities to fill ecoTOTEs.
Persona #3: Distributor
Handles the logistics of transporting filled ecoTOTEs to venue partners.
Users who are able to allocate filled ecoTOTEs and transport them to various venues.
Persona #4: Venue Partners
Operates one or more venues and interacts directly with consumers; needs to track delivery and consumption.
Users who generally own one or more locations and deal with potential customers on a day-to-day basis.
Persona #5: ecoSPIRITS Team Members
Responsible for inventory management and ensuring all ecoTOTEs are properly tracked within the closed-loop system.
Users who take charge of the inventory and ensure that all ecoTOTEs are accounted for within the closed-loop system.
We synthesised user interviews using affinity mapping to identify recurring themes and core pain points. Key findings included:
Users operate across multiple platforms, making it hard to get a clear, real-time overview of their operations. The redesigned platform must consolidate these functions without sacrificing existing capabilities
The legacy CircularONE interface lacked clarity and intuitive navigation, leaving users uncertain about how to access critical information - such as inventory fleet tracking, or production and consumption metrics.
There was no reliable way to track the current inventory of ecoTOTEs across different locations and stakeholders.
Role-based access control is essential.
- Hardware owners should view full lifecycle data
- Allocatees should only see data from their allocated timeframes
Users expressed a strong need for a streamlined onboarding process. Actions should be quick, with minimal steps to complete core tasks.
Hence, it is important to ensure that while designing the new CircularONE platform, it should be able to
- Unify operations into a single, coherent platform
- Present data clearly through dashboards
- Enable precise hardware tracking and lifecycle visibility
- Support strict access controls to maintain data privacy
- Provide a seamless onboarding experience, minimising friction for new users
Platform Management (ecoSPIRITS only)
- Tracking of all hardware, products, and partners
- Impersonation of partners to resolve any (potential) issues
Dashboard Management
- Visual indicators on existing inventory, production and consumption volume of spirits
Partner Management
- User and role management with permission controls
- Intuitive UI for adding, editing and deactivating users
Hardware Management
- Lifecycle tracking: Registration, Allocation, Transfer, Configuration, Fill, and Deplete
- Clear status indicators to show hardware availability (Active, Idle, Inactive or flagged condition as Faulty)
- History logs to track audit trails of hardware activities
Product Management
- Traceability for product recalls or quality issues
- Easy creation of product data for hardware fill
Notification Management
- Automated email notifications triggered by specific system events
Integration Management
- API management portal for external systems to integrate seamless with CircularONE
- Monitoring dashboards and history logs to track API usages and errors
After analysing the research insights, I mapped out key user flows to ensure seamless navigation across CircularONE's core features. The goal was to create an intuitive and interconnected experience without compromising development feasibility.
User flows were developed using Lucidchart and Figma. Each flow is followed by a collaborative review sessions with the Technical Project Manager and Head of Operations. These sessions helped validate that the flows aligned with both user needs and technical constraints.
Once the user flows were approved, I translated them into low-fidelity wireframes for the web and mobile interfaces. Thereafter, we collaborated with an external agency - Agile Labs to translate them into hi-fidelity wireframes.
Platform Management (ecoSPIRITS only)
- ecoSPIRITS users are able to access an overview grid/table of all active Hardware, Products, and Partners within the system
Dashboard Management
- Created a user-centric dashboard displaying Production and Consumption volumes segmented by Product, Site, and Hardware. This visual overview supports better decision-making and allows users to monitor circularity KPIs in real time.
Partner Management
- Streamlined the process for partners to create and manage user accounts under their organization. Redesigned role-based access control to allow precise permission management, supporting complex partner structures across multiple locations.
Hardware Management
- Focused on supporting day-to-day operations by enabling users to scan and track hardware for events such as Filling, Depletion, Allocation, and Transfer
- Introduced inactive hardware tracking, where the system flags any units without activity for over 90 days — helping minimize asset loss and improve operational accountability.
Product Management
- Enhanced the product module to support both product creation and product recalls
- In the event of a recall, users can trace affected hardware units across the network, improving product safety and compliance workflows.
Notification Management
- Designed email notifications for users for specific events such as Product Recall, Faulty Hardware - to ensure timely responses and reduce operational risks
Integration Management
- Developed a dedicated module for API Management, enabling technical users to connect CircularONE with third-party systems. The integration portal supports scalable, cross-functional connectivity across logistics, production, and partner tools
Building on the wireframe sketches and mapped user journeys, I collaborated closely with a UI Designer from Agile Labs to develop high-fidelity screen designs for the CircularONE platform. These designs served as the foundation for the development team to implement and code the final product.
To ensure CircularONE’s features are intuitive and robust across different user types, usability testing was integrated into our development and deployment lifecycle. Testing was conducted in Staging environment prior to production release, with direct involvement from internal stakeholders (primarily Operations Team).
Development Environment Testing
- Once Agile Labs completed the initial feature build, the Technical Product Manager and I conducted a functional test within the Development Environment. This quick validation focused on:
Feature functionality
Workflow completion
UI responsiveness
This step allowed us to catch any early blockers or bugs before involving a larger group of testers.
Unmoderated Usability Testing (Staging)
- UAT was conducted on the Staging Environment with our Operations Team, our primary internal users.
Team members were given tasks to complete using the new features. We collected feedback through issue reports, screen recordings, and debriefs.
- Observed issues included unclear scan instructions, and missing important information that needs to be captured (i.e. Fill Operator Name etc.)
Only after successful completion and sign-off by the Operations Team did the technical team push the update to Production.
We conducted a soft launch of CircularONE on selected markets (i.e. Mauritius) where our Technical Product Manager and Operations Team Member flew down to provide trainings and hear direct feedback about the application mainly for Features 3, 4 and 5. Overall, the stakeholders were generally pleased that they were finally able to get their hands on a functional CircularONE, where they could carry out their daily operations and track their current ecoTOTE inventory.
However, these stakeholders also provided feedback to the launched features where they felt that more could be done to improve the overall user experience. Some of the feedback were as follows:
Lack of Contextual Guidance
- As most of our instructions are written, users felt that it was difficult to comb through large amount words for them to understand what the workflow was about.
Lack of Workflow Requirements
- Most of the users were able to swiftly complete the workflow to the last step, only to face difficulty in completing the workflow as they have not previously created a site, or ensured that they have recorded the Filling Start and End Time.
Language Barrier
- Not all markets were fluent in English, hence users face difficulty in using the application
We implemented several UX enhancements to improve clarity across key workflows:
Workflow Requirements Slider
- A pre-workflow checklist slider was added to set clear user expectations before starting any task.
Step-by-Step Summary Descriptions and Contextual Visuals
- Each workflow step now includes a short summary to explain its purpose, improving comprehension.
- Added images and illustrations at each scanning step to show exactly what items users should scan.
Language Selector
- Introduced multi-language feature shortly to facilitate the onboarding of other markets. Languages included: Chinese, French, Spanish, Behasa Melayu, Dutch and Portugese.
These iterative UX improvements significantly reduced user confusion and improved workflow completion rates.
The design process maintained a strong feedback loop between technical feasibility and user needs, ensuring that updates were both implementable and impactful.
Following the launch of CircularONE, we established a feedback escalation process:
Collected real-time feedback from end-users
- The Operations and ecoSPIRITS staff who interact with the end-users on the ground will collect feedback and escalate them to the product team
- Through Google Analytics, we also created events that allowed us to track the success rates of users who land onto the workflow and the % of successful completion of the workflows
MVP Approach
- Technical team will evaluate whether each request warranted a new feature, a UX enhancement, or a deferral
The partners whose data has been migrated to CircularONE are legacy users from earlier applications previously used by ecoSPIRITS. We are currently rolling out CircularONE to various stakeholders in London. The Product Team is collaborating with the Operations and Support Team to collect on-the-ground feedback.
In collaboration with the UI Designer from Agile Labs, I contributed to the development of a new design system in Figma for ecoSPIRITS. We grounded our work in the existing brand guidelines, maintaining consistency by retaining the primary and secondary brand colours. To enhance the visual language, we expanded the palette with complementary shades and additional accent colours that align with ecoSPIRITS' brand identity.
We also introduced a comprehensive set of reusable components and design tokens, leveraging established icon libraries such as Material Design and Ant Design to ensure scalability and consistency across the product. The resulting style guide was crafted with direct reference to ecoSPIRITS’ branding standards, ensuring both brand alignment and design efficiency.
