B2P Platform

Overview

B2P is a procure to payment platform that helps to decrease the use of papers and manual processes, which lead to an inefficient and prone-to-errors operation. We use blockchain technology to verify, match, and share PO, GR, and invoice among the buyer, supplier, and bank. It makes the information trustworthy, safe, and transparent.I had to redesign the platform, improve user experience, and delivered user interface and style guide too.

Web Application

Project Type

Digital Ventures

Intellectual Rights

August 2018 - Present

Time

UX, Interaction, UI Designer

Role

Challenge

Since we approached our user by getting requirement from them, most of the time, they gave the solutions that they feel it would work right for them. And we built the platform accordingly their briefs. Many buyers and suppliers were on board on our platform. After launching the project awhile, we found out there are many problems, and the flow was not fit with their daily working life. Different companies have different workflows. And they complained about our interface and performance of the platform. We had to decide which feature we would set for a standard that users need to oblige and some features that we had to customize for each company.

I am assigned to redesign the platform. To communicate that we use deep tech like blockchain to share facts and automate invoice verification against PO and GR, our stakeholder would like the design in a modern UI theme. However, our users are getting used to with the existing version. I didn't want them to feel like they need to learn a brand-new version all over again.

Background

Procure to pay is the process of requisitioning, purchasing, receiving, paying for, and accounting for goods and services. It gets its name from the ordered sequence of procurement and financial processes, starting with the first steps of procuring a good or service to the final steps involved in paying for it. (Margaret Rouse, 2018, "Procure to Pay (P2P)" Para. 1).

For more information, please watch the introduction video of the platform below.

Process

Define

Problem Statement

Prototype

Low-fidelity Wireframes

High-fidelity Wireframes

UX Writing

Test

Team Reviews

User Feedback

Usability Testing

Analytics

Iterations &
Deliver

Detail Editing

Deliver Elements

Define & Redesigning

Our organization didn't realize the importance of conducting user research when I first join this project. We started redesigning by gathering all the feedbacks and problems. Customer support and business analysis teams presented all the results to the B2P product team. We didn't dig down to the causes of those problems. Instead, we jumped to the solution, ideated the ideas, and created a new prototype. 

We launched a new design. The complaining from our users still kept coming, especially from suppliers. After the iterations and getting more feedback from our users, I convinced the team to do usability testing. Since we heard a lot of critical problems from the supplier, we decided to conduct the usability test with them first.

Research

As a UX/UI Designer and researcher, I planned and wrote the usability testing and semi-structure interview script and prepared the test tasks. My colleagues helped me build the prototype, using Sketch and InVision. 5-8 participants were assigned to test with six tasks.

Usability test scriptUsability test script
Invoice example and test taskInvoice example and test task

We conducted the usability test for two rounds. I gave participants six tasks, let them perform, and asked them to think aloud. After the first round, we made some changes and tested it again with a new user group. These are the results that we gained.

Usability test table
Remarks

* New feature** All participants are real users. Frequency of use and age are various, which are affected with the test results

After gathering testing results, my team reported and recommended the solutions to our stakeholders. We discussed to find the final solutions. All problems might not be able to solve by only the design, but I would like to present the screens, describe the findings, and show how we edited the design to abate user's pains.

Landing Page - Dashboard (Task 1 and 2)

The dashboard is the first page that users would land on after logging in. We intended to present useful statistics that help inform users what action they have to take.

Landing Page - Dashboard (Task 1 and 2) - 1
1.

This first picture was an existing version when I first joined the company. It was only one donut chart to show on the dashboard screen. To see invoice status in another period, users needed to add new gadgets and select period.I got a requirement to redesign and add more stats to this page.

Landing Page - Dashboard (Task 1 and 2) - 2
2.

We had added more charts and data on the dashboard. Users can see information differently depending on their authority. Some suppliers thought that invoice status (donut chart) on the dashboard was a pre-loader. They never look at this chart after logging in. They always use the side menu to go to create invoice screens. Hence, nobody noticed that the chart is clickable. It helps them filter the invoices by status easily.

Landing Page - Dashboard (Task 1 and 2) - 3
3.

