Back

Exportify Connect

UX Case Study: B2B Supplier Evaluation Platform

Domain

B2B, Supply Chain Management

Designed

November 2024

Duration

1 Week

Scope

Designing a SaaS solution from scratch

Primary Tool

Figma

Introduction

Exportify Connect is a backend tool that helps the team manage supplier applications more easily. Instead of dealing with scattered emails and spreadsheets, employees can now evaluate, approve, or reject suppliers in one place. The tool includes a dashboard showing important numbers at a glance and automatically tracks all decisions, making the whole process clearer and faster for everyone involved.

Research Findings and Insights

Market Research: Learning from Similar Platforms

• –Alibaba’s Supplier System. A big marketplace where companies can check supplier details, see their certificates, and read what other buyers say about them. Think of it like a business version of Amazon’s seller ratings.

https://www.alibabacloud.com/en/solutions/supply-chain

• –SAP Ariba. It helps companies manage their suppliers in one place. Companies can easily check supplier information, approve new ones, and keep track of how well they’re doing, kind of like a digital filing cabinet for supplier relationships.

https://www.sap.com/india/products/spend-management/supplier-lifecycle.html

• –TradeIndia. Focuses on Indian suppliers. It’s like a directory where you can look up supplier details and check their trustworthiness before working with them. They make sure all suppliers pass basic quality checks.

https://www.tradeindia.com/join_now/upload_product.html

• –GEP SMART Supplier Management. Makes it easier for companies to add new suppliers by automating a lot of the background checks. It’s like having an assistant who helps sort through supplier paperwork and flags any potential issues.

https://www.gep.com/software/gep-smart/procurement-software/direct-procurement-technology/supplier-collaboration-portal

• –ThomasNet. Works mainly with U.S. and Canadian suppliers. They help companies find suppliers using simple search tools, similar to how you’d use Google Maps to find local businesses, but for industrial suppliers.

https://www.thomasnet.com/

How does Alibaba manage its tons of suppliers?

Alibaba manages its many suppliers through a variety of methods, including:

• –Verification program: Alibaba has a verification program that authenticates suppliers through third-party inspections, audits, and customer feedback.
• –Supplier certifications: Alibaba offers different types of supplier certifications, including Gold supplier, Verified supplier, and Trade Assurance supplier.
• –Payment protection: Alibaba offers payment protection to buyers who pay through the platform.
• –Supplier management systems: Alibaba Seller offers systems that can help manage suppliers and purchasing activities, such as automating purchase orders, tracking supplier performance, and managing pricing and contracts.
• –Verified Supplier status: Verified Suppliers gain a badge of trust and credibility, which can lead to higher visibility in search results and increased buyer interest.

Alibaba is a B2B website that connects businesses with suppliers to buy products in bulk. Alibaba’s middleman approach aims to ensure supplier and customer satisfaction.

Source: shopify.com - Alibaba 101

User Research

I conversed with two employees on supplier management platforms like TradeIndia and SAP Ariba to understand their daily tasks and pain points. Their feedback highlighted challenges such as inefficient workflows, difficulty prioritising applications, and poor decision-tracking. This insight helped guide the design of Exportify Connect, focusing on features to streamline processes and improve decision-making.

User Personas

• Priya ShahSupplier reviewer · TradeIndia, Mumbai
  Three years at TradeIndia, handling 25 to 30 supplier requests a day from the Mumbai office.

  Daily tasks

  • Reviews new supplier applications
  • Checks company documents and certificates
  • Verifies business locations
  • Updates supplier status
  • Responds to supplier queries

  Pain points

  • Gets overwhelmed with too many open tabs while checking documents
  • Loses track of which suppliers need follow-up
  • Has to manually enter the same information multiple times
  • Can’t easily see a supplier’s previous rejection history
  • Spends too much time switching between verification tools
  • Hard to prioritise urgent applications
