Customer List Import on Shopify Platform

Project type

End-to-end product design project for Shopify Core Platform

My role

Project Champion

Product Designer

Target users

1 million + Shopify Merchants

Contribution

User research

Stakeholder interview

Project management

High-fidelity prototype

Outcome

Rolled out 100% globally 🎉

Decreased number of CSV import support tickets

Duration

5 weeks

(April 2020 - May 2020)

BACKGROUND

Overview

When merchants want to go from offline to online, or switch from another platform, they’ll need to import a list of customer accounts. And currently the only way to do it within Shopify admin is to upload a CSV file.

However, the current customer list import feature has been in maintenance mode for several years and cannot meet the increasing demand of our merchants, especially during the time of covid-19, since more and more merchants are switching from brick-and-mortar to online stores. There are some merchant frustrations documented for the current importing experience, such as no visibility on the uploading process.

Role

As the primary designer on Shopify Customers Run team, I championed particularly high support-impact issue related to the customer list import merchant experience. I closely collaborated with developers and product support specialists, and confirmed buy-in from higher stakeholders to ensure an intuitive, accurate and cohesive importing experience, as well as keep the importing experience consistent across the platform (e.g. Product and Inventory also enable CSV importing)

DEFINING THE PROBLEM

Flow analysis

We started by deep diving into the current flow to import a customer list by CSV, and below is the end-to-end experience for customer list uploading.

Problems for merchants

Low transparency

Merchants don’t have visibility into the uploading process. The current uploading modal only shows a spinner when the customer data is being imported, but doesn’t give insight into the progress or how many rows are being uploaded.

Limited merchant control and low tolerance for errors

Merchants cannot cancel the job during the uploading process when they get stuck (e.g. when the file is too big) or upload the wrong file. Currently, the only way to cancel these items is to call customer support to file a ticket that cancels everything in the uploading process, which can be frustrating for merchants.

Extra steps for replacing the file

If merchants want to replace the CSV file, they need to delete it first and go back to the initial modal, select and add the new file to be uploaded. Whenever merchants click on the delete button (the trashcan icon), they will always be directed to the initial modal for adding the file. They cannot replace the file directly when the added file has errors or they simply want to upload another file.

Problems for business

Decrease in trust

Customer importing feature is very important for the merchants, especially for those who migrate from other e-commerce platform and retail stores. Any user friction due to lower transparency will lead to a decrease in trust for our platform, and low trust battery will cause a higher churn rate, which will impact the company revenue.

Goal

After doing a heuristic evaluation with team members and gathering context from Product Support Network (PSN) which keeps track of all merchant frustration based on their communication with the customer service. I listed all opportunity areas and proposed the possible design changes, and validated them with developers as Product Managers based on value proposition, business value and technical feasibility. Therefore, we further narrow down the problem scope:

How might we build a transparent and efficient experience for importing customer list for Shopify merchants?

SOLUTION

Design for more transparency

Design change 1: Add a progress bar with percentage to to indicate the current uploading status

Description

When the file starts being uploaded, a progress bar will indicate the uploading progress in the modal. Showing the percentage could provide more visibility for merchants.

Rationale

A progress bar is a common component for file importing and provides visibility into the uploading progress.

Design change 2: Add a critical banner on top of the customer session with explanation on errors

Description

When the importing modal is closed, a critical banner will appear on top of the page to indicate the uploading has failed.

Rationale

Merchants can dismiss the uploading modal at anytime. If the modal with critical banner is dismissed, merchants won't be able to see it anywhere on the page, which may confuse merchants on whether the customer CSV importing is successful or not.

Design for less interaction cost

Design change 3: Replace the delete button with replace button for added file

Description

Instead of deleting the added file and going back to the initial modal for adding a new file, merchants can replace the file directly by clicking on the Replace file button.

Rationale

Replacing the delete button with replace file button could eliminate the extra step for replacing the file. If the merchant doesn’t want to move on with importing the customer list, they can dismiss the modal.

CHALLENGE AND EXPLORATIONS

Question 1: Should we give merchants more control over the importing process? (i.e cancel/stop/resume the importing process)

When users start the importing process, they cannot do anything until the customer list import is done. As part of the ideation, we want to add extra layer for error prevention and enable users to cancel or stop the uploading job at anytime, and resume the stopped job later on if they want. The goal is to make the importing experience more forgivable and flexible. Here are some explorations:

Challenge

Question 2: Could we inform the merchants if their CSV is oversize before importing?

Currently the maximum size of CSV that could be successfully uploaded is 1 MB (see related documentation on Shopify Help Center). If the file is oversize and merchants still upload and import it, they will need to wait for the import failed to know their file actually exceeds the uploading limit. This process can be time-consuming and frustrating for merchants.

In order to help merchants save time and make the importing process more error-preventing,

I designed a flow to validate the oversize file when the file is added and before merchants hit "Import customers" button.

Narrowing down the scope

I worked side-by-side with the developer and checked if these proposed solutions are technically feasible. However, the validating process starts after users hit "Import customers", and when the file is added, the system can only detect if it is CSV file, so currently there is no better way to inform merchants of the oversize file from engineering perspective, but the engineering team is working on increasing the limit of the file size.

Also, the current engineering capability won't allow users to cancel the uploading process and delete the imported customers automatically. It can also add to extra cognitive load for merchants since there is already a cancel button which means "dismiss the modal".To stop/resume is within their bandwidth but it would cost a lot of engineering efforts, so I started asking myself:

"Does allowing merchant to stop and resume the importing process really solve their problems?"

And after revisiting the user goals and pain points, I found it make little sense to issues like import timeout, and cannot prevent importing errors. According to data report, over 90% of the CSV import takes less than 5 seconds, so the value proposition for merchants is limited. All things considered, we decided not to introduce cancel/stop/resume feature at this point, and put this task in the icebox.

IMPACT

Platform consistency

In Shopify admin, merchants can also import product information as well as inventory items by uploading CSV files. In order to keep the importing experience consistent throughout the platform, we worked closely with Product team and Inventory team and critiqued the design together until we were fully aligned. As a result, both teams applied the same interaction flow and user interface solutions for CSV import.

Results and metrics