MSC Direct Account Payable

About the company

MSC Industrial Direct

MSC is a prominent e-commerce platform specializing in B2B transactions and serving as one of the largest industrial equipment distributors in the United States. MSC caters to a diverse range of user types, including:

1. Individual Self-register Users: These are individual users who register themselves on the platform.

2. Business Users: MSC serves businesses of varying sizes, categorized as follows:

   • Small Businesses: Companies with annual revenues ranging from $50,000 to $200,000.

   • Medium Businesses: Companies with annual revenues ranging from $500,000 to $1.5 million.

   • Large Businesses: Companies with annual revenues exceeding $5 million.

3. Government Users: MSC also provides its services to various government entities

An Accounts Payable (AP) ledger is a comprehensive record of all outstanding financial obligations associated with a business account. When business users engage in the checkout process on our platform, they have the option to select "Bill to MSC" as their preferred payment method. Opting for "Bill to MSC" initiates the creation of an invoice for these users, allowing them to defer payment until a later date. This arrangement provides flexibility and convenience to our business customers in managing their financial transactions with MSC.

Overal Goal

To enhance the user experience with post-transaction Account Payable processes and reduce the need for customer service calls, MSC can implement several improvements:

1. User-Friendly Invoice Dashboard: Create a user-friendly dashboard within the MSC platform where users can easily access and view their past and current due invoices. Include filters, search options, and sorting capabilities to help users quickly find the information they need.

2. Invoice Status Notifications: Implement an automated notification system that sends email or SMS reminders to users about upcoming due dates for their invoices and alerts for overdue payments. This proactive communication will reduce the likelihood of missed payments.

3. Credit Usage Transparency: Clearly display users' available credit balances on their accounts. This transparency helps users understand how much credit they have available to offset their invoice payments.

4. Credit Application: Simplify and streamline the process for users to apply their available credit towards their invoices during the checkout or payment process. Ensure that it's intuitive and easy to use.

5. ACH Payment Option: Introduce an ACH (Automated Clearing House) payment method, allowing users to make electronic payments directly from their bank accounts. This offers a convenient and cost-effective alternative to traditional payment methods.

6. Payment Reminders: Send automated payment reminders closer to invoice due dates, reducing the risk of late payments. Allow users to set up automatic payments if they wish.

7. Self-Service Tools: Provide self-service tools and resources within the platform, such as FAQs and tutorials, to help users resolve common payment-related questions or issues without needing to contact customer service.

8. Personalized Support: For complex or unique cases, offer personalized customer support options, such as live chat, email support, or dedicated account managers, to assist users with their specific concerns.

9. Feedback Channels: Create channels for users to provide feedback on the platform's payment and invoicing processes. Act on this feedback to continually improve the user experience.

10. Regular Updates and Training: Keep users informed about any changes to the invoicing and payment process through regular updates. Offer training materials or webinars to help users make the most of the platform's features.

By implementing these improvements, MSC can significantly enhance the user experience related to post-transaction Account Payable processes, reduce customer service inquiries, and promote user satisfaction and loyalty.

User Interviews

Based on user interviews, it has become evident that several critical issues need to be addressed in the Account Payable section to significantly enhance the user experience:

1. Challenge with Payment Filtering: A majority of users struggle with effectively distinguishing between current due and past due payments. To improve this:

   • Implement clear visual indicators or labels to differentiate current and past due invoices.

   • Allow users to easily switch between viewing these two categories with a simple toggle or filter option.

2. Credit Visibility and Utilization Issues: Users face difficulties in locating their available credit and applying it for payments. To address this:

   • Prominently display users' available credit on their account dashboard, preferably near the payment information.

   • Provide an intuitive pathway for users to utilize their credit when making payments.

3. Enhance Visibility of Payment Options: Users tend to overlook the "Make a Payment" button due to its placement. To make it more noticeable:

   • Ensure that the "Make a Payment" button is prominently positioned on the screen, perhaps near the top or with a distinctive visual element.

4. Simplify Simultaneous Search and Filter Usage: Users encounter issues when trying to use both search and filter functions simultaneously. To improve this:

   • Revise the user interface to allow users to seamlessly combine search and filter functions.

   • Offer clear instructions or tooltips for users to understand how to effectively employ both features together.

5. Comprehensive Account Payable Overhaul: Recognizing the need for substantial improvement in the overall user experience in the Account Payable section:

   • Consider a comprehensive redesign of the Account Payable interface, focusing on user-centered design principles.

   • Conduct usability testing and gather user feedback to guide the redesign process.

   • Continuously iterate and refine the interface based on user input.

