Timeline
My Role
Company
Nexsoft
Tools
Figma
Figjam
Jira
Team
Kevin Pranata
Revan Dewa (PM)
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.
Customer is someone who purchases a product or service from a business for their personal use or consumption.
Problem Discovery
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.
A New Multi Stepper Checkout System: A faster and hustle free Checkout
Step 1: Order Source Information Section
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.
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.
Step 2: Product Section
The Second step of the process is the new product section. This step. this step let affiliate search for product they want to checkout.
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.
Step 3: Delivery Information
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.
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.
What Do affiliates think about the current checkout system?
First i try to gather some insights by doing user interview. In this step, we conducted 30 minutes the qualitative research by interviewing 6 affiliates user via Google Meet. We try to understand their needs and pain points.
Questions revolved around:
What do you think about the current checkout process?
How’s your experience in using the current checkout system?
Do you have any difficulties in the checkout process?
Gathering insights & Identifying problems
Based on the user interview earlier, i gathered some insights:
Developing a 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?
Make A New Dropship Checkout Menu For Affiliates
Make a dedicated checkout menu for affiliates so affiliates can directly from anywhere checkout without have to search for the product and go through the product detail page.
Readjust the Dropship Checkout Flow
Readjust the flow into three different Category/steps.
Informasi Sumber Pesanan
Produk Dibeli
Informasi pengiriman
Add Product Search Section to the checkout flow
Create a section for user to search and add product their customer order directly in the checkout page. Affiliates can also checkout multiple product at once. This makes the process more streamlined and efficient checkout process without had to navigate through the marketplace's website and complete the product’s checkout process one by one.
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 A 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.
Brainstorming The Design
Catering to 3 main flows:
Step 1: Order Source Information Section
Step 2: Product Section
Step 3: Delivery Information Section
With the information architecture laid out, I began to visualize my ideas with sketches.
Pitching Alternatives
After i did some brainstorming and design research sessions, i came up with 2 design alternatives. The 2 alternatives
Both of these design alternatives use the stepper concept to divide the checkout process into smaller, more manageable sections. However, they differ in their approach to displaying and editing the information entered in each step. It's up to the design team to weigh the pros and cons of each approach and decide which one best meets the needs of the users and the business.
Alternative 1
The second design alternative proposed is the traditional stepper approach.
This approach also divides the checkout process into three steps. However, instead of using cards, the user can directly fill in the required information in each step and press the "next" button to move on to the next section.
This approach is more straightforward and faster since the user doesn't need to press the card to edit the information. However, it might not provide as much context and summary information as the card stepper approach.
Alternative 2
In this approach, the checkout process is divided into three steps, each represented by a card.
The first step is for order source information, the second is for product selection, and the third is for delivery information. After completing each step, the card will turn into a summary card that displays the information entered in the previous step. If the user needs to edit any information, they can simply press the "ubah" (edit) button on the summary card to expand the card and change the information.
Design Iteration & Improvement
Based on usability testing from 6 affiliate user + stakeholders feedback, I continually iterated my design over the span of 1 sprints (2 weeks) with 3 major improvements
Add “Cek Invoice” Buton and Autofill Function Info.
This approach is more straightforward and faster since the user doesn't need to press the card to edit the information. However, it might not provide as much context and summary information as the card stepper approach.
Add Status to the API Data
This approach is more straightforward and faster since the user doesn't need to press the card to edit the information. However, it might not provide as much context and summary information as the card stepper approach.
A New Multi-stepper Checkout System
A Faster, Seamless, hustle free checkout
New Checkout entry
Affiliates have to search and browse through the product landing page to checkout
Step 1: Order Source Information Section
The checkout process will be divided into 3 steps that represented by a card.
The first step of the process is Order Source Information. Affiliate can use the autofill features by filling the invoice number and press the “Cek Invoice” button to validate and trigger the autofill system.
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.
Step 2: Product Section
The Second step of the process is the new product section. This step let affiliate search for product they want to checkout.
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.
Then user can save and a product summary will shown that contains the product, total weight, quantity, price, and variant. User can also edit the product by pressing the “ubah” button
Step 3: Delivery Information Section
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.
Conclusion
To Streamline the workflow between design and development, we use the token system that act as a variable that stores styles such as colors, typography, and measurements. Whenever the design team wants to change a style, they can change the color token without the need of sounding the engineers that there are changes in the color. Both designers and engineers can be confident that the same color will be used in both places.
Balancing Stakeholder Needs and User Needs
One of the most difficult situation i faced in this project is balancing the needs of multiple stakeholders. These stakeholders can include the users, the development team, marketing, and even company executives. I need to find the right balance that meets the needs of these different groups while still prioritizing the user experience.
Managing Scope Creep
I faced some Scope creep in this project , or the tendency for projects to expand beyond my original goals. It often occurs when new requirements are added during the design process or when stakeholders request additional features. I must be able to manage scope creep effectively to ensure that projects remain focused and on track, while also accommodating necessary changes without compromising the user experience.
