2014-2017

Case Study

Screenshots of the Sales Channel work

Feature Product to Platform Product

How we evolved our developer ecosystem

Merchant growth is Shopify’s growth–they’re one and the same. As the team identified a shift in commerce we had to shift our merchants too, to keep them competitive. While consumers are still spending time at retail stores, their leisure time is split amongst a variety of online networks depending on their niche interests.

If a customer is looking for the perfect wedding dress, they've likely created a board on Pinterest. If they want to be inspired by new make-up colour combinations, they're likely clocking in some time on Instagram. Instead of one physical location, there are now hundreds and where they spend their time is where they spend their money.

At Shopify, these various places or ways of reaching an audience are called Sales Channels. Working closely with the VP of Product at Shopify (then PM), Satish Kanwar[1], I started designing the first products for multichannel Shopify in 2014 which eventually led to growing out the App Platform to include a larger category of applications.

Our goal was to get our merchants and their products to where their customers are and educate them on the new direction of commerce.

Note: Some of the screenshots contained in this case study were produced by me but some were produced by others on the Design team at Shopify.[2] I don't take credit for that work as my intent is to describe my role in the process as a Designer and later, a Design Lead.

In this case study

Experiments

Testing the idea

The first stage was experimental and we shipped fast. I iterated with our product team and Facebook to work on our ad product integration. We were beta testing with a group of 1000 of our merchants, simplifying the process of using Facebook ads with their Shopify products.

Facebook ad integration
Facebook ad integration

While hugely successful for a few of our testers, we weren't seeing the long-term success for the majority so we pivoted the product. In partnership with Facebook, we built out our next feature: Facebook Shop.[3]

Looking at the Facebook Business page, we identified areas in which merchants could showcase products. At the time commerce integration onto a Facebook business page didn’t exist. With this new sales channel, merchant products would automatically sync to Facebook and allow customers to check-out without leaving Facebook (in the US).

Facebook checkout
Facebook checkout

After Facebook was announced, we added more Sales Channels. Over a few months we quickly iterated on and launched Twitter (now deprecated) and Pinterest. Due to the uniqueness of all three products, we had a challenge: what we had done before likely wouldn’t work for the next partner. This meant I had to learn about each unique community while quickly iterating on features to see what would work.

I used the Facebook sales channel as a blueprint to build common patterns to use as a system across the sales channel applications. Two designers joined me at this time and I worked with them to ensure the product UI settings were uniform.

Pinterest was our second sales channel and it was the first plug-in and start sales channel. To amplify the Pinterest community’s pinning, “Buy” buttons appeared on pins displaying our merchants’ products–whether or not they were pinned by the merchant themselves.

Pinterest sales channel
Pinterest sales channel

On Pinterest’s side, with a large fashion base, consumers were given options of sizes, colours, materials, and patterns. In order for this to work within Shopify’s system, I worked with another designer to build a component to match our option tagging system to Pinterest’s pre-defined tags. After some testing, we launched the sales channel to our merchants, and to date, it’s one of the highest grossing sales channels in Gross Merchandise Volume (GMV is one of the key metrics for Shopify).

Twitter was next: the product was simple, with no additional set-up options in the Shopify admin aside from Account Connection. Like Pinterest, we searched the network for our merchants’ product URLs, displaying a Twitter Buy Now card every time their product was referenced. (This channel is no longer available.)

Facebook dashboard
Online store dashboard
Pinterest dashboard

As we launched new networks, we had to give our merchants a better understanding of the success of their sales channels. I worked on dashboards to help deliver basic metrics to our merchants about their sales.

Since sales channels were a new concept, using quantitative user research to test before launching likely wouldn’t have been successful. To help guide my work, I worked with our UX Researcher who ran qualitative interviews with our beta testers to gauge usage of our products. These insights helped inform our product direction as products were being built.

Year 1

Launching multichannel Shopify

As we worked on more partnerships, the Shopify admin was breaking due to the experimental nature of the products. We had to make some product changes to adjust to our new sales channels. From testing, we understood the dashboards weren’t delivering the value we had originally intended.

