Flower cursor
Easyship Mobile App Mockup

Shipping Label Purchase

company

Easyship

Period

Mar - Oct 2023

my responsibilities

User Research
Prototyping
Usability Testing
Design QA

Overview

Background

Easyship, an all-in-one shipping platform, offers discounted couriers to e-commerce businesses for both domestic and international shipping. Its mobile app version was launched in 2020, which initially focused on after-sales services like shipment tracking.

Problem

Easyship mobile app lacked a crucial feature: shipping label purchases. This limitation restricts its potential as a comprehensive e-commerce shipping tool, hindering user acquisition and retention.

Objective

Recognising the problem, we initiated a project collaborating with an external app development agency to integrate seamless label purchase functionality, unlocking the app's true potential and driving user growth.

Results

90%

of customers praised the new feature for enhancing their on-the-go shipping experience

18%

increase in monthly active users within a month

10%

increase in total revenue generated from shipping label purchase on the mobile app

Easyship Mobile App Phase 1 HomepageEasyship Mobile App Phase 1 Shipment Detail Page
Current product with managing shipments feature only

Discovering User Needs

To understand user needs regarding the mobile app, I conducted an online survey with 42 existing mobile app customers.

Survey Insights

84%

considered it is useful to get a quote and create a single shipment, as opposed to creating multiple shipments.

76%

believed delivery time and tracking quality were crucial factors when selecting a courier service.

41%

hoped to achieve comparing shipping rates, saving time editing shipping information and address with a mobile shipping app.

The missing feature on mobile app is causing trouble for our users...

Quote Icon

I need to work on the go, and I can't buy shipping labels without my laptop.

– Bruce T.

Quote Icon

The text on the mobile browser is very tiny and hard to read.

– Dan C.

Quote Icon

It took me too many steps to buy a label on the dashboard website.

– Misty H.

Survey by Typeform

Analysing Our Competitors

To craft the smoothest label-buying experience, I conducted an in-depth analysis of our key competitors' label purchase flows and user interface.

Among these, FedEx split the "get a quote” form into multiple pages, unlike other competitors who opted for a single-page approach.

Furthermore, each competitor require various information to generate shipping rates, as outlined in the table below.

Easyship Shipping Label Purchase Competitors Table
FedEx screenshot
FedEx
DHL screenshot
DHL
SF Express screenshot
SF Express
ShipStation screenshot
ShipStation
Shiprocket screenshot
Shiprocket
Spaceship screenshot
Spaceship

Defining the User Flow

After gathering insights from the competitors, the Product Manager and I brainstormed the steps and potential information in the user flow. Finally, we defined six main steps for the shipping label purchase flow.

Imagine how our users purchase a shipping label on mobile...

#1

Fill in get a quote form

  • Ship from
  • Ship to
  • Package
#2

Select a courier option

  • Courier service name
  • Price
  • Tracking quality
#3

Select add-ons

  • Value of the goods
  • Insurance fee
#4

Select a handover option

  • Pickup date and time
  • Pickup fee
  • Drop-off
#5

Review and pay

  • Summary
  • Payment methods
  • Terms & conditions
#6

View confirmation and printing labels

  • Order status
  • Order info
  • Print labels

Simplifying the Dashboard Input Form for Mobile Users

To deliver a fast and intuitive quoting experience on mobile, I collaborated closely with the Product Manager and Backend Engineers to identify essential and optional information for domestic and international shipments.

Recognising the limitations of smaller screens, we implemented a dynamic form that adapts based on shipment type. These resulted in:

-50%

total number of fields for domestic shipments

-14%

total number of fields for international shipments

Input Fields
Required and optional fields in Package form

From a messy whiteboard...

Brainstorming User Flow
Brainstorming the user flow with Product Manager

... to a well-structured user flow

Testing Our Prototype

After creating an initial prototype and iterations, I conducted three rounds of moderated usability tests with 21 users, combining in-person and remote testing methods.

