Case study - 2024

Automated supplier mapping

New product launched for Sayari

📝 Project overview

Problem

Companies needed help maintaining profitable, resilient, and compliant supply chains due to the current labor-intensive, inaccurate, and costly approaches to supply chain risk.

Goal

Launch a new product, Sayari Map, which would empower supply chain risk management, responsible sourcing, sustainability, and procurement teams to map upstream supply chains and identify risks quickly.

Team

Rhea Rakshit – Senior Director of Product Management

Juliet Adams – Director of Software Engineering 

Grace Shen – Product Designer

Mikey Gower – Front-end Developer

Outcome
  • Launched Sayari Map, a new product offering that contributed to a 10% increase in company revenue within the first quarter post-launch.
  • Customers can now get supply chain insights within minutes instead of questionnaire-based supply chain mapping tools that require significant time and money to implement.
  • Customers can reduce noise by filtering out unrelated product networks.
  • Sayari Map utilizes Sayari’s global ownership data to include rich corporate ownership data that competitors are unlikely to have. New progressive disclosure techniques allow customers to access this information intuitively.

Supply chain view

💭 The design process

Reused components for the MVP to test AI results

Sayari Map utilizes AI-enabled product blueprint technology, so testing supply chain results required a live product. To expedite the process of launching this MVP, we reused visual components from the flagship product, Sayari Graph. 

Once live, we presented this MVP to design partners for initial feedback. I used customer feedback and competitor research to help guide all future designs quickly.

Supply chain view – MVP

Competitive analysis

I analyzed the products offered by our competitors and organized my findings using Figjam, dividing them into three sections:

  1. What worked well
    • Node containers clearly display the entity name and any associated risks.
  2. Areas for improvement
    • Accessing additional information in the supply chain view needs to be streamlined.
    • Implementing interaction states for nodes can help create focus and enhance usability.
  3. Trends
    • Most supply chains are displayed horizontally.
    • Filters are easily accessible and intuitive.
    • Overview panels effectively display important information for quick reference.
Feedback on MVP from design partners

To validate my competitive audit findings and mitigate risks associated with product development, Rhea and I presented the live MVP to our design partners for feedback. This process revealed four main pain points:

  1. Customers had difficulty finding and using the filters.
  2. It was not clear which element was selected on the canvas, as the nodes did not allow for basic UI states.
  3. Customers were unable to access additional information within the supply chain view.
  4. Customers require additional information to understand why specific workflows have failed.

MVP screenshots – filters and selected nodes

Addressing the pain points

I explored different ways to address each of the four pain points above. After sketching out several ideas, I shared them with my squad to get initial feedback. Once everyone agreed on the proposals, I proceeded to create high-fidelity designs.

1️⃣ Filtering
Discoverability

Filtering is crucial in focusing on relevant attributes within large upstream networks. However, our customers were not benefiting from the filters because they were hidden under a side panel and not discoverable. To address this issue, I moved all filters above the canvas for easier access.

New filters

Filter clause

Several customers were using filters to exclude specific attributes. Although this was feasible in the MVP, it required some additional effort. I added an “include” and “exclude” clause within each filter dropdown to simplify the process.

Filter component updates

I took this as an opportunity to update our filter dropdown component to make it more intuitive. Previously, the active state used the brand’s primary blue color and failed to display the number of selections a customer made for multi-select dropdowns.

 I updated the button’s active state to a less saturated blue, as the primary blue color should only be used for CTA buttons. A less saturated blue creates a better sense of hierarchy throughout the interface. The more saturated the blue, the more emphasis should be placed on that component.

 We received positive feedback on this update. Therefore, I pushed my changes to the design system and implemented these new filters across both products.

Filter component updates

2️⃣ States
Canvas components

States communicate the status of UI components to the customer. The nodes on the canvas in the MVP failed to do that – as that was not their intended purpose. I explored several ways to handle the node layout and decided to use a rectangular node that would include the supplier name and risk information, if applicable. Additionally, I wanted to create more structure in these complex supply chain visualizations, so I added the tier number information at the top, which created defined columns to help customers identify the information they need at a glance.

I also wanted to explore ways to focus on information. Customers expect to see specific route details when they select a node on the canvas. Therefore, it is beneficial to deemphasize all other information not related to their selection, as seen below:

Supplier selected – MVP

Supplier selected – final

3️⃣ Lacking additional information
Progressive disclosure of information

Customers could see overview information when selecting a route to view in the MVP. However, we learned that they must be able to see additional details for suppliers or shipments within this view to accelerate their workflows.

I explored various ways to display more information in this supply chain view, including popovers, side panels, and split-screen functionality. Eventually, I opted for a secondary side panel because it required minimal development time and provided a suitable way to provide a natural progressive disclosure of information.

Supplier selected

Supplier card selected

4️⃣ Unhappy paths
Customers need context and an alternative route when a workflow fails

To address this problem, I designed empty states that included a graphic, title, supporting copy for context, and a linked alternative solution.

I then organized a FigJam session to brainstorm more intuitive solutions for when supply chains timeout, believing there was a better approach for this instance, and invited the engineering team to join. Through this collaboration, we determined that the best UX approach would be to return partial results tier by tier instead of waiting for the entire supply chain to load.

However, this approach was blocked by a necessary Memgraph update.

Consequently, we implemented an empty state that prompts customers to filter by product, aiming to reduce the request size for complex supply chains.

Brainstorm session with engineering

Empty state – supply chain timeout

Empty state – no results found

👀 Outcomes

My experience

I enjoyed working on this project because it provided significant value to our customers and involved complex visualization design and interaction work. As the project evolved into a second product, it not only proved valuable for the business but also continued to deliver tremendous customer and business benefits, as highlighted in the overview section.

Next steps

During our ongoing conversation with design partners, we were able to identify another pain point:

  • Customers need improved clarity regarding items that AI generates.