A process for solving workflow design problems
How the re-design of the store ownership transfer workflow focused on immediate user value, and still scales gracefully.
There are more than 300 Shopify store ownership transfers every day. Despite it being a common workflow within our product, the feature proved difficult for merchants to find, and the process was unclear. Last year, my team worked on improving the store ownership transfer experience.
In this case study, I’m going to share how, over a month of UX work, I explored what the ideal solution to a problem looks like, and how I planned out the steps to get there. This helped me identify the most important thing that brings immediate value to users, while also designing for scalability.
What is a store ownership transfer?
Store ownership transfer, as its name suggests, allows the current owner to transfer store ownership to a new owner typically for the following reasons:
- They are no longer the primary store owner. They often transfer ownership to a trusted person like a business partner or a spouse.
- They need to give someone else access to store owner level permissions because only store owners can view bills, manage staff, etc.
- They lost access to their old email.
- They sold their business to someone else.
The existing 7-step process was time-consuming and counter-intuitive. The current store owner had to add the new owner as a store staff member before being able to send them an invitation to become the new owner.
More importantly, the feature was difficult to find. This led to some users assuming that changing their email address would also transfer the store ownership. Our team (a product designer, a content designer, a backend engineer, and a project manager) were on a mission to fix this, and I’d like to share how we did it.
The process
1. Understand the problem
I started by gaining context on the problem space by researching reasons for store transfers, reading through merchant frustrations collected by our support team, and reaching out to different teams. It became clear that by improving the merchant experience, we’d be able to:
- Save merchants time by making the feature discoverable and the workflow efficient.
- Surface important information for the new store owner so they can update inherited business and payments details if needed.
- Reduce support debt and prevent wrongful store owners from deleting invites to rightful store owners.
According to our data, of the 300 daily user-initiated transfers, one-third are to people who did not have previous access to the store, while two-thirds are to staff members. That suggested we should prioritize optimizing the existing staff member invite flow.
2. Explore and ideate
I was fairly new to Shopify when I started this project, so I familiarized myself with the existing workflow and other touchpoints in the admin. I mapped them all out and identified pain points relating to the context I gathered. My early explorations focused on high-level flows and identifying pieces of information that I could group into logical steps as seen below:
It’s important to think beyond the constraints of your design system (Polaris for Shopify), so I looked at invite flows out in the wild to steal great ideas from. I’ve observed that using autocomplete with the ability to type a new entry is quite common as it allows faster search and an easy way to invite a new email when no match is found. I explored using this component to support the majority (two-thirds) of store transfers.
3. Share early and often
After extensive exploration, I picked two to three of my most compelling ideas and created medium-fidelity wireframes to share and get feedback on them from the rest of my team. I like sharing early because this gives me a chance to share my thinking process, invalidate false assumptions, and start conversations with my team. Below is a remnant of my first pass:
Throughout the process, I regularly checked in with the team, worked closely with our content designer, and shared concepts during weekly UX reviews so I could trash meh ideas and further refine and prioritize promising ones.
I also started getting a sense of what is feasible given our short timeline and limited resources. We knew we definitely wanted an autocomplete component to make searching easier, but because our developer didn’t have expertise in React, we considered this out of scope. I had to consider an alternative solution that could gracefully scale once we have the resources for v1—but would still work in case v1 never gets built. It’s a balancing act.
I had to consider an alternate solution that can gracefully scale once we have the resources for v1—but would still work in case v1 never gets built. It’s a balancing act.
4. Iterate
The reviews resulted in content and hierarchy variations. A few of the highlights are:
Transfer store ownership action. We moved the Transfer ownership action to the Store owner section, instead of burying it in the staff account page, where it’s more visible and accessible.
The first version presented excessive information upfront and drew too much attention. This approach would’ve only made sense if the primary task in the User and Permissions page is transferring store ownership.
Meanwhile, the second version supports discoverability and progressively discloses information to those who intentionally perform the action. It’s also more consistent with our design system’s card pattern.
Transfer store ownership modal. The first version explores toggling between inviting an existing staff, or someone who did not have previous access to the store. We found it tricky to differentiate between the meaning of the two in the user interface (UI). We soon ditched this approach since we don’t want to place the burden of remembering whether it’s an email of existing staff or not on the user.
The second version explores a multi-step form for more digestible content, but places a similar burden on the user (send an invite to a new email instead). While it aims to guide the user step-by-step, it further complicates the interface because of the unnecessary breakdown. Autocomplete was out of scope, which made this solution even weaker, and, let’s admit it, the form looks like a sandwich.
Finally, we went with the third approach, which groups content better and also supports scalability once autocomplete is possible (see v1). One of the challenges here is communicating the most critical implications of a store transfer while keeping it clear and concise.
But what about testing?
Since this was considered a quick and timeboxed project (we had one month), we weren’t able to conduct formal user testing. However, this didn’t stop us from shipping a high-confidence solution through rounds of UX reviews and feedback gathering. We already forecasted that the improvement will have minimal risk and this was proven after we launched the changes (I’ll explain more about the impact later).
The MVP solution
The MVP is an alternate solution that will gracefully scale once we support autocomplete for v1. The MVP reduced the workflow from seven steps to four.
When initiating a transfer, the current owner can now send a store ownership invite to anyone (staff or not), removing the need to add a user as a staff member before sending them a transfer email invite.
We made the Transfer ownership button discoverable by placing it in the store owner section where it’s more visible and accessible.
The link opens up a modal that explains what the action entails and a form asking for the new owner’s details. (We only ask for information that is absolutely necessary.) After submitting, we show an In Progress status and an ability to cancel the transfer.
For the user accepting the transfer, they will receive an invite email that leads them to a landing page describing the new permissions. (If the user has an existing Shopify account, they’d only need to accept the invite. For new users, however, they have to create an account to accept the transfer.)
After accepting, the user is redirected to the settings page where a success banner is shown. We’re using this as an opportunity to encourage the new owner to review and update their general, billing, and payment information if needed. Forgetting to update the previous owner’s information may lead to serious billing and tax issues.
As our team developer didn’t have expertise in React, we were constrained to using Rails components. Without this limitation, we’d be able to support autocomplete and show personalized content. The ideal solution (v1) below explores how this might look like.
Thinking long term
In v1, the user would be able to quickly search for an existing staff with a better and personalized experience when accepting the store ownership invite.
So, how would that work?
For the user initiating the transfer, we’re adding an autocomplete functionality to easily search for an existing staff member. This makes a lot of sense because two-thirds of daily transfers are to existing staff. If no match is found, they can simply continue typing a new email.
For the user accepting the transfer, we can explore a landing page where the new store owner is required to review and confirm billing, and payment information to avoid tax and billing issues.
After confirmation, we can customize the banner content depending on the new owner’s information. Someone new to running a business might care more about how they can use Shopify. We may also consider directing them to the homepage, instead of the settings page, which is a more sensible place to start the admin work.
The impact so far
We worked on this in February 2020, and it shipped in May 2020. Within 3 months of launching our MVP version, we started to see signals of positive impact.
- We’ve received fewer support calls since we shipped the improved workflow. This indicates that we solved some of the problems around discoverability and clarity. 🎉
- The Shopify Plus team adopted the same pattern for users transferring a Plus store.
- I moved to a different team after the project and, since then, the team who owns this area made improvements on the content.
What I learned
- Design for the ideal solution and worry about limitations later. Don’t limit your thinking based on technical constraints. It’s good practice to explore what the best experience could’ve been, use that as a conversation starter with your team, and only then decide and compromise if needed.
- Document your work. Create a document at the end of the project outlining useful context and links, decision logs, explorations, and next steps. Who knows, a team may pick up the project again, or find value from your research and explorations.
- Reach out to other teams. This is especially important when you’re new to the company, or have very little domain knowledge. Connect with colleagues and experts to get you up to speed. You might even discover opportunities to help them through your project.
✨ Woah, you made it all the way here. Thanks for reading! Huge shoutout to my team (Gillian, Derek, and Yang) who worked on this project. ✨