Since no one uses the information on the dashboard, we thought it would be a good idea to guide users on what to do every day by showing them today's task and shortcut instead of showing only stats. We got rid of the side menu because our stakeholders thought it would modernize the design. And we had a hamburger menu at the top instead.After testing, research gives that our users spent more time understanding what today's task is. And shortcut looks similar to ads banner to them, so they didn't consider to click on it. They tried to find a menu to go to create an invoice.

Landing Page - Dashboard (Task 1 and 2) - 4
4.

We put shortcuts on the top of the screen and made them look less like advertising banners.We redesigned the invoice status chart by adding the number of invoices on each status button to guide them that it is clickable. This time it works. Users get the purpose of the chart. They know how to drill down to see more details and what to do with the data.

Create Invoice (Task 3 and 4)

To create an invoice, users have to select a purchase order number and items. Then they have to insert other details and attach required documents. Between the testing session, I gave an example of invoices and asked participants to create it in our system.

Create Invoice (Task 3 and 4) - 1
1.

Users had to scroll down to find the "Add Item" button. It would show a modal screen that let users select PO number then select product items. After clicking on the "Done" button, they had to scroll up to fill invoice details and go down at the bottom to attach other documents. It's not convenient for users to fill this form, especially for new users who don't know that it has to start in the middle of the page.

B2P Create invoice step 1
left arrow1 / 4right arrow
2.

Our team agreed that we should break down the form into steps. I created wizard steps to help users to focus on a single task at a time. They don't need to scroll up and down to fill the form. One thing that suppliers always complain a lot is the processing of submission time. It took more than five minutes to issue an invoice in the blockchain.

Create Invoice (Task 3 and 4) - 3
3.

We allow the users to select many purchase orders per invoice. Some companies want to create one invoice per purchase order only. For this case, we provided a pre-generated invoice for the supplier to review and edit information. Then they can submit the document quickly. They don't have to select PO, PO items, and attach the documents. It equally skips two steps in self-input mode.

Create Invoice (Task 3 and 4) - 4
4.

We hid item information in accordion the previous design. Our suppliers can't find it. Some of them didn't review the products at all. It causes information errors in invoice details, so we expand the table on the screen.When invoice creation is complete, there is a notification to inform our user.

Document List (Task 5)

There are many types of documents in the system. We designed document list pages. The layout looks similar for all documents, but they have different information. Users can access each type of document by using the sidebar menu. These are some changes I have made to the design.

Document List (Task 5) - 1
1.

The user had to click on the search button to see search and filter.There are more than 20 columns on the screen. Users had to horizontal scroll to find the information they want to see.

Document List (Task 5) - 2
2.

The user can search and filter the invoice by filling in the keyword at the top of the page. As they requested more search criteria, I designed a search bar expandable.To reduce the number of columns, we decided to build the column display feature that allows users to sort the frequency used column and save it as default. Next time they enter this page, they see the columns that they selected.

We found that suppliers only search after they had to wait for the proceeding of submission an invoice for more than five minutes to make sure that an invoice has issued in the system. That means they don't use other filters. This design is applied on the buyer screen too. Technically, it is the same interface. I can't reduce the number of filters for the suppliers. 

Suppliers would like to press Enter on the keyboard right away after filling in an invoice number on the search bar. As we have many search criteria, we concern that our users would press enter every time they fill in each field. It may affect the performance because every time they hit the search button, the system queries information from API. This topic is still needed to discuss further.

So far, we didn't make any changes on the document list design after the test. 

Invoice Details - Request to resubmit invoice (Task 6)

When a supplier submits an invoice, the system will notify a buyer to review, then approve or reject that invoice. In case that information is not correct, the buyer can reject and request a supplier to resubmit it.

Invoice Details - Request to resubmit invoice (Task 6) - 1
1.

On an invoice listing page, users can click on an invoice number to see invoice details.

Invoice Details - Request to resubmit invoice (Task 6) - 2
2.

We added more information and sorted sections in the new design. Suppliers will be notified via email when a buyer rejects any invoices. The invoice status will change from "Submitted" to "Request to resubmit." They can find reject reason in the action history section. Users had to scroll down to the bottom to find a rejected reason and scroll up to edit this invoice. It is not convenient for them.

Invoice Details - Request to resubmit invoice (Task 6) - 3
3.

