Pop out hero.png

Smarter Sorting

Classification Portal

Timeline: 4 months        

 

Role: I led an end to end design process for a dashboard and made a component library following the Atomic Design methodology following Smarter Sorting's Design guidelines   

   

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

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. 

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

Understanding the Classification portal

Retailer spend a lot of time trying to get products on shelves quickly. And to do this, they require information, about the product from their suppliers. Currently, this process is disjointed and tedious and some still use Google sheets for handling and maintaining these sheets. It takes months to get items on shelves, items are often misclassified and this costs time and money. 

 

Official product video (All copyright to Smarting Sorting)

Smarter Sorting's classification portal is trying to solve this market gap by providing a more robust digital framework and enabling better communication between retailers and their suppliers.

 

Let us understand this process with the help of a hairspray

When there is sufficient information to classify the hairspray

When there is insufficient information to classify the hairspray

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)

Semi-structured Interviews

Packages on Shelves

It should be a proof that our product is making an impact 

It should be a storytelling device

I require information about the chemical composition of the products in my inventory?

Get granular information if needed

Most of my time goes into finding where the product is in the supply chain process

02.

Analysis

Externalization

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

Working on Miro to combine insights

Identifying User Groups

To scope down the project we wanted to create a retail facing dashboard for the Lead Classifiers and Suppliers who would be key for managing the inventory and classifying products.

My two main personas based on the scope and research

Prioritizing user needs 

After scoping down my user group and extracting all the possible needs and solutions for them, 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. 

Priority matrix to determine what features to chase

1. Effective Classification

All Items need to be classified quickly and accurately

03.

Design Opportunities

Effective Classification

All Items need to be classified quickly and accurately

POSSIBLE SOLUTIONS

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

2. 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 for better inventory management.

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

Requirement extraction

The externalization helped me in listing down all the feature that could be used by our users. But I needed to sit through and think which set of features generate the most value especially for our MVP-1. All these features are then categorized and grouped together based on their function. 

Lead Classifiers' feature list- what they would like to see on their dashboard

Suppliers' features list - What suppliers like to see on their dashboard 

Guiding Principles

After collecting information, I needed to focus on what is important and how might we arrange this information on a single screen so that it follows a certain hierarchy that is meaningful and quick to read. For this purpose I used these 3 principles to guide me for visual designing.

Most

important

Least Important

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. 

Most Noteworthy Info

Important

Details

General

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

From the requirement extraction with the help of my guiding principles, I went ahead and started iterating on my designs. This exercise proved to be a tool to help with business decisions.

Wireframes.png

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.