Customer Behavior Observation

1. Enhancing Invoice Visibility and Clarity:

   • Improve the visibility and categorization of invoices, making it easier for users to distinguish between current due and past due invoices. Consider using clear visual cues or separate sections for better differentiation.

   • Simplify the search functionality, allowing users to easily find invoices by invoice number, date, or other relevant keywords. Users should not need to be exact in their queries.

   • Clearly indicate the ability to search by different criteria, such as invoice number, date, or packing slip number, making it intuitive for users.

2. Streamlining Payment Process:

   • Relocate the "Make a Payment" button to a more prominent position on the screen, preferably near the top or side. This adjustment will eliminate the need for users to scroll extensively when dealing with a large number of invoices.

   • Implement pagination or a dynamic loading mechanism to display invoices in manageable sections, particularly for users with a substantial number of invoices. This will significantly improve navigation.

3. Highlighting Credited Invoices:

   • Clearly distinguish credited invoices from regular invoices by displaying them separately and prominently. This will help users identify available credits to offset payments.

   • Offer an intuitive pathway for users to utilize their available credit during the payment process, preventing them from missing this valuable feature.

4. User-Focused Design and Testing:

   • Conduct usability testing with actual users to validate the effectiveness of the proposed changes and gather direct feedback on their experience.

   • Establish feedback channels within the platform for users to report issues and suggest improvements.

Design Wireframes

Designed 4 final wireframe to put in testing and get our users feed back.

Option A : Pagination

Enhancements in the Account Payable Section:

1. Global Search Functionality: We've introduced a global search feature that allows users to find invoices quickly, eliminating the need for complex filters. Now, you can search based on your criteria and receive relevant results, streamlining your invoice management.

2. User-Friendly Filters: By default, all invoices are displayed for your convenience. However, we've incorporated user-friendly filters that empower you to switch between viewing past due and current due payments effortlessly.

3. Visual Past Due Indicator: To enhance visibility, we've added a clear past due icon next to overdue invoices. This visual cue makes it easy for users to identify which invoices require immediate attention, ensuring you stay on top of your payments.

4. Credit Integration: We've seamlessly integrated your MSC credit into the payment process. Now, users can conveniently apply their available MSC credit to pay invoices, simplifying your payment experience.

5. Pagination for Efficiency: Recognizing that many users have a substantial number of invoices, we've implemented a pagination system. Instead of displaying all invoices at once, we show just 10 invoices per page. This ensures a quicker path to the bottom of the screen for payment processing, reducing the need for extensive scrolling.

These enhancements reflect our commitment to improving the user experience in the Account Payable section, making it more intuitive, efficient, and user-friendly.

Option B : Sticky CTA

Improved Invoice Viewing and Payment Process:

Within this option, we've implemented tabs that enable users to easily switch between viewing all current invoices and past due invoices in separate tabs.

When users select any invoice, a convenient "Select Payment Method" Call-to-Action (CTA) becomes sticky. Clicking on this CTA will instantly scroll users down to the payment section, eliminating the need for manual scrolling to reach the "Make a Payment" section.

Option C : Make a Payment Page

In this design, we've made several enhancements to improve the user experience:

• Invoice Information: We display all current due and past due invoices prominently at the top of the screen. Additionally, users' credit balance is now visible, with the option to view their full list of credit balances by clicking on "View Credits."

• Sticky Bar for Invoice Selection: When users select any invoice, a sticky bar appears. This bar includes options to download the invoice and "Select Payment Method." If users click on "Make a Payment," they are taken to a dedicated full-page experience where they can seamlessly choose their preferred payment method.

• Invoice Selection Priority: In this design, users first select the invoice they wish to pay. Afterward, they are directed to another page where they can make their payment method selection.

These improvements aim to simplify the invoice management and payment process, providing users with a more user-friendly and efficient experience.

Option D : Drawer

This option is essentially the same as Option B, with the only distinction being that, instead of redirecting users to another page for payment method selection, it opens a drawer where users can conveniently choose their payment method.

After conducting thorough testing and analyzing the results, we determined that Option C provided the best user experience among the available choices. As a result, we have proceeded to develop the final design based on the wireframes and concepts from Option C. This decision is based on the positive feedback and improved performance observed during testing, ensuring that our users will have an optimized and efficient experience with the final design.

Mobile