top of page


Product selector improvements

Group 3 (1).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

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.


Sep 2021 - Jan 2022. Designed and launched incrementally.


Visual Design, Interaction Design, Research.


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.
Group 1 (3).png
Group 3 (1).png
Impact: Significant reduction in number of customer complaints
Group 18.png


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.


Closer look at the major design decisions
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.


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.

Group 7.png
Group 5.png

Manufacturer information - final design

Group 6 (1).png

Other explored option

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.


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

Group 8 (1).png

Other iterations

Screen Shot 2022-09-07 at 5.18.32 PM.png
Group 8 (1).png
Screen Shot 2022-09-07 at 5.18.43 PM.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.

Group 10.png

Suggested and Recently used

Group 10.png
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.

Group 5.png
Group 5.png


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

Group 18.png

Custom product button flow

Group 18.png

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

Group 19.png


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!


Much cleaner presentation! I like it, seems very intuitive!


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.

© 2022 Riya Rana.  Crafted with much delight!

bottom of page