Squad overview
I worked cross-functionally between 2 departments.
I collaborated closely with Henry to create project requirements. I also conducted a comprehensive competitive audit, engaged with customers to validate assumptions, and refined designs iteratively based on feedback received.
Team
Rhea Rakshit – Senior Director of Product Management
Henry Penyonin – Product Manager
Zak (me) – Product Designer
Sean Yalda – Front-end Developer
Timeline
This project was split into phases – phase 01 took two weeks to design and launched in Q1 2024
Adding suppliers to the platform
Problem discovery
A single upload method hindered customer productivity.
Previously, customers were limited to adding suppliers to the platform solely through batch upload, using a CSV file. However, in response to valuable customer feedback requesting a more convenient method for adding suppliers on the fly, especially when encountering a new supplier later in their workflow, we were prompted to ask:
How can we offer customers a seamless way to add suppliers ad hoc without the need for a CSV file?
Our solution
A secondary upload workflow, empowering customers to add attributes into the platform with automated supplier matching.
Opting for this new upload option triggers the system to swiftly search for uploaded attributes within the database, seamlessly adding the supplier matches straight to their table.
Brainstorming
I brainstormed ideas to address the problem and came up with two approaches:
- Add basic search functionality – our flagship product, Sayari Graph, already has this feature, so we could reuse those components.
- Allow customers to add supplier attributes – the system would search for uploaded attributes in the database and automatically add matches to the platform.
After discussing this with my team, we decided Option 02 was the best approach. Option 01 would require customers to navigate search results, which is more of a Sayari Graph use case. Once we finalized the approach, I moved into FigJam and brainstormed workflow ideas.
Single upload – workflow ideas
Presented workflows to my squad
We decided to phase this feature out for quick implementation and as a way to gain additional feedback to validate the review step.
While brainstorming, I thought of an additional review step to enhance the user experience. This step would allow customers to see the matches before automatically adding them to their supplier list which could potentially help customers confirm the accuracy of the matches and ensure they are satisfied with what is being added to their supplier list.
Phase 01:
Customers would complete the “single upload” workflow in a modal. This option was straightforward, solved the problem, and required minimal development time.
Phase 01 workflow
Phase 02:
Customers could review their matches before adding them to their list. As a result, this workflow requires a full-screen takeover with an additional side sheet design. This approach required additional design thinking and development time, and we needed customer feedback supporting the importance of the review step.
Phase 02 workflow
Final designs
Setting the batch upload option as the default, while providing the option to choose a different upload type, proved to be the most intuitive approach.
Customers typically come to the platform with a CSV file containing multiple suppliers. While “single upload” serves as a more of an ad hoc or secondary action, the design outlined in Option 01 allows customers to quickly and immediately upload their files without needing to select an upload type first.
Ideation – allow customer to pick upload type to begin workflow
Final – selected most used option by default, with option to switch
Added to our design system
I created a new inline notification component for our design system to solve when no matches are returned.
I had to consider the possibility of returning no matches, which meant there needed to be a way to inform the customer of this and prompt them to either edit their attributes and try again or save the “no match” result to the supplier list.
This inline notification component displays above the attribute fields in the modal when no matches are returned.
I also updated the banner component to match the new inline notification component that I created to maintain consistency.
No matching entity found
Error state – no name inserted
New components
Result
Customers retain easy access to the batch upload option, along with a new workflow that allows them to add suppliers on an ad hoc basis.
This project was a direct result of customer feedback. After launching the MVP version of Sayari Map, we figured this would be a pain point, and customers confirmed that.
By phasing this project out, I could design and develop a solution quickly. That also allowed for a more iterative process and timely customer feedback to help guide what phase 02 should look like.
I would present this solution to our design partners for feedback and ask if a review step would be helpful. If it would be, I would quickly show some low-fidelity designs for more feedback.