In the end, I collapsed the metrics into one area of the Shopify home screen mixing in online store metrics. This decision was not a big move for Shopify merchants, but also internally–we became more than an online store creator. We were the home for your entire business.

We did a series of qualitative and quantitative user tests to understand if our merchants were learning about the concept of sales channels in the admin. The move of the metrics to the Home screen was part of this, as were more clearly defined areas in the navigation.

Home and dashboards
Home and dashboards

The evolution of the home screen and dashboards over the years

As our team grew, I moved into leadership, and we welcomed back Ilia to the team as a second Design Lead. While his focus was on another area of product, we worked together to scale our design practice while shipping.

The designers focused on building more sales channels for our merchants: Buy Button, Amazon, Facebook Messenger, and our collection of SDKs. Though my focus shifted to leadership, I was working on the product strategy behind our SDKs. This work would pave the way for what is now called Custom Storefronts–which gives Shopify developers the ability to build more powerful stores.

This was the beginning of what would eventually lead us to building everything out as a platform

Custom Storefronts SDK screenshot of the landing page

This was the beginning of what would eventually lead us to building everything out as a platform

Balancing the roadmaps was key during this time and ensuring we were still shipping channels with a consistent pattern library was difficult due to the breakneck speed. Ilia and I defined processes to ensure designers were aligned to the other discipline teams and that everyone had the design resources they needed in order to build.

Year 2:

Building a platform

After we reached a count of nine sales channels, Shopify accepted our first beta partners: Houzz, Wanelo, and Ebates. I helped aid our internal team’s working relationship with those partners, doing the initial round of documentation of our patterns in a scrappy UI kit which was sent out to the beta partners. This helped us collect feedback to better understand how to best support our partners.

Working back and forth with the partners directly gave us more feedback to create a second iteration. All this work was later incorporated into our docs and we announced our Sales Channels SDKs to our partners for the first time in 2016 at our partner conference, Unite.[4]

Designing and building a series of features is one thing, but building a platform is quite another. Shopify has always been merchant-first but now they have another audience to consider: the developers working with the platform.

As the merchant base grows, Shopify seeks to offer them better ways to reach new markets which means ensuring the developer ecosystem is growing too. Making it easy for developers to work with company’s product is key to ensuring the success of a platform.

The next few months after Unite, we focused the team on building better tools for our developers to create sales channels for our merchants. This meant identifying system UX problems which had grown due to the scale of the product (and the nature of building a platform) as well as clarifying opportunities for the team of 60 to tackle.

For now, merchants can enjoy Shopify’s offering of 13+ sales channels, and Shpoify developers get to use the new APIs and SDKs to build for Shopify merchants.

Luke Reeves and I presenting the sales channels to our developers at Unite
The sales channels available to Shopify merchants and developers announced at Unite

Lessons and impact

Launching a product with no precedents in the market is hard and feature adoption is one of the best ways to prove success. The approach we took was quite scrappy although I wouldn’t have done it any other way. Not only did we have to change the mindset of our merchants, but we had to work on changing the mindset of our employees as well–it was a necessary disruption.

Percentage growth of GMV of the social channels applications have outpaced the traditional sales channels, such as point of sale and the online store. Nearly 60% of Shopify merchants have installed at least two sales channel applications since 2016.[5]

I hope to see Shopify evolve so it becomes easier for merchants to work within the complexity of future commerce. Commerce is the backbone of economy and it was exciting to be a part of it.

Note: Due to the sensitive nature of this content, a lot of details have been left out. The majority of my work in Year 2 of the launched product (working year 3) was roadmap and team planning so can't be talked about.


↩︎ [1] Creep Satish out on Twitter ↗︎.

↩︎ [2] More about the team can be found on Twitter read about here ↗︎.

↩︎ [3] We started our sales channels with the release of Facebook Shop, which you can read about here ↗︎. There are many other sales channels related announcements but the first one was a pretty big deal for us (at least for me!)

↩︎ [4] More information about Sales Channels and the SDKs can be found through the developer website ↗︎ or in-person at Shopify's yearly partner conference, Unite ↗︎.

↩︎ [5] You can read more about it in the press releases from 2015-2017 ↗︎.