Timeline

2023 May - July ( 3 months )

Team

Solo project

Tool

Figma, Figjam

My Role

User research, concept development, user interface design, prototyping, user testing, visual design

Tradefull

Designing an e-commerce CRM management workflow to streamline operations and encourage user engagement.

Background

Tradefull is an e-commerce SaaS platform that provides a unique set of software and services to support online businesses in managing various aspects of their operations. This includes order management, order and inventory management, analytics and reporting, and integration with third-party services.

As Tradefull seeks to expand its customer base, it has recognized a problem with its current sales enablement process. This process relies on manual communication and training, which slows down the onboarding of new clients and their ability to start selling on the Tradefull platform. Therefore, there's a need to thoroughly examine the workflow and use technology to streamline and improve the sales enablement process, aiming for greater efficiency and effectiveness.

Objective

Recognizing significant delays and negative feedback related to the sales enablement process, I stepped into the project lead role and thoroughly evaluated the current workflow.

Consequently, I undertook the task of redesigning the Tradefull platform, integrating an improved onboarding design. To address challenges such as user drop-offs and onboarding delays, my primary focus is on refining the stages that facilitate the successful completion of the shipment step.

Overview

Set up guide

Set up guide page that guides users to expediate the sales generating process by breaking down the tasks into manageable steps.

Shipment Page

Gradually introduce advanced features and complexities with embeded interactive elements & instructions, and real-time input feedback.

Dashboard

Dashboard design with a focus on information hierachy, visual consistency and customization.

Design Process

DISCOVERY

Transfer business needs to a design plan

Upon receiving the Business needs from the upper management team, I was tasked with creating a more efficient onboarding process for new clients. The goal was to reduce the average duration from 45 days to just 15 days. Embracing the essence of nature, I began by exploring quick and straightforward solutions that could be implemented within our technical constraints.

One such proposal was to develop tutorial materials, including visually engaging documents and instructional videos, which could be promptly shared with clients. This initiative alone resulted in a notable improvement, reducing the onboarding process to 30 days. However, my dedication to the task urged me to delve deeper into the underlying causes of the challenges we faced.

By closely studying each stage of the journey, I endeavored to create a streamlined flow that would guide clients seamlessly through their onboarding experience.

Key business issues

Clients drop off rate is as high as 23% after signing contract.

Clients typically take an average of 45 days to achieve their first sale after signing the contract.

Most clients submitted at least 4 cases for technical support during onboarding process and spent more than 2 hours on portal training.

Client type analysis

80% Small Medium Enterprise clients who sell home goods, fashion products or small electronic goods.

15% are Manufacture who has little or no ecommerce experiences.

5% Large enterprise client who owns multiple well-known retail brands.

Define scope of the project

The project aims to concentrate on the 80% target clients who possess some experience in eCommerce or online retail. The objective is to address challenges including user drop-offs and onboarding delays; my primary focus is on refining the stages that facilitate the successful completion of the sales enabling process.

RESEARCH

Interviewing with stakeholders involved to surface friction points

I talked to 17 new clients who completed onboarding process and generated first sales in 2022 calendar years to gain qualitative data on their onboarding experience and the struggles many share.  11 clients used more than 45 days to complete the onboarding process. The clients used 24 days at minimal to complete the onboarding.

Meanwhile, I gathered insights from four project coordinators and managers regarding the onboarding projects they have completed. Gathering insights from both clients and employees allowed me to gain a more comprehensive view of the entire process.

Workflow analysis

To gain a deeper understanding of the project coordinator's onboarding workflow, I created a comprehensive workflow map that documents all interactions occurring throughout the onboarding process, encompassing both front-end and back-end stages. This map aims to highlight any friction points or areas of inefficiency.

A summary of the pain points experienced in the user experience (UX) journey

No clear guidance

Lack of clear guidance for multi-service sales within Tradefull leads to users consistently seeking advice and losing track of their progress.

Lack of status transparency

Clients frequently face restricted visibility concerning their current status, primarily attributed to the absence of a feedback loop that was previously reliant on manual emails.

Communication barriers

The sales enablement process encompasses numerous communication touchpoints and file exchanges, which can result in delays and misunderstandings.

DEFINE

Identifying problem space