During the tests, users were tasked with completing the happy path scenario and comparing iterations. I observed their interactions and gathered feedback to refine the prototype.

#1

View quote input and filter options

Over half of the users chose Version C because they found the filter buttons with handover options were very visible and easy to select.

Which version do you find to be clearer & more effective to view the quote inputs and filter options?
Easyship Shipping Label Purchase Usability Test Iteration 1
Easyship Shipping Label Purchase Usability Test Iteration 1A

A

14.3%
Easyship Shipping Label Purchase Usability Test Iteration 1B

B

23.8%
Easyship Shipping Label Purchase Usability Test Iteration 1C

C

52.4%
Easyship Shipping Label Purchase Usability Test Iteration 1D

D

9.5%
#2

Compare and select courier options

Nearly half of the users chose Version A because they believed the badge (Cheapest) was most important for them to quickly identify the best courier option, with natural reading flow from top left to bottom right.

Which version do you find to be clearer & more effective to compare and select courier options?
Easyship Shipping Label Purchase Usability Test Iteration 2
Easyship Shipping Label Purchase Usability Test Iteration 2A

A

42.9%
Easyship Shipping Label Purchase Usability Test Iteration 2B

B

14.3%
Easyship Shipping Label Purchase Usability Test Iteration 2C

C

9.5%
Easyship Shipping Label Purchase Usability Test Iteration 2D

D

23.8%
*The remaining 9.5% of the participants selected other options.
#3

Overall Findings:

Users generally found it easy to locate the filter buttons, fill in or edit information, and navigate between pages.

The tracking quality filter was deemed unnecessary and was subsequently removed from the design.

Is it easy to navigate between pages?

4.33
4.29

Is it easy to fill in or edit information?

How easy is it to find the handover filter buttons?

4.14
2.70

How useful is the tracking quality filter?

*On a scale of 1 to 5 (1 represents "very hard / not useful at all"; 5 represents "very easy / very useful")

Conducting Design QA

Throughout the development process, I conducted three rounds of design quality assurance (QA), resulting in approximately 30 bug tickets related to component styles, error messages, validations, and search results. All identified issues were promptly addressed by the external agency.

Bug hunting game begins!

Easyship Shipping Label Purchase Bug 1

Inconsistent card height

Easyship Shipping Label Purchase Bug 2

Optional fields mistakenly identified as missing fields

Easyship Shipping Label Purchase Bug 3

Incorrect error message

Easyship Shipping Label Purchase Bug 4

Incorrect search result

Thanks to the close collaboration with the agency, all bugs were fixed!

Final Prototype

#1

Filling Shipping Information

The form contains three distinct sections: Ship From, Ship To, and Package.

Users can swiftly choose existing sender addresses from an address list or add a new one using a dedicated address form.

#2

Comparing Courier Services

After the form is completed, the user will view the quote results with a list of courier services, comparing the shipping cost, delivery time, tracking quality etc.

The user can also view the details of each courier service including import tax & duty handling and cost details.

#3

Selecting Handover Option

The user can either pick a date and time for courier pickup or drop-off the parcel at the drop-off locations.

If the service incurs additional cost, the total shipping cost will be updated automatically. The user can slide up the footer to view the cost breakdown.

#4

Completing Order and Printing Shipping Label

In the summary page, the user can review the shipping information and select payment method.

Once the payment is completed, the order confirmation page displays the downloadable shipping label, ready for printing and attaching to their package.

Design Systems

Easyship Mobile App UI Kit

Conclusion

This mobile shipping label purchase project proved a valuable learning experience, solidifying my understanding of mobile app functionality and user flow optimisation. By adapting the existing flow from the desktop dashboard to a mobile-first mindset, we facilitated a smoother and more intuitive experience for users on the go.

Thanks to the effective communication and a seamless material handover with the external agency, the new version launched flawlessly in Q4 2023. This successful collaboration was key to delivering a product that met user needs and exceeded expectations.