To help suppliers to find rejected reason quickly, we add a red box on the top of the page. We expected our suppliers to see the information on that box and make the change according to rejected reason. After conducting user testing, it turned out that suppliers didn't notice that box. They thought it just general information that came with an invoice.

Invoice Details - Request to resubmit invoice (Task 6) - 4
4.

We changed the color of the text from dark grey to red and added an exclamation mark sign before the text to grab user attention. Now, it works! Just small modifications can change the results.

Other Iterations

Some other features weren't in the testing focus. I would like to share with you how I revised the design to improved user experience.

3 Way Matching

3 Way Matching is one of the essential features. The system integrates PO and GR from SAP to blockchain. At midnight of every day, all the submitted invoice will be verified against PO and GR. If all information in each document is matched, the status of an invoice changes from "Submitted" to "Approved." The supplier can monitor the result and proceed with payment instruction. In case that the information doesn't match, an invoice status will be changed to "Pending Manual Approval." Next, the accountant from a buyer company called DoA Approver will go over the matching information. If the difference is acceptable, they could approve that invoice to proceed next step. Otherwise, they can request the supplier to edit the information and resubmit it again. 

3 Way Matching - 1
1.

This page has general information like invoice details. The vital section is Matching Detail, where DoA would come to compare the data and make a decision whether to approve an invoice or not. Some users had a problem reviewing information on the data table. It looked more like a list of goods, not a comparison against each document. And the background colors in the table didn't imply any meaning for the user.

3 Way Matching - 2
2.

I use accordion in my design. Only the accessory sections are expanded when the user first visits this screen. In the Matching Details section, I created a checklist of information that the user has to compare. And then, I highlighted mismatch information with the red text color. Immediately that users see the red cross mark sign, they know what information they need to consider. It helps decreases time consuming on this page.

PO Delivery

When a buyer order a big lot, a supplier has to pack and deliver it to the buyer's warehouse. Sometimes, they have difficulty from either of the two sides that hamper delivery. It is very convenient to propose and confirm a new delivery date on the platform.

PO Delivery - 1
1.

With this first version, users could propose the delivery date on the PO details page. The step was: go to the side menu bar, select on a purchase order, search and select a PO, and then propose or confirm a delivery date.

PO Delivery - 2
2.

It would be helpful for users to see the big picture and have a tool like a calendar to help them plan when to clear the warehouse for buyers or estimate how long they have to pack in advance for suppliers. Proposing a new date can be done quickly, just like you add an appointment or an event on a general calendar. 

We have color labels at the top.

  • Solid purple is effective delivery date. It is an agreed date, but buyers and suppliers can still propose until the effective date.
  • Bright purple is the proposed delivery date. It shows when you propose a new date and waiting for another side to confirm it.
  • Bright orange is pending confirmation. You have to take action by confirming or proposing a new delivery date.

3. Unfortunately, we didn't have resources much at that time, so we build this version instead. It is the same layout with other document list page. We have "propose" and "confirm" buttons in the last column. User can click on material description to see more details.

PO Delivery Schedule List View

These are some cases, as part of my redesign work. I am glad that we have created a platform that meets the user needs and continuously develop for user satisfaction. From day one, our company didn't realize user research as a worthy effort. Since we conducted the first usability testing and semi-structured interview, that gave us the useful results. It helps to guide us on what we could do better for our users to complete their tasks with delightful feelings or at least not frustrated between using our platform.

After the experiment on the design and iterations, I had created a style guide for our platform. It could help other members of the design team and our developers apply the design quickly. 

B2P Style Guide

Reflection

We made some edits on information architecture and reduced the steps to completion. Compare with the first version, the time that suppliers took to complete the task tend to decrease. We also received fewer complaints about the design, which means the new design is easier to understand.

I had a chance to observe our users while they are using the platform between training. Most of them were able to finish the task before the trainers finished explaining. And I saw a user struggled with filling a form. She didn't notice the red message "This field is required" under the text field. According to the design, the text box border is supposed to be red too. I realized that in-person communication between developers and UX is crucial. The defect that is ranked in low priority can impact the user experience.

We have set Google Analytics on our website. We could use quantitative data to help improving user experience. I am keen on running contextual inquiry to get to know more about how people work in the field too. My job is endless. Constant iteration and testing make the product a pleasure to use and promote the significance of customer experience to the platform's achievement.