• Pulkit JainSenior Developer · SAP Ariba, Singapore
  Leads the supplier portal development team and maintains the platform the reviewers work in.

  Daily tasks

  • Maintains supplier evaluation codebase
  • Fixes bugs in the approval system
  • Updates supplier data management features
  • Works on system performance issues
  • Handles backend integrations

  Pain points

  • Complex legacy code slows down updates
  • Poor search performance with large supplier databases
  • Duplicate supplier entries causing conflicts
  • Hard to track which team member made changes
  • Database queries take too long for big reports

Key Insights

In order to design a user-friendly and efficient supplier management system, I conducted research on the key factors that a supplier management tool should track. This included examining the essential information required to evaluate and manage suppliers effectively.

• –Basic Supplier Information: Essential data like Supplier ID, Company Name, Country/Region, Business Type, and Year Established helps employees quickly identify and assess a supplier’s legitimacy and history.
• –Product Information: Key details such as Product Categories, Product Certifications, and Primary Products allow users to quickly understand the supplier’s offerings and their compliance with industry standards.
• –Certifications and Compliance: Certification statuses (e.g., ISO, FDA) and audit results are critical for verifying that suppliers meet quality and regulatory requirements.
• –Operational Data: Metrics such as Lead Time, Manufacturing Capacity, and Export Percentage help manage timelines and assess whether a supplier can meet business demands.
• –Financial and Legal Information: Financial stability indicators such as Annual Revenue and Payment Terms are essential for assessing a supplier’s ability to fulfil large orders and manage cash flow.

Additionally, I reviewed how industry-leading platforms like Alibaba, SAP Ariba, and others display and prioritise supplier information, focusing on key metrics like customer ratings, transaction history, and compliance. This research was crucial in shaping the design of Exportify Connect’s UI dashboard, ensuring that all necessary data is easily accessible to streamline the supplier evaluation process.

Design Process & Wireframes

Logo Design

I designed the Exportify Connect logo to reflect the tool’s vision and mission, ensuring that the core values of efficiency, connection, and reliability are visually represented. This logo captures the essence of Exportify Connect as a B2B platform dedicated to streamlining supplier evaluation and building trusted global partnerships.

Key Elements:

• –Cargo Truck Icon: The streamlined truck shape symbolises logistics and commerce, highlighting Exportify’s core role in connecting businesses with dependable suppliers.
• –Winged Lines: The lines to the left of the icon convey speed and efficiency, aligning with Exportify Connect’s mission to make supplier management faster and more straightforward.
• –Geometric, Minimalist Style: The clean, minimalist design reflects professionalism and reliability, qualities that are highly valued in the B2B sector.
• –Significance of the “E”: The icon subtly incorporates the letter “E,” representing Exportify while emphasising “export” and “efficiency.” This small detail reinforces the brand identity, connecting it directly to the platform’s purpose and functionality.

The mark. A cargo truck with the lines behind it reading as speed, and the whole shape doubling as an E.

Colour Choice and Typography

Color Choice

• –Dominant Green: Green serves as the primary colour, symbolising growth, trust, and stability, qualities that are critical in a B2B platform focused on supplier management. In this context, green also conveys reliability and efficiency, reflecting what clients seek in a tool designed to streamline supplier relationships.
• –Accent on “Connect”: Green is used to emphasise the word “Connect,” highlighting the platform’s role in building partnerships within the supply chain and reinforcing the idea of collaboration and seamless interaction.
• –Neutral Grays and Black: Grays and black provide a balanced, professional backdrop that enhances readability without distracting from the primary green tones. These neutral colours support a clean and polished interface, ensuring an unobtrusive and professional look.

Typography

• –Archivo for Headings: Archivo is chosen for its modern, geometric style, which aligns with the clean, professional brand image. It provides clarity and distinction for headings (H1, H2, H3), making key information stand out.
• –Inter for Body Text: Inter is used for body text due to its high readability at smaller sizes. This font ensures that all information is accessible and easy to read, supporting a smooth user experience.

Together, the green-focused palette and the pairing of Archivo and Inter fonts create a cohesive, professional aesthetic. This combination reflects Exportify Connect’s values of reliability, clarity, and efficiency in supplier management.

