UX | UI | DEVELOPMENT

ShopFrontPro

Helping businesses grow beyond their online store.

Overview

I joined the ShopFrontPro team as a UX Designer with the aim of redesigning the experience of setting up and managing an online store for small to medium businesses. Over the years ShopFrontPro had accumulated a lot of features with little thought being placed on how they integrated with the product. This resulted in a product that was rich with features but confusing and difficult to use creating friction with customers.

Having conducted a workshop exploring the pain points and successes of SFP I identified 3 goals that would help improve ShopFrontPro for its customers:

  • Make things easier to find by redefining the information architecture
  • Help customers setup their store and start selling within 30 days
  • Create a design system that evolves as the product evolves

Making It Easy To Setup

A key issue I'd discovered was many customers felt that setting up an online store was a long, complicated process. This resulted in many leaving their stores incomplete. This insight led me to define the critical path required to setup your online store.

Working with the Product Designer I outlined a 30 day course that guided them through this critical path. The course was segmented into daily tasks with clear indicators of their progress.

This spawned the idea of SFP Academy where we would offer a variety of paid and free online courses based on topics related to running their business online. To start we would cover topics most important to our customers through a questionnaire we would send out each month.

An example of the course breakdown.

An early example of SFP Academy. Our hope was to feature many paid and free course, in video, audio or text, that would guide our customers throughout the lifecycle of their business.

Clarity & Coherence

My research had shown that customers were often lost and frequently asked for help to find features that should have been obvious. For example closing the store was found inside of Settings amongst setting your default weight, currency format and method of calculating tax, which didn't make sense at all. There were no clear headings separating or grouping these settings and the language used to describe them was confusing.

I approached the task of rearranging these sections and their features by asking How does this section contribute to the product as a whole? Can it be made clearer what this feature is and how it relates to the store? Can it be combined with another section?

This helped me outlined the primary sections (dashboard, products, orders, users) these being areas customers would visit frequently, the secondary sections (design, content, marketing) being areas that wouldn't be frequented as often, and the tertiary sections which our customers would access during the initial setup of their store or on an as-needed basis. I then looked at all the settings and features in each, categorising which section they fell into.

While this process took a lot of time it meant I was able create a list of every feature in ShopFrontPro, remove the ones that didn't make sense and map out a model for the addition of features and settings in the future.

An example of the PayPal Setup page.

PayPal Setup

Inspired by Slack and their simple step-by-step approach to integration setup, I employed a similar approach for our own integrations. For example our PayPal setup guides you with everything you need to do starting from creating an account, what pages to go to, and what to click. The goal was to avoid any need for explaining technical terms and just get the user to click the right link or button. As a fallback these instructions could be used by anyone internally to complete the setup for the customer.

The setup of your shipping rates could be as simple or as precise as you needed it to be.

Shipping Setup

Shipping was another aspect users struggled to setup. We developed three different ways keeping the most common setups at the top of the page leading to more advanced ones below.