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
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.
.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
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.
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.