Jakmall

Jakmall

Redesigning Affiliate Registration Form

Redesigning Affiliate Registration Form

Timeline

Jun 2022 - Jul 2022

MY ROLE

Full-Stack Designer

Responsibilities

Product Design

Product Thinking

UX Research

Company

Jakmall

Tools

Figma

Figjam

Jira

Background

Jakmall is an e-commerce platform which offer an affiliate program where user can register and resell products from Jakmall. Jakmall wants to launch an affiliate’s warehouse feature which allow affiliate users to select their preferred warehouse from which products will be shipped to customers. Users can select their preferred warehouse once when they first register to become an affiliate and can’t be changed later on.

Problem Discovery

While re-evaluating our affiliate's registration flows, we realized that the existing flow presents all required information (Personal Information, Address Information, and Additional Information) in a single-page format. The most sensitive details, such as ID card numbers, appear at the top of the form, potentially intimidating users and causing hesitation in the registration process. Additionally, the existing registration flow was a single-page form with numerous fields, leading to high drop-off rates and user frustration. The system also lacked a streamlined method for affiliate users to select a warehouse based on their location, causing inefficiencies in logistics and order fulfillment.

The current registration form requires users to complete a single flow registration process.

The lack of a dedicated section for a registration form particularly for warehouse selection can lead to overwhelmed feeling, confusion and error in the registration process in addition to looking outdated.

The current registration information are intimidating and bluntly ordered.

Asking for an ID card number and photo at the first step may pose to eligibility, privacy and security concerns which can cause to user’s hesitation about the program.

Warehouse Selection

Jakmall wants to launch an affiliate’s warehouse feature which allow affiliate users to select their preferred warehouse from which products will be shipped to customers. Users can select their preferred warehouse once when they first register to become an affiliate and can’t be changed later on.

User Flow

Readjust Information flows

Readjust Information flows

We readjust the flow of information that user needs to fill depends on the type of information. If it contains general, low-commitment questions we placing it first as its:

  • Low Barrier to Entry: Users start with easy, non-sensitive questions, making them more likely to proceed.

  • Engagement First: It eases them into the form rather than hitting them with personal data right away.

  • Psychological Commitment: Once users start filling out simple details, they’re more likely to continue.

Warehouse Selection

Low Barrier to Entry: Users start with easy, non-sensitive questions, making them more likely to proceed.

  • Engagement First: It eases them into the form rather than hitting them with personal data right away.

  • Psychological Commitment: Once users start filling out simple details, they’re more likely to continue.

Solutions

Redesign & Reorder The Registration Form to a Multi-Step Registration Form Flow

Redesign & Reorder The Registration Form to a Multi-Step Registration Form Flow

Redesign the checkout flow into a Multi step registration form can improve user experience by breaking up a lengthy registration into smaller and more manageable sections. User will less likely to feel overwhelmed and more focused on the content. This will also optimized the warehouse selection because it will have a dedicated section.

I also reorder the registration section from the more general to a more personal information to make it feel less intimidating.

Provide A Warehouse Suggestion Based on User's Address And Hide The Warehouse Selectiom

Provide A Warehouse Suggestion Based on User's Address And Hide The Warehouse Selection

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.

  • User can select one warehouse now. The system will automatically select the recommended warehouse based on user’s address, city, and zip code data.

  • User can also change the warehouse by clicking the “Choose Other Warehouse” button and the warehouse selection will expanded. The recommended warehouse will be the selected by default.

  • If user wants to choose the recommended warehouse, user can just hit the “Continue” button.

Result

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.

What i’d do differently next time & Key Takeaways

Key Takeaways

Balancing Stakeholder Needs & 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.

Kevin Pranata

kevinpranata41@gmail.com

© 2025 Kevin Pranata. All rights reserved.

Kevin Pranata

kevinpranata41@gmail.com

© 2025 Kevin Pranata. All rights reserved.

Kevin Pranata

kevinpranata41@gmail.com

© 2025 Kevin Pranata. All rights reserved.