A new Jakmall Affiliate’s Dropship Checkout Experience

Company

Jakmall

Role

UI/UX Designer

Timeline

Jul - Sep 2022

Team

Kevin Pranata

Revan Dewa - PM

Tools

Figma

ClickUp

Notion

A new Jakmall Affiliate’s Dropship Checkout Experience

My Role

UI/UX Designer

Company

Jakmall

Team

Kevin Pranata

Revan Dewa (PM)

Timeline

Nov 2022 - Jan 2023

Background

Jakmall is an ecommerce platform that have 2 types of user, the customer and affiliates. Currently the customer and affiliates use the same checkout menu.

  • Affiliate user is someone who promotes a product or service to their audience and earns a commission by doing dropship.

  • End-user/ Customer is someone who purchases a product or service from a business for their personal use or consumption.

My Contribution

Gropass as a facilitator for sending WhatsApp messages from resources to users through a 3rd party integrator, namely Jatis. With this application, it is expected to provide convenience for resources as message senders because the process and messages are visualized.

A New Multi-Stepper Checkout System: A Faster and hustle-free checkout

Step 1: Order Source Information Section

Step 2: Product Section

After affiliates hit the save button, they will be redirected to the main summary page. The order source information card will change to a summary information such as affiliate’s store, invoice number. User can edit the data by pressing the “ubah” button.

Affiliate can use the autofill features by filling the invoice number and press the “Cek Invoice” button to validate and trigger the autofill system. If the invoice is recorded in the marketplace’s system , a success alert will appear and the system will run the autofill feature.

  • When affiliate first open the section, When the autofill from the invoice before is succeeded, a product data that sent by marketplace APIs will expanded.

  • This product data displayed the product information that affiliate’s customer ordered in the marketplace. Affiliate can directly copy the product’s SKU number and paste it in the search bar.

  • A list of product will shown based on where it’s stored in the warehouse. Affiliate then can choose which warehouse they want the product will be delivered from.

The Second step of the process is the new product section. This step. this step let affiliate search for product they want to checkout.

The last step is the delivery information.

  • This step required affiliate to fill the expedition they want to use and their recipient information.

  • The required data will automatically filled if the autofill is succedded.

  • An expedition and recepient information from marketplace API will also be shown in an table so affiliate can match the auto-filled data with the API’s data.

The last step is the delivery information.

  • This step required affiliate to fill the expedition they want to use and their recipient information.

  • The required data will automatically filled if the autofill is succedded.

  • An expedition and recepient information from marketplace API will also be shown in an table so affiliate can match the auto-filled data with the API’s data.

Step 3: Delivery Information

The Process

Gathering Insights & Identifying Problems

Affiliates have to search and browse through the product landing page to checkout

"It kinda bothers me that we have to search each of specific product and browse through product landing page each time we want to checkout"

"it was really tiring and inconvenience if we want to checkout a lot of things at once"

💡How might we improve the checkout flow?

Affiliates feels inconvenience when they have to go back and forth between 2 places.

"I have to go back and Forth Between Shopee and jakmall to see what customer ordered"

"it was really tiring and inconvenience if we want to checkout a lot of things at once"

💡How might we show affiliate the ordered data from the marketplace in the checkout process?

Affiliates feels the checkout process is overwhelming and inefficient.

"The checkout process is time consuming and inefficient"

"It was really overwhelming to do the checkout process because i have to fill all the information especially during high traffic"

💡How we make simplify the checkout process?

Proposed Solution

After we gathered some insights, i try to generate some solutions ideas and discuss it with product managers. This was the summary of the proposed solution:

How might we change the checkout flow?

How might we show affiliate the ordered data from the marketplace in the checkout process?

  • Show the product data from marketplace API’s

    This product data displayed the product and customer’s information that affiliate’s customer ordered in the marketplace such as the product name, quantity, expedition, etc.

How might we simplify the checkout process?

  • Add Autofill data features.

    Autofill features aims to simplify the checkout process for customers by automatically filling in their Store order source and delivery information. This auto-filling system will use invoice to retrieve the transaction data from the affiliates store in the marketplace. Affiliates needs to connect their marketplace store first so our system can connect to their API.

  • Create an multistep checkout process

    A multistep checkout process can increased flexibility. Multi-step checkout process can be designed to allow users to go back and edit their information at any time during the process, without having to start over. reduced user errors by breaking the checkout process into smaller steps, users are less likely to make errors or overlook required information. Each step can be designed to focus on specific information, reducing the likelihood of confusion or missed fields.

Proposed Solution

After we gathered some insights, i try to generate some solutions ideas and discuss it with product managers. This was the summary of the proposed solution:

How might we change the checkout flow?

How might we show affiliate the ordered data from the marketplace in the checkout process?

  • Show the product data from marketplace API’s

    This product data displayed the product and customer’s information that affiliate’s customer ordered in the marketplace such as the product name, quantity, expedition, etc.

How might we simplify the checkout process?

  • Add Autofill data features.

    Autofill features aims to simplify the checkout process for customers by automatically filling in their Store order source and delivery information. This auto-filling system will use invoice to retrieve the transaction data from the affiliates store in the marketplace. Affiliates needs to connect their marketplace store first so our system can connect to their API.

  • Create an multistep checkout process

    A multistep checkout process can increased flexibility. Multi-step checkout process can be designed to allow users to go back and edit their information at any time during the process, without having to start over. reduced user errors by breaking the checkout process into smaller steps, users are less likely to make errors or overlook required information. Each step can be designed to focus on specific information, reducing the likelihood of confusion or missed fields.

I mapped out user flows to illustrate the critical paths affiliate users will follow when they do to checkout process.

  • The green is the automated flow (Autofill)

  • The blue is the manual flow (Non-autofill)

User Flow

Revamp the user's flow with an autofill feature

Currently, The affiliate has to navigate through the marketplace's website, search for the specific products they want to purchase, add each item to their cart individually, fill all the required data, then complete the checkout process one by one.

This can be especially challenging for affiliates who have a large number of products they want to purchase. The process of manually checking out products from a marketplace as an affiliate is very inefficient, tedious and time-consuming.

This manual checkout process can also be prone to errors, such as accidentally purchasing the wrong product or failing to use the correct affiliate link or code during checkout. Additionally, if the affiliate is purchasing products from multiple sellers on the marketplace, they may need to navigate through different checkout processes and payment systems for each seller, which can further add to the complexity of the process.