Disclaimer: These thoughts are my own and do not necessarily represent those of Shopify. This project was taken on during the Fall of 2016.

What is Shopify Capital?

Shopify Capital offers funding for merchants so they can get a head start on inventory, marketing, or anything else for their business needs. These cash advances are given as a lump sum, and as the merchant makes sales, they’ll remit to Shopify a fixed percentage of their daily sales until Shopify receives the total amount of receivables purchased. This means that if the merchant doesn’t make a sale that day, they don’t have to pay Shopify.

My Role

This project was picked up after some core problems were defined and early explorations were made. I became the lead designer on this project, with consultation from other designers and content strategists.

The Task

  • Define UX painpoints in the Capital dashboard with a focus on users with multiple fundings.
  • Explore potential solutions while being consistent with the Shopify brand, using existing patterns and components.

Shopify Capital original dashboard

This was the original Shopify Capital dashboard. There were a few problems:

  • Previous fundings are hidden behind a tooltip, thus making it difficult to parse multiple fundings at a glance
  • A sense of completion or accomplishment was lacking on a per funding level
  • With multiple fundings, it’s difficult for merchants to make a relationship between fundings and the returns that belong to them
  • Merchants cannot see: percentage of completion within funding, percentage of completion within all fundings
  • Fine for one funding, not great for multiple fundings. Around 80% of Capital merchants have multiple fundings

Exploration

After a some initial explorations on different approaches to take (see below), it was decided to narrow down the approach to Explore #6: buckets for each type of funding. One bucket for Active fundings, one for completed fundings, and a third for pending/future fundings.

Explore #1: Tabs

Shopify Capital original dashboard Pros

  • Quick navigation between fundings
  • Less layers and friction to seeing data

Cons

  • No overview of each funding’s history
  • Not great for gaining pulse into overview of all fundings. False sense of accomplishment
  • Does not scale well beyond a certain number of fundings
  • On mobile, switching tabs, merchant could miss relationship change in top bar

Explore #2: Sheets

Shopify Capital original dashboard

Pros

  • Surfaces details without leaving page
  • Allows for cross referencing
  • Less friction in merchant workflow

Cons

  • Could be surprising to merchants. They’re used to other drill-down interactions in the admin
  • Doesn’t solve large index problem

Explore #3: Drill-Down

Shopify Capital original dashboard

Pros

  • Surfacing large amounts of deeper details
  • Utilizes current and existing patterns
  • Consistent interaction expectation

Cons

  • Cannot cross-reference data > adds friction to understanding of return and funding relationship
  • Doesn’t solve large index problem

Explore #4: Funding Dropdown

Shopify Capital original dashboard

Pros

  • Very easy implementation
  • Less jarring change for merchants from current implementation of transaction page

Cons

  • Not as much of a visual experience as other “bucket approaches"
  • Not great for gaining insight into an overview of all fundings. Could result in a false sense of accomplishment

Explore #5: Bucket Navigation Tabs

Shopify Capital original dashboard

Pros

  • Lets merchants stay on one page to view their fundings

Cons

  • Partial state layout doesn’t optimize for space

Explore #6: Buckets

Shopify Capital original dashboard

Pros

  • Approachable for merchants to understand multiple fundings
  • Presented in visual, understandable buckets
  • Individual funding progresses at a glanceable view

Cons

  • Partial state could potentially feel empty
  • Existing merchants may be surprised by the change of layout

Explore #7: Bucket List Timeline

Shopify Capital original dashboard

Pro: Works well on mobile
Con: Could be expensive to build

The Proposed Solution

After the initial exploration, I went to higher fidelity and explored potential designs to establish layout and visual hierarchy. Throughout this process, I touched base with the PM, other designers for feedback, and content strategists to keep the copy consistent, friendly, and understandable.

Here are some snapshots of the final proposed solution (please contact me if you’re interested in seeing more!):

Shopify Capital original dashboard Shopify Capital original dashboard Shopify Capital original dashboard