Designing a Ninja Van Plugin for Shopify

From concept to a validated prototype in 2 weeks

Mockup of Ninja Van Plugin on the Shopify app store

Background

For many small and growing businesses, Shopify is currently one of the most popular e-commerce platforms available. As Ninja Van looks to expand its marketshare among small-medium sellers in the region, shippers on the Shopify platform seemed to be a natural target.

Traditionally, new shippers are on-boarded by our salespeople with a face-to-face process. However, for small-medium volume shippers, this model poses some issues:

  1. The time investment required for in-person interaction might not make sense for small volume sellers; and
  2. The face-to-face onboarding process is not easily scalable due to the manpower requirement

In order to reach these shippers, we needed to create a digital onboarding experience that is as frictionless as possible. Because we are targeting Shopify sellers, we decided that the easiest way to do that is to build a Ninja Van plugin that integrates directly with Shopify through its available APIs.

Approach Overview

1. Understand

  • User interviews with 9 Shopify sellers of various sizes
  • Affinity mapping
  • Generating Personas

2. Ideate

  • Defining an objective
  • Identifying opportunities
  • Coming up with potential solutions
  • Defining the MVP

3. Design

  • Wireframing
  • Prototyping
  • Usability Testing

Figuring out the Problem(s) to be Solved

Once the context of this project was clear, the first thing we needed to was to find out what problems shippers on Shopify are currently facing when it comes to shipping their products since we knew we wanted the plugin to address some of their biggest pain points. In total, we spoke to 9 different shippers of various sizes using an interview guide I prepared.

Excerpt of the interview guide we used

Through affinity mapping, we were able to identify a few key insights:

  • For shippers already using third party integrations, the main complaints center around customer support. When customers run into issues with their delivery, they tend to contact the merchant rather than the logistics providers directly. Because of this, sellers are forced to act as a middle-man between their customers and the logistics partner they used, since these delivery issues can only be resolved by the logistics provider.

  • For small-medium sellers, because they are often running a very lean team, time is of the essence. Each process should take as little time as possible so that they can work on the other tasks at hand too — this includes steps such as printing of shipping labels and keeping track of the parcels that have been sent out to customers.

  • Because shipping rates differ based on parcel sizes, many third party plugins on the market can only provide estimated costs for shipping upon checkout. This leads to extra work on the sellers’ end to coordinate the additional topup or refund of the shipping fee paid during checkout.
Shipper Customer Journey Map

Solving the problems we discovered

From the beginning, we knew we wanted to try something different for solutioning – because there are several stakeholders we needed buy-in from, we decided to run a design sprint to come up with a few viable solutions. If you are not familiar with what a design sprint is, it is basically an end-to-end product building exercise from goal setting to prototyping and user-testing condensed down into a few (intensive) days. What we wanted to get out of the exercise was:

  1. Alignment among the various stakeholders on what the final solution should look like
  2. A user-validated prototype which we can proceed to build, within a very short time frame
 
Design Sprint in progress

Objective:

We set out with the goal of becoming the default choice for sellers on Shopify shipping to customers in Southeast Asia.
 

By the end of the first day, we identified as a group a few key opportunities:

  1. Elimination of manual work
    The point of building a plugin in the first place (when we already have a web portal for creating shipments) was to reduce the amount of work required on our shippers’ part. What were some of the steps in shipment creation that can be automated? How can we make use of existing APIs to simply the process?

  1. Real-time availability of information
    How can we allow end customers to easily check on their deliveries? How can we help end-customers resolve delivery issues without having to go through sellers? How can we provide real-time shipping costs to prevent customers from having to pay for shipping separately?

  1. Flexibility of shipping options
    One of Ninja Van’s advantages is our extensive infrastructure in countries we are operating in. Other than regular delivery options, our customers can also choose to drop off or pick up parcels at their local convenience stores or nearby locker boxes. How do we provide that option to Shopify customers?

  1. Ease of obtaining support
    In order to add value for our shippers, we want to allow them to leverage our customer support when it comes to the delivery process. What happens when deliveries don’t go as planned? How can we assist customers without taking up our shippers’ time?

Ideation

Day 2 was all about coming up with potential solutions. Through some encouragement and coaxing, we managed to get participants to start with some warm up sketches. Some challenges in a traditional workshop like lack of participation were alleviated by the structure of the design sprint, which helps move the process along by having strict time limits and encouraging aggressive prioritization.

Some of the solution sketches we came up with

Designing the Solution

Our design sprint was condensed due to time restrictions and one of the challenges we faced was in deciding what the MVP should look like, taking into account the solutions produced by the participants. Whereas a traditional design sprint takes care of this with voting and prioritization exercises, in this case the product team had to make that decision based on the solution sketches.

The first thing I did was to create a basic user flow of how shippers will interact with our product.

From there, I mapped the solutions produced to the corresponding steps in the user flow. The purpose of this was to see if the solutions fit into our desired user flow, and to see if they conflicted with one another. Mapping the various solutions onto the user flow was also helpful in determining what was essential to the MVP and what are ‘nice to have’s which can be built at a later stage. I decided finally that the prototype should consist:

  1. A guided onboarding process
  2. A ‘quick order create’ in addition to manual order creation
  3. One-click printing of airway bills, including mass-printing for multiple orders

The Prototype

Dashboard

From the user interviews, we found that shippers found the following information most important to them:

  •     Whether they had any outstanding parcels to ship
  •     Whether they had any pickups scheduled

To save shippers time, I wanted to make this information easily accessible on the dashboard. In addition, I decided to also include actions the shippers will most often carry out on the dashboard. This includes:

  •     The ability the create new shipments
  •     The ability to track existing shipments

Guided Onboarding

For onboarding, I designed an overlay-style tutorial to teach shippers what information they need to enter manually and where the actions they commonly need are located.

Order Creation

While the majority of our Shopify shippers will leverage the ability to import their orders automatically, we wanted to also provide the flexibility of creating ad-hoc shipments for non-Shopify orders within the same interface.

For Shopify orders, customer details can automatically be imported, removing the need to enter them manually. The only thing shippers have to enter manually would be the estimated size of their parcel(s) so that we can arrange for the appropriate vehicle for pickup.

We also wanted to ensure that shippers still had the option of creating orders manually for non-Shopify orders, making the plugin a one-stop portal for all their orders.

Shipment Summary

As shown in the flows above, I decided to integrate the airway bill printing into the payment summary page in order to reduce the chances of shippers forgetting to do so before the the pickup. (Of course, the choice remains to print them separately if desired.)

Key Achievements

  • Prepared interview guide and carried out user interviews together with product manager
  • Led synthesis of research results and crafted the deliverables for presenting them
  • Planned and ran a 2-day design sprint for stakeholders involved
  • Designed and prototyped Ninja Van plugin based on Shopify’s design system

Key Challenges

  • Unfamiliarity of characters present in design sprint – in order to maximize likelihood of success in a design sprint, it helps to know the participants and anticipate their behavior prior to the sprint, and have strategies to deal with detraction
  • Failed to include a developer in the design sprint process, leading to insufficient buy-in from the engineering team, which led to some additional delays in implementation
Go back to Home page