Supplier Management Dashboard

Based on user research, I identified the key information that should be displayed in the supplier management dashboard to enhance usability and provide quick access to essential details.

These columns ensure that users can easily assess and manage suppliers with all necessary information at a glance:

• –Supplier ID: A unique identifier for each supplier.
• –Supplier Name: The name of the supplier company.
• –Business Type: The business category (e.g., Manufacturer, Distributor).
• –Country/Region: The geographical location of the supplier.
• –Year Established: The year the supplier was founded, indicating experience and stability.
• –Certifications: Relevant certifications that validate the supplier’s compliance with industry standards.
• –Product Categories: Types of products offered by the supplier, helping buyers identify relevant suppliers quickly.
• –Annual Revenue: An indicator of the supplier’s financial health and capacity to fulfil orders.
• –Lead Time: The expected time from order placement to delivery is crucial for planning.
• –Payment Terms: Conditions under which payment will be made, impacting cash flow management.

The supplier ID broken down. Type, region and a unique number, so the identifier sorts and filters without a lookup.

Navigation Menu Overview

The navigation menu in Exportify Connect is organised to streamline key actions and information access for different user roles:

• –Overview: This section provides a quick summary of all essential metrics for visualization purposes. It offers a dashboard view, giving users immediate insights into platform activities and supplier statistics.
• –Supplier Management: Allows employees to evaluate, accept, or reject supplier applications. They can add internal notes to each application, making it easier to track decisions and share insights with colleagues.
• –Review & Convey: Stores internal notes from the Supplier Management section. This feature enables users to send single or bulk communications (personalised or automated) to suppliers, keeping the messaging process efficient and consistent.
• –User Settings: Accessible to backend engineers, this section is for configuring platform settings, allowing customisation and optimisation based on system needs or user feedback.

The four sections. Overview for the numbers, supplier management for decisions, review and convey for what goes out, settings for the engineers.

The Supplier ID column in the Exportify Connect dashboard uses a structured format to uniquely identify each supplier and quickly convey key details:

• –1. Supplier Type (M): The first letter shows the type of supplier, such as “M” for Manufacturer. This helps users understand the supplier’s role at a glance.
• –2. Country/Region Code (IN): The next part represents the supplier’s location, like “IN” for India, enabling easy filtering by region.
• –3. Unique Number (001): The final number is a unique identifier within each type and region, preventing duplication and maintaining organised records.

Example: “M-IN-001” means a Manufacturer in India with the unique identifier 001.

This format makes it easy to sort, filter, and locate suppliers efficiently.

Filter Options

The filter options in this Management System are a key feature that significantly enhance usability and efficiency. By offering a range of precise filters, this system enables employees to quickly find and assess suppliers that meet specific criteria, saving time and streamlining the evaluation process. Here’s a breakdown of the main filter categories and their benefits:

• –Supplier Name: Allows users to search for specific suppliers by name, making it easy to locate known suppliers without manually browsing the entire list.
• –Application Status: Filters suppliers by their approval status (Approved, Rejected, Pending), so users can focus on pending applications or revisit rejected ones with ease.
• –Business Type: Users can filter suppliers based on their business type, such as Manufacturer, Distributor, Exporter, etc. This helps in quickly finding suppliers with roles that match specific sourcing needs.
• –Country/Region: Provides the ability to filter suppliers by geographic location, which is useful for region-specific regulatory requirements or logistical considerations.
• –Certifications: Allows users to filter suppliers based on certifications like ISO 9001, ISO 14001, etc. This is especially beneficial when quality standards are a priority, as users can focus on verified or certified suppliers only.
• –Product Categories: Enables filtering by product types, such as Electronics, Pharmaceuticals, Food Products, etc., allowing users to quickly find suppliers who deal in the desired product category.

Complete Filtering Component

After applying filters, the Filtered Applications page displays only the entries that match the selected criteria. This view allows users to see a concise list of suppliers, making it easy to review and manage relevant applications without unnecessary data clutter.

