Trade Data Dashboard
Overview
Manufactured (MFD) is a small startup facilitating product manufacturing, financing, and distribution. To verify and assess vendors during onboarding, the sourcing team required a tool to analyze a vendor’s trade activity. I worked with a lead designer and developer to help create this feature on MFD’s web application.
Company: Manufactured Networks Inc.
My Role: UX/UI Designer
Deliverables: User flow, Wireframes, Prototype
Target User: Internal Sourcing Team
Timeline: Q2 2023
Solution
Supplier verification streamlined with a trade data analysis tool
My team and I launched a trade data dashboard on Manufactured’s web application. This data can be sorted and filtered through different parameters allowing the sourcing team to cross-reference and validate suppliers’ activity with greater precision.
Problem
How might we help the sourcing team access and verify a supplier’s trade data?
MFD works with a wide network of vendors around the world and needs a dashboard with access to trade data of both domestic and global markets. This data reveals product supply chain mechanics and helps helps in making informed business decisions
Feature Overview
The newly launched dashboard allows our target user (the sourcing team) an optimized way to access trade data. This data can be sorted and filtered through different parameters allowing the sourcing team to cross-reference and validate suppliers’ activity with greater precision.
High-fidelity prototype animation of the trade data dashboard/lookup tool
Initial Wireframes
This project began with a brief from my design lead who informed me of the requirements for a trade data report. The feature would need to provide an overview of the vendor’s top commodities and countries of import and export. My design lead created a low-fidelity wireframe as a template for me to explore the ways to display trade activities using data visualization. After further fleshing out the idea the first draft was shared with stakeholders for feedback.
We got feedback from our target users & key stakeholders
User Insights
I got feedback on how to better address the main objective of this project. The sourcing team (our target user) needed a lookup tool that would provide a detailed view of a vendor’s trade activity instead of a quick overview. In the end, we realigned ourselves on the best solution to provide to the sourcing team.
Key takeaways:
1. Users need a detailed breakdown of a vendor’s trade activities with individual customers.
2. The trade report needs to be easy to locate within the MFD web app.
3. Users need the ability to choose specific data to export for future reference.
2nd Iteration Revisions
Revision #2
Making it easy to access trade data
Users had to navigate through multiple web pages in order to access the trade report. As a result, the trade report was relocated as an option underneath the main organization menu. This made it easier to find the option with fewer mouse clicks.
Revision #1
Providing a detailed list of trade activity
The lead developer on this project informed me of what datatypes were provided by the API accessing the trade database. After confirming with stakeholders, we agreed on the list of data shown for each trading activity. This list would serve as a template for displaying search results.
From a data report to a data lookup tool
Originally we envisioned showing trade data in a mini report format that would allow users to get a quick glance at a vendor’s top commodities and top countries of import and export. This idea was scrapped as it didn’t provide the sourcing team with enough detailed trade data activity. I applied the feedback from my stakeholders and progressed my design into a dashboard providing a vendor’s trade activity with business partners throughout the years.
User Insights
We got more feedback from our internal users
My second iteration provided a solution that better satisfied the needs of our target user. I got more feedback on how to further refine the trade data lookup tool and handle edge cases such as vendor name variants.
Key takeaways:
1. Provide supplier name variants when a search is performed.
2. Figure out a way to filter results by HS Code or name of the commodity.
3. Create a widget providing the user with an overview of the whole result set.
3rd Iteration Revisions
Revision #3
Creating a trade data overview widget
I experimented with different iterations of the data overview widget by exploring ways to visualize and compose data. In the end, I went with the design that made efficient use of horizontal space and provided a strong visualization of data distribution for HTS codes and import/export countries.
Revision #4
Filtering search results by HTS Code
The lookup tool needed a filter that would allow users to search commodities by HTS code or keyword. Since each HTS code tends to have long descriptions the keyword would need to be highlighted within the suggested results for better scannability. Unlike other filters, this filter would need to open up in a modal in order to properly display information.
Revision #5
Pagination and performance speed
Search results took a long time to load after clicking on the search button. This left users unsure as to whether the results were actually loading. As a result, we added a loading animation as an affordance to let the user know their action had been acknowledged. Pagination also helps manage load times instead of showing all search results with an endless scroll.
High-Fidelity Wireframes
The final design helps lead the development team
I revised the design to address the needs of our target users and handle technical constraints. The finalized mockups and prototype were approved by stakeholders and the development team went forward with building out the feature.
Impact
Supplier verification streamlined with a trade data analysis tool
The first iteration of the lookup tool has been launched to the MFD web app and the sourcing team has begun training on how to use the lookup tool. While users are beginning to use this tool they are also helping the development team uncover bugs to improve quality assurance. Overall, the project evolved to provide a comprehensive solution, aligning with user needs and enhancing sourcing efficiency.