Post-research, I find that partner engagement in onboarding diminishes due to a tedious and repetitive procedure, particularly in the phase from the kickoff meeting to receiving the shipment, causing consistent drop-offs and delays.

Confirming design direction

Refine the sales enabling workflow aimed at enhancing the completion of the sales enablement process, with a particular emphasis on refining stages to actively encourage engagement and facilitate the shipment step.

UX DESIGN

Conducting design audit of current site

After the research phase, I can deduce that partner engagement and involvement in the onboarding process decrease due to a tedious and repetitive procedure, leading to consistent drop-offs and delays.

Prototyping while taking into consider the user behaviors and organization metrics.

Design Consideration 1: Embracing Familiar UI Patterns for Seamless User Adoption
When designing Tradefull, it is important to create an interface that aligns with clients' existing mental models from popular eCommerce platforms like Amazon and Shopify. By incorporating familiar UI patterns, clients can easily follow and navigate the system, reducing the learning curve and improving user adoption

Design Consideration 2: Balancing User Satisfaction and Lightening Project Coordinators' Workload
By classifying different levels and types of support, it is possible to ensure that user needs are met effectively while also reducing the workload of project coordinators. This change enables project coordinators to allocate more time towards managing critical projects.

KEY FEATURES

Key Focus 01:
How might we guide user through complex work flow effectively ?

Providing users with various options to learn and navigate the system effectively

Onboarding questionnaire

Get to know user’s business demands by asking a series of onboarding questionnaires, this prepares for a personalized task checklist and customized dashboard design.

Personalized Task checklist

Provide users with a checklist of tasks they need to complete to get started. This not only helps them feel a sense of progress but also ensures they don't miss critical steps. I started wireframing and tested out the dashboard design with onboarding tutorial design with potential users. I want to see if the tutorial is intuitive for users to navigate and complete their tasks.

First to final design
Overcoming the challenges of the first onboarding checklist design

The initial wireframe presented a straightfoward design but received feedback that it lacked the ability to convey users the sequences of steps or tasks and less intuitive to follow. Then, I iterated different UI pattern - progress bar that can convey the tasks flow in more clear and effective ways.  

To address the challenge of managing tasks that can be performed simultaneously but have varying levels of priority. I labeled and broke down the task sequences, enabling users to identify high-priority tasks that require immediate action.

Embedded Interactive elements and instructions

Gradually introduce advanced features and complexities as users become more familiar with the basic functionalities. This prevents overwhelming users with too much information upfront. This user onboarding experience introduces interactive elements and instructions to users as they are using the app or product and users learn by doing.

Real-time input feedback

Enhance the user experience by offering instant guidance, validation, and confirmation of their interactions.

Key Focus 02:
How might we guide user through complex work flow effectively ?

What data/information are essential? What’s the best way to present it to users? To design a dashboard visualizing key business insights with customized sections.

In my initial sketch, I included the typical e-commerce features like revenue statistics, recent orders, and shipment tracking. However, upon further consideration, it became apparent that these might not align with the specific needs of our users on Tradefull. Since our partners often opt for partial services like storage or Dropship fulfillment, I decided to pivot. My approach involves crafting a dashboard that empowers users to tailor the visibility of secondary features according to their preferences. These customizable elements will be juxtaposed with the core features, which will remain fixed on the left side of the screen. This setup ensures that users can gain essential business insights and curate features that matter the most to them.

INTERFACE DESIGN

Build scalable UI kit

I redesigned the Tradefull UI with a visual hierarchy, consistency, and responsiveness, allowing members to orient themselves during the task-oriented flow better. It is scalable among Tradefull products across mobile/web applications.

FINAL DESIGN

Shipment workflow - before

Shipment workflow - After refinement

Prototyping demo

REFLECTION

Make design decision align with business goals

User testing, coupled with iterative design, forms the cornerstone of my design approach, fostering continual improvements and refinements. Incorporating user feedback at every design stage is pivotal to crafting user-centered products. Additionally, I recognize the importance of pivoting design decisions when necessary to ensure a responsive and effective user experience.

Design is an iterative process

Collaborating with multiple stakeholders is indeed a key strategy for gaining a deep understanding of business goals, mission, and values. This collaborative approach helps build a comprehensive perspective that can guide design decisions in a way that aligns with the broader organizational objectives.