Before diving into the details, let's first cover some essential context around my first internship at Shopify.
I was on the draft orders team
My product team was focused on the part of the Shopify admin called draft orders. A draft order allows a merchant to create an order with a non-binding payment agreement, to send to their customers in the form of an invoice. Once a draft order has been paid for, it's converted to a regular order. In Shopify, draft orders account for 6% of all GMV (sales by our merchants) and B2B businesses account for almost half of draft order usage in the platform.
A Draft order in the Shopify admin
I joined Shopify when our merchants needed us the most
When I started my internship on the draft orders team in April 2020, it was around the same time that WHO declared a pandemic. This forced many business to shift online and mean't we had to start solving new problems at Shopify to help power our merchants during challenging times.
I worked on two main projects during my internship:
- I shipped a mobile feature – where I had the opportunity to provide value to merchants fast. Ever since release, this feature has been widely used in Africa, the Middle East and Europe, with over $2M USD in payment flowing through it per month.
- I shaped a future vision of draft orders by setting a north star product and UX experience.
The first project – I shipped a mobile feature with a big impact
A draft order generates an invoice, which merchants can send to their customer's e-mail address. This e-mail redirects customers to checkout, to pay for the items on the draft order. Today, invoices sent to buyers are restricted to email only. For merchants and customers who do most of their communications and commerce through SMS or social chat, this can be limiting. This project aims to provide functionality on mobile, so that merchants can share this invoice link in any communication channel.
She [the merchant] does a lot of business on social media and it would be much easier and faster if she can send invoices directly to the conversations that she is having with her customers already, instead of needing them to check their emails for the invoice.
Current flow for merchants sending an invoice to a customer
In other regions across the world, commerce looks very different. We knew this problem reasonated heavily with merchants in Africa, because of the way they run their business. For example, in Africa, commerce can be described like this:
- Mobile: E-commerce in Africa is largely mobile. In fact, 80% of internet consumption in Africa is mobile.
- Conversational: Commerce in Africa is largely conversational as buyers need an extra layer of trust.
- Multi-channel: Top sales are through social media apps.
For merchants who primarily conduct business through social media apps and rely heavily on direct communication to make a sale, solving this problem would be of great benefit. A solution to this problem, would mean that merchants could retain communication and make a sale in one channel, rather than deferring customers to their email to pay for a draft order – ultimately providing a better customer experience.
Ideal flow for merchants sending an invoice to their customer
I explored how other apps, such as PayPal, Instagram and Spotify allow users to share links across other channels. I also considered how links are shared already from Shopify. In conclusion, I learned that Shopify and the majority of these applications made use of the mobile OS share modal and rarely designed their own components for sharing a link.
Ideal flow for merchants sending an invoice to their customer
Two main approaches
I explored many approaches, but focused in on two approaches to solving this problem. Based on the competitve analysis, it was a common pattern to present the OS modal to share the link. Not only was this a more common flow, but using the OS share modal component would make implemntation faster, so that developers wouldn't need to create a custom modal. The next question was where would merchants carry out this action?:
- Facilitate the ability to share the link in the invoice card on the draft order page
- Include a button to share the link in the draft order page overflow menu
The two main approaches I considered
A simple solution
I landed on the second approach for the design solution – adding the action to share the checkout link to the overflow menu on the draft order page:
Final solution – option in the draft order page overflow menu
I was confident in this approach, because:
- The share checkout link is an attribute belonging to the entire draft order and therefore should live at the page level
- The action in the overflow menu is consistent with how links for other objects are shared in Shopify (e.g. Product link or Discount link)
- It was the least disruptive, since it didn't clutter the mobile UI with more primary buttons on page
This feature isn't a big deal
It doesn't seem like much, huh. The solution to this problem was simply adding an option to the overflow menu that faciliate the ability to share the link. While I was aware that merchants would be thrilled with this functionality, I was not aware of the impact that such a small feature would have. This feature gained a lot of usage and here are some numbers to speak to its impact over just one month:
in payment captured through the checkout link
shops from around the world used the checkout link
draft orders used the checkout link
Don't underestimate the impact of a simple solution
Just because your design solution might seem simple, don't underestimate its ability to make a big impact. My solution was to add an option to an overflow menu, but it solved the problem merchants were facing and as a result was able to make a big difference in the way merchants conduct their business.
Edge cases are worth solving for
While this solution was primarily addressing a problem faced by merchants in Africa, its also a useful feature for merchants anywhere in the world conducting sales over SMS or social media. Edge cases aren't always the outliers and can still be meaningful to solve for, making a big impact.
Feature live today in Shopify (2021)
The second project – Setting a North Star product experience for draft orders
The draft orders team was established 4 months prior to my internship, meaning that this space in the product was left untouched and would benefit from a future vision exploration. I spent a portion of my internship exploring what an ideal product experience might look like for draft orders from a UX standpoint with a senior designer.
Project cover in Figma
The designs for this project are confidential. Please reach out to see more
. However, here's a recap of how I established a north star:
- Completed a user journey workshop to understand how merchants use draft orders and identified any pain points in the experience
- Conducted user research to identify product areas for improvements and assigned priority to problems based on merchant feedback
- Re-designed the information architecture of the draft orders page
- Improvements to draft order creation through a re-designed layout of a draft order page and UI components changes (e.g. cards, modals, popovers)
- Contributed to the design of a new feature allowing merchants to set and track payment terms
- Conducted a usability test with an internal merchant for payment terms
User journey of a merchant who uses draft orders
In the end, the north star explorations were summarized in a slideshow and interactive prototype, to be shared with stakeholders and other project teams. The draft orders team is currently building out new feature sets for merchants, using the north star as a foundation moving forward.
Keeping product debt-free
As a result of draft orders being somewhat neglected, up until the team was formed at the end of 2019, it fell behind in its value. It struggled to keep up with the evolving needs of our merchants and integrate properly with other aspects of the Shopify admin. The north star project did not cover all of the bases in terms of improving the experience, however it enforced the idea that it's important to keep all aspects of a platform up-to-date.