Smarter Sorting

Overview:

Smarter Sorting's patented technology helps retailers and suppliers to handle regulated items. Through active collaboration with AI, the portal gives the most sustainable way to dispose unused goods. 

I led an end to end design process for the dashboard of this portal and made a component library following the Atomic Design methodology.

Timeline: 4 months        

 

Role: UX Research/ UX Design/ Visual Design         

Team: Tom Williamson (Senior UX Designer), Jake LaCivitas (Product Manager)

Problem:

There is no way to get a quick glimpse at the inventory and keep a track of alerts in the Classification Portal. 

Solution:

A dashboard that captures all data of the inventory and can help with providing real time insights through custom reporting.

01.

Research

On the onset of the project, I had no knowledge about retail waste management or an understanding of my user group. I first started off by understanding the full cycle of a retail ecosystem. Next, I started picking up the pieces by understanding all the inhouse products and services that Smarter Sorting provides to its customers to have a more wholesome understanding of the business, focusing mainly on the Classification Portal. 

Understanding the domain

What does the classification portal do?

Let us understand this with the help of a hairspray.

1. When there is sufficient information to classify the hairspray

2. When there is insufficient information to classify the hairspray

Semi-structured Interviews

After the preliminary research, we focused on interviewing Internal Stakeholders to understand what the business needs and align my project with what they envision the future of the product to be.

We also conducted User Interviews with Retailers and Suppliers to understand the pain points and requirements from both user groups.

5

4

1

Internal 

Stakeholders

Users

(Retailers)

Users

(Supplier)

Interview Process

02.

Analysis

User Needs

Here I identified different work roles amongst the user group. I defined their

1. Needs.

2. Extracted Solutions for this.

3. Proposed possible features.

Dashboard explorations (13).jpg

Identifying User Groups

To scope down the project we wanted to create a retail facing dashboard for the Lead Classifiers and Suppliers.

Suppliers support the lead classifiers

Prioritizing user needs 

After extracting all the possible needs and solutions I focused on prioritizing them for all the User groups. I built a Priority Matrix by calculating its Opportunity score by understanding its importance and user satisfaction that was obtained through user interviews. This helped me build an MVP that could be rolled out in the near future, while actively thinking about an ideal final product. 

Example of a Priority Matrix for lead classifiers

Priority Matrix.png

03.

Insights

Design Opportunities

      Effective Classification

All Items need to be classified quickly and accurately

POSSIBLE SOLUTIONS

1. Be alerted when an item is flagged, contested or undergoes a classification change

2. Ability to view where the product is in the chain to hit up the right people to drive action

      Deeper View

Get granular details about their inventory

POSSIBLE SOLUTIONS

1. Provide appropriate data visualization that is easily digestable, which can be used as a tool to view more data 

 

2. Get granular with understanding the chemical compositions in products

       Increase Smarter                       Sorting's Value

 Enforce the value of Smarter Sorting to promote adoption

POSSIBLE SOLUTIONS

1. Provide appropriate data visualization that elevates the brands value and can be used by internal members during consultation 

 

2. Pick appropriate metrics that doesn't hurt the brand while also providing clear insights

04.

Ideation

Ok... so a Dashboard. But what information do users care about?

Lead Classifiers- Feature list

Suppliers- Feature list

How do I place everything into a single screen?

HIERARCHY

Most people, especially in the western world read from left to right. The "Z" pattern is taking advantage of, by placing important information on the top left, with the least important metrics at the bottom right. 

LAYOUT

Following a funnel pattern, the most actionable insights are placed at the top. The granular details are placed at the bottom

5 SECOND TEST

A dashboard needs to be read in the first 5 seconds, this requires only the most important information to be presented!

5

Wireframes.png

Wireframes

06.

 Final Prototype

Classifier Facing Dashboard

Supplier Facing Dashboard

Visual Explorations

NOTIFICATIONS

When I was ideating, I made sure the look of the notifications followed a similar design language as Smarter Sorting's already existing design language. 

The main function of the alert center is to provide notifications. But what are considered notifications and what is just noise? These were some of the questions I had to answer before getting into the details of actually designing the notification cards. Based on the research and constant feedback from the industry experts at Smarter Sorting, I decided all the use cases where a notification might appear; there were 6. 

FEEDBACK

ACTIONABLE

UPDATES

FILTERS

What filters do we apply, which ideally doesn't hurt the business in the long run? Some business decisions were left to me to tackle. We decided on using a universal filter for the entire page rather than unique filters for each segment as the information architecture for them is the same. 

STATUS TRACKER

It is important for both suppliers and retailers to understand where the product is during classification. This would then help in inferring the timeline and acting at the right moment by communicating effectively. Having an effective tracker that fits in a compact space and reads where the product is in the classification chain, is crucial. 

Does'nt follow design language

Dated

Familiar

Effective

Information not always displayed

Follows the design language

Effective

Takes more vertical space

Follows the design language

Effective

Follows the design language

Effective

Information always available

Compact

07.

Documentation

UI Spec documentation helped me fine tune my components. This provided me with a magnifying glass to view components that could have been missed during UX designing. 

Documentation also made me think about edge cases and understand where our design fails so we can go in and solve again. 

Key Takeaways 

Familiarizing with products already in the ecosystem to understand the design language

One way to get an hang of the design language is to study the document intently, but the most efficient way I figured was to actually play around with the product itself. As an intern I was not privy of this, but I was encouraged to work on the invision prototype. This helped in understanding how basic interactions like "Hover" and "Pressed" states worked, which helped me design a product that reflected the companies already existing language. 

Beware of potential rabbit holes during research

Digging deeper is great! I am all for it! But it is also important to know you are digging in the right direction. Since the domain was relatively new to me, I was left directionless during the initial phase of my design. Making a quick presentation about what I was focusing on and presenting it to my Product lead helped me in validating my research direction and general hypotheses. 

Not being afraid to ask questions 

During research with users, I was thrown off guard when I was presented with very esoteric or dense terms. Initially, I would either google the terms later or write them down to ask the Senior Designer at a later time. But i think it is important to clarify with the user what certain terms mean. Or just saying "Hey! I am new to this and just trying to grasp the regulatory terminology, so please feel free to correct me if I am wrong" This not only made me clarify things, but also made me gain a deeper understanding of the domain.