To ensure that the Approve and Reject actions are easily accessible, they are prominently displayed at the top right of the data table when one or more entries are selected. This placement makes it clear and convenient for users to take action on selected applications.

When the Approve button is selected, a prompt appears for the user to add a justification note. Once submitted, the approved entries move to the Review & Convey tab, where the entire team can access and review these documented changes, ensuring transparency and team alignment.

When the Reject button is selected, a prompt appears for the user to add a justification note. This step is crucial to ensure that rejections are carefully documented, helping to protect the company’s reputation and prevent accidental rejections of reputable suppliers. Once submitted, the rejection is saved with the reason provided, adding transparency and accountability to the decision.

To enhance efficiency, I have added common note suggestions. These quick-access tags allow employees to select frequently used notes when approving or rejecting a supplier, saving time and making efficient use of space in the note field.

Review & Convey Section

The Review & Convey section is designed to streamline the final review and communication process for supplier approvals or rejections.

Here are its key features:

• –Grouped Entries: Approved and rejected entries are grouped together based on actions taken by specific employees, allowing a consolidated view for the team before finalising communication.
• –Selective Emailing: Checkboxes allow users to select specific suppliers within the group for personalised emails, providing flexibility in managing communication with individual suppliers.
• –Collaborative Review: This innovative feature enables team members to review all approved or rejected entries before emails are sent, ensuring accuracy and consistency in the communication. Only after team review are approval or rejection emails dispatched, adding an extra layer of quality control to maintain Exportify’s professionalism and reputation.

The challenge was to display multiple application entries along with the note, the date it was marked, and options to Send Emails or Mark as Pending. I addressed this by using an innovative approach, organising the entries within a separate frame and adding a clear separator for the note and action buttons, creating a clean and structured layout that maintains functionality and readability.

The checkbox at the top of the column allows users to select all rows within the group. This feature simplifies the process of bulk selection, making it easy to apply actions, such as sending emails or marking entries as pending, to multiple suppliers simultaneously.

The number displayed next to Review & Convey represents the count of pending confirmation emails that need to be sent. This badge provides a quick visual indicator, helping users keep track of outstanding communication tasks.

The Approval Email template includes dynamic fields, such as {Supplier Name} and {Application ID}, so each message is personalised without anyone rewriting it.

By integrating these dynamic fields, the system ensures consistency in messaging while maintaining a personal touch for each supplier.

The Rejection Email template uses dynamic fields (e.g., {Supplier Name}, {Application ID}) and carries the justification note the reviewer wrote, so the supplier understands the decision.

The Attachment Option lets users add documents, like feedback or guidelines, to approval or rejection emails. This helps suppliers get all the information they need in one message, making the process smoother and more efficient.

Success Metrics Dashboard

Overview Components and Justification

The Overview Dashboard is designed to provide a quick, comprehensive snapshot of key metrics related to supplier evaluation and onboarding processes within Exportify Connect. Here’s a breakdown of each component and its purpose:

• –Applications Approved: Displays the total number of applications approved out of the total received for the month, along with a percentage showing approval rate. This metric allows the team to monitor the effectiveness and consistency of approvals over time.
• –Total Applications: Tracks the total applications processed within a specified timeframe (e.g., this week) with a growth indicator. This statistic helps measure the workload and identify trends in application submissions, giving insight into potential surges in supplier interest.
• –Applications Evaluated Today: Highlights the number of applications reviewed on the current day. This provides an instant view of daily productivity, helping to ensure the team meets its evaluation targets.
• –Applications Processed by Status: A bar chart showing the breakdown of applications into categories: New, Accepted, and Rejected. Each day’s total applications are divided by status, helping to visualize progress and track patterns in decision-making. This overview can highlight if adjustments are needed in processing or acceptance rates.
• –Average Evaluations: Shows the average number of evaluations completed per day or per week, allowing Exportify to track the team’s productivity. This heat-map calendar displays daily activity levels over a month, providing insight into peak workload periods and helping to plan resources effectively.
• –Applications Evaluated (Percentage): Displays the percentage of applications evaluated for the week, offering a progress overview. This metric shows how the team is pacing toward weekly goals, allowing for adjustments if the percentage is lower than expected.
• –Total Suppliers Onboarded: Tracks the cumulative number of suppliers onboarded over the years with a trendline. This provides historical context, helping to gauge the platform’s growth and the effectiveness of the onboarding process.
• –Expenses Allocation: Breaks down expenses by category (e.g., Production, Marketing, Operational, Design) within a specified timeframe (e.g., Month). Understanding resource allocation helps in managing budgets effectively, especially if certain areas need increased focus or cutbacks.
• –Recent Activity: Lists the latest actions taken by team members, such as approvals, rejections, or updates to evaluation criteria. This section promotes transparency and team collaboration by showing real-time changes and decisions, ensuring all team members stay informed on recent actions.

