PROJECT AT GRANULAR
Product selector improvements
.png)
Granular is an agriculture SaaS company
It is focused on helping farmers be more profitable and efficient. Granular provides farmers tools to manage their financial performance and manage agronomic inputs for maximum performance and return.
Project Context
Team
Product Trio: Product Manager, Product Designer (me), Engineering Manager. Team also has 5 engineers.
First dedicated designer hired for the Components team.
Product Selector Component
The team owns multiple components used by other teams in different parts of the software.
One of the components is the product selector: A dropdown that showcase agricultural products like seeds, chemicals, fertilizers, and so on.
Timeline
Sep 2021 - Jan 2022. Designed and launched incrementally.
Responsibilities
Visual Design, Interaction Design, Research.
Problem
We noticed multiple issues from customer complaints:
Low on usability and discovery, not enough contextual information to make fast selections.
The component being used in multiple places meant that this was impacting many workflows.
I launched foundational design improvements improving usability & discoverability.
Before
.png)
After
.png)
Impact: Significant reduction in number of customer complaints
PROCESS
Quick iterations & incremental launches
A typical workflow for this project: A pain point would arise, I would ideate and come up with some options, internal stakeholders would provide feedback and help decide on the final design.
After handing off to engineering they would implement the changes incrementally.
DESIGN
Closer look at the major design decisions
1
Products with same name can't be distinguished
Many products would have the same name and appear as if they were duplicates in the list.
DESIGN CHANGE
After some digging, I realized that the only way to distinguish them was through the product's manufacturer information. So I added that to each list item.
It was also important to distinguish Custom products from non-custom ones so I added a pill for that as well.
To stay consistent with some other list item designs, I chose to stay with option 1. It was also easier on the eyes in terms of readability.
Manufacturer information - final design
.png)
Other explored option
2
Too many products with not enough context
We heard that once users opened the dropdown, just seeing a blanket list of products didn't give enough context. Users would also have to often scroll a lot to find their products.
DESIGN CHANGES
I added a product summary on top to give an indication of how many products each user has in their account.
Product summary - final design
.png)
Other iterations
.png)
To help reduce the amount of scrolling I also added 2 new product sections:
"Suggested" section shows up only during user's first time search and shows popular recommended products.
"Recently used" would show recently made selections by the user. From feedback we learned that this is will be super important for users that need to select the same few products again and again, hence saving time.
Suggested and Recently used
3
Users would create custom products instead of selecting existing ones
A huge pain point that came up was that users do not often search from their product catalogue, but rather click on the “Add custom product” button straightaway. This led to unnecessary duplicates, and wasted time for users.
DESIGN CHANGES
I decided to reduce the visual prominence of the custom product button by reducing it from primary to text, and having it appear only when needed (when the user is not able to find their product in the catalogue).
Custom product button flow
To encourage search first, I added visual indicators like the search icon, updated text bar, and got some search bugs fixed with the engineers.
Stakeholders helped me decided which text bar content would make most sense for our agricultural users.
Final option & other iterations
IMPACT & RESULTS
Drastically reduced number of complaints
Given the project scope, there was not enough resources for user testing, so customer support team kept an eye out for volume of complaints coming in. There was a significant reduction.
To receive some semblance of user feedback, I engaged with internal folks who are agricultural experts (many have their own farm). Their feedback helped ensure that we are on the right track throughout the project. They also majorly appreciated the design changes!
I like the proposed changes that are presented here. It looks good to me, the flow makes sense!
INTERNAL STAKEHOLDER
Much cleaner presentation! I like it, seems very intuitive!
INTERNAL STAKEHOLDER
What the future beholds
As they say a design project never truly ends. There could always be more improvements made to the component. With more time, I would have loved to explore new ways to make the product summary (at the top) better and even test its usefulness vs. the real estate it occupies.
Additional features like collapsible categories, mark favorites could be valuable in reducing time spent searching. As the number of products and the complexity grows, the form of the component itself could change to match the scale: from a dropdown to a manage catalogue modal or page.
