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.
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.
- 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.
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
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
- Quick navigation between fundings
- Less layers and friction to seeing data
- 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
- Surfaces details without leaving page
- Allows for cross referencing
- Less friction in merchant workflow
- 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
- Surfacing large amounts of deeper details
- Utilizes current and existing patterns
- Consistent interaction expectation
- Cannot cross-reference data > adds friction to understanding of return and funding relationship
- Doesn’t solve large index problem
Explore #4: Funding Dropdown
- Very easy implementation
- Less jarring change for merchants from current implementation of transaction page
- 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
- Lets merchants stay on one page to view their fundings
- Partial state layout doesn’t optimize for space
Explore #6: Buckets
- Approachable for merchants to understand multiple fundings
- Presented in visual, understandable buckets
- Individual funding progresses at a glanceable view
- Partial state could potentially feel empty
- Existing merchants may be surprised by the change of layout
Explore #7: Bucket List Timeline
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!):