Each component in this dashboard serves a specific purpose, giving the Exportify Connect team a clear, data-driven view of their supplier management efforts.

This Applications Processed bar chart provides a daily breakdown of supplier applications handled over the past week, segmented by status: New, Accepted, and Rejected.

• –Total Applications (276): Displays the total applications processed this week, with a 4% decrease shown in red, indicating a slight drop in volume compared to the previous period.
• –Status Segmentation: Each bar is divided into three shades of green, representing different application stages. New indicates fresh applications received on each day, Accepted shows the number of applications approved, and Rejected reflects the rejected applications.
• –Date Range Selection: A dropdown at the top allows users to adjust the date range (e.g., daily, weekly, monthly) to observe trends over different timeframes.

This chart offers a clear visual summary of application processing trends, enabling the team to assess daily volumes, acceptance, and rejection rates at a glance. This insight helps monitor workflow and adjust resources if necessary, based on application trends.

Expected Outcomes

Enhanced Efficiency in Supplier Evaluation

Exportify Connect will streamline the supplier evaluation process, reducing the time needed to assess applications. With a centralised dashboard displaying key metrics, employees can process applications faster without constantly switching between tools or searching for information.

Improved Decision Transparency and Accountability

A centralised decision-tracking system will allow employees to view the full history of approvals and rejections, including justifications. This transparency ensures informed, consistent decisions and maintains accountability for each action taken within the platform.

Increased User Satisfaction and Productivity

User-centered features like filtering options, intuitive navigation, and collaborative notes aim to improve user satisfaction. A smoother, more efficient workflow reduces frustration, minimizes errors, and boosts productivity.

Streamlined Communication with Suppliers

The Review & Convey section enables bulk communication with suppliers using templates and dynamic fields for consistency and personalisation. This feature enhances communication efficiency, helping Exportify maintain a professional and responsive relationship with suppliers.

Scalability and Adaptability for Future Growth

Exportify Connect’s modular design and advanced filtering options allow it to handle a growing supplier base with ease, supporting Exportify’s expansion without sacrificing performance.

Enhanced Supplier Relationships

By providing clear, constructive feedback in approval and rejection emails, Exportify Connect strengthens supplier relationships. Suppliers gain insights into Exportify’s requirements, fostering trust and building stronger partnerships.

Conclusion

Through designing Exportify Connect, I created a user-centered solution that tackles the core challenges of Exportify’s supplier evaluation process, including scattered data, inefficiencies, and limited transparency. My goal was to simplify and centralise workflows, enabling team members to evaluate, approve, and manage supplier applications more intuitively. By incorporating features like a dashboard with key metrics, customisable filters, and automated communication templates, I aimed to make the platform both efficient and user-friendly.

This project underscored for me the importance of a thoughtful UX design approach in transforming complex workflows into seamless experiences. I’m proud that Exportify Connect not only meets the current needs of Exportify’s team but also provides a scalable framework for future growth. This experience reaffirmed my belief in the power of UX design to improve productivity, enhance user satisfaction, and support meaningful business outcomes.