UX / UI Case Study    |    May 2023 to Dec 2024

CircularONE

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

Overview

The Problem

In order for existing stakeholders to track their existing hardware, production and consumption volumes of their spirits, ecoSPIRITS uses minimally 3 applications (CircularONE, TrackAbout, SmartPour Pairing) to fulfil the stakeholders' needs. Hence, the main objective was to build an application that enables stakeholders to track their existing hardware, track their spirits' production and consumption volumes through a dashboard and pair SmartPours.

User Research

Understanding the User

In order to gain a better understanding of the users experiences, we first distinguish the different personas and the needs that they require.

Persona #1: Brand Owner
Persona #2: Licensed Operator
Persona #3: Distributor
Persona #4: Venue Partners

Thereafter, we try to understand user behaviours on the ground through their day-to-day interactions. More often than not, the Internal Operations Team who have the opportunities to meet the stakeholders will share with us their experiences. We listed the observations and insights, and did a simple affinity map to find out what were the common painpoints and problems that the users were currently facing.

Research Insights

Overall, we found out that it was difficult to consolidate all of the day-to-day operations at a glance and users were currently using more than 1 platform to carry out their daily operations. More often than not, the existing CircularONE platform could not present the captured information succinctly and neatly to the users, making them confused as to how to navigate and get the necessary data they wanted.

The key is to ensure that the new CircularONE platform will be able to include features that can cater to tracking, dashboard, SmartPour Pairing, and should offer no less than the existing softwares that ecoSPIRITS is using.

It is also important to note that there is a need to ensure data privacy and no data should be leaked across different stakeholders.

Ideate

Main Features

  1. Platform Management (ecoSPIRITS only)
    - Includes overall tracking of all existing Hardware, Product, Partners across CircularONE

  2. Dashboard Management

  3. Partner Management
    - Includes User, Role, Site Management

  4. Hardware Management
    - Includes Tracking, Registration, Allocation, Transfer, Configuration, Fill, Deplete

  5. Product Management
    - Includes Create, Management, Trace (Product Recall)

  6. Notification Management
    - Includes Email Notification

  7. Integration Management
    - Includes API Management

Prototype

User Flows & Wireframe Sketches

Our team proceeded to determine different user flows to ensure that all of the main features are interlinked and users can easily access to these features.

We listed out the steps that each user will require to access each feature, and from there we worked on the UI.

Prototype

Final Prototype

Based on our wireframe sketches, our team came out with the first hi-fi screen designs for the CircularONE Platform.

Test

Usability Testing

Based on the launch of CircularONE, the team gathered feedback from the team and made the necessary UI changes to improve the overall UX of the platform.

For instance, we included:
- Workflow requirements slider to ensure that user knows what to expect before starting a workflow
- Summary explanation before a user proceeds to start any step within a workflow
- Images / Illustrations to depict what the user should scan prior to every step within the workflow
- Ensure that all invalid scans have been resolved at the scan summary before proceeding to submit a workflow report

Design

UI Style Guide

As ecoSPIRITS does not have an existing Style Guide for web and mobile, we worked together with Agile Labs to create an brand new style guide for use. We introduced a wider colour spectrum, and designed a fix set of buttons and other components that are widely used across the platform.

Note: The new style guide is made with reference to ecoSPIRITS branding guidelines

Next Steps

Recommendations

With the launch of CircularONE, ecoSPIRITS is currently in the midst of onboarding new partners onto the platform. Existing partners with ecoSPIRITS are also in the midst of migrating from the old platforms onto the new CircularONE.

Moving forward, some considerations that can be explored in the future:

  1. Features that can allow ecoSPIRITS to track orders and manage shipping inventories

  2. Allowing users to bulk register their products without having to scan the hardware individually

  3. Enable users to track locations of their existing hardware through a global map so that users can understand the spread of their existing business

  4. Potential to allow CircularONE to connect and integrate with other platforms through API

Thoughts & Reflections

This was one of my first experience doing UIUX Design that focuses more on inventory fleet management. With the complexity of different stakeholders and the interconnectivity between stakeholders, it was difficult to draw the line as to how much data would be visible to different entities.

I took on a greater role as a UX Designer, as I have the opportunity to plan out different user journeys and workflows that a user would most likely follow to complete a specific task. By working with the UI Designer, Nellie, from Agile Labs, I have also learnt the different considerations I need to take to ensure that there will not be cognitive overload for the users due to the large amount of information that we need to present on a single page.

Thank you to the ecoSPIRITS team for the user research and UI feedback along the way.