Background
The traditional procurement is associated with poor online searchability and limited information about manufacturers and suppliers, slow quotation process (a lot of manual work.)
With e-procurement, instead, buyers can easily compare products and prices, get tailored offers, reliable delivery, and make safe payments.
As for suppliers, they get a full control over the customer journey, can track and manage their inventory, send invoices, get an access to suppliers database and sales analytics.
As Tokopedia is a well-known C2C marketplace in Indonesia, we are aiming to open up a new business (B2B marketplace) with leveraging what we have.
Framework
What is Buyer Order Management?
User Research
Flow
How might we improve GoMart’s homepage for our users so that we can increase our overall Visit-to-book conversion?
Competitor Analysis
Wireframe
Usability Testing
As the proposed wireflow of BOM for Tokopedia B2B is slightly different and more complex than BOM in the Marketplace, thus I needed to conduct usability testing to the potential users (buyers). I tested the wireframe to 5 Procurement Specialists in Tokopedia who frequently use Tokopedia Marketplace as buyers.
Brief conclusion from the UT:
Invoice Confirmation Activities
Participants failed to understand that their order went to different tab (from transaction list to billing list) after they confirmed Goods Received.
For iteration, I have moved several status activities that involve invoice/billing confirmation such as: waiting for billing - billing confirmation to transaction list & only payment activities that will be in the billing list.
High Fidelity Prototype
1. Order List
Solution 1: Revamping from Table to Dashboard
Drastically I have transformed a whole layout of our Buyer Order Management from "a table" in the previous design phase to be "high-functional and expandable dashboard". Hence we can cater to wider use cases, as per the problems that we've discovered.
Solution 2: Visibility Improved Timer + Status
Most participants stated that the timer was too small and was not clear enough about what kind of information it tried to imply.
For iteration, we’ve decided to combine the timer, status & ticker into a new component for buyer to create a more sense of urgency.
Solution 3: Navigation
I took consideration to improve existing C2C sidebar navigation. We found that its hover interaction might be hard to highlight the menu inside. Also prone to click errors.
So I solved this problem by simply changing the interaction from hover to click.
2. Order Details
Solution 1: Revamping from Pop-up to Page
From research and analysis earlier, order details are designed to be pages instead of pop-up, pages also have better expandability in future design and development than pop-ups like in C2C.
Solution 2: Clearer Progress Bar + Personalized Dynamic Message
I founds that users need effective ways to find out the status of their transactions and quickly decide what next relevant actions they can take.
Therefore I made a new Progress Bar along with messages and relevant actions that change based on the status of the order.
Solution 3: Envelope-styled address card
Mimicking the address card similar to envelope design with red-blue stripe to emphasize that it contains mailing information.
