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)
There is no way to get a quick glimpse at the inventory and keep a track of alerts in the Classification Portal.
A dashboard that captures all data of the inventory and can help with providing real time insights through custom reporting.
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
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.
Here I identified different work roles amongst the user group. I defined their
2. Extracted Solutions for this.
3. Proposed possible features.
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
All Items need to be classified quickly and accurately
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
Get granular details about their inventory
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
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
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?
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.
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!
Classifier Facing Dashboard
Supplier Facing Dashboard
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.
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.
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
Information not always displayed
Follows the design language
Takes more vertical space
Follows the design language
Follows the design language
Information always available
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.
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.