Shop Studio Live

A Shopify app that allows merchants to overlay a live stream video, live chat, and featured products directly on their online store.

PROJECT TYPE
Passion Project
TIMELINE
2021-2022
MY ROLE
UX, UI & User Research
CONTRIBUTORS
Andrea Lin – Interaction Designer
PROJECT STATUS
Ceased as of June 2022

Supercharge online store sales with live shopping

Challenge

E-commerce merchants are consistently trying to enhance conversion rates for their e-commerce businesses to increase their revenues and generate more profits. Merchants often feel helpless - have no active control in online selling compared to in-person.

Solution

Shop Studio Live is a former Shopify dedicated app which allows Shopify merchants to overlay a live shopping experience within their online store. This allows them to connect directly with their audience, feature products live, and generate more revenue.

What is Live Shopping?

Think of the Home Shopping Network or the Shopping Channel for us Canadians, but swap out TVs for mobile devices. The core idea is that brands feature their products via a livestream in order to engage with their audience. If you’ve ever purchased anything on Instagram Live or Amazon Live, it’s the same principle. 

Shop Studio Live was created to provide this functionality to Shopify online stores. Merchants could download our app, and within minutes were able to host online shopping experiences via a livestream. 

My Role

I joined the Shop Studio Live team a few months after its initial launch and took over as its sole product designer. I was responsible for recommending and designing new features, auditing my predecessor’s work, and conducting research to identify opportunities for improvement.

Through a combination of the above, I helped improve both the merchant and shopper experience.

Design & Dev Constraints

Shop Studio Live was almost designed entirely using Polaris, Shopify’s primary design system for merchant apps. Due to this, Shop Studio Live’s UI had not changed in the time that I was involved with this project.

We also only had one full-time developer for the duration of this project, so although I helped design more features, many of them never came to fruition.

Redesigning the Control Room 

Our earlier iterations of Shop Studio Live required that merchants install a third party app before they could stream online. This was communicated to merchants during the standard event flow. User testing showed that this was a major drop-off point for many new users due to how technical this step was.

The primary roadblock was that users were instructed to download and learn a third party app on their mobile device before they could proceed. We learned that many users gave up in frustration. 

For our solution, we eventually moved away from requiring users to download a third party app, and simplified the experience overall. Users now only needed to scan a QR code and validate it with a pin before they could begin streaming. 

Expanded product descriptions for shoppers

We created Shop Studio Live to be used by merchants to connect with their customers, so naturally we wanted to create a great experience for the latter too. 

Initially, shoppers could browse through a list of products on the Shop Studio Live app, but had to navigate away from the livestream to a separate product page to view more information about a specific item. 

To keep more shoppers engaged with the livestream, I created an expanded product description for shoppers. Customers could now see the different sizes, colours, and other variants of an item, all while allowing them to remain engaged with the merchant.

Expanded product descriptions for shoppers

We created Shop Studio Live to be used by merchants to connect with their customers, so naturally we wanted to create a great experience for the latter too. 

Initially, shoppers could browse through a list of products on the Shop Studio Live app, but had to navigate away from the livestream to a separate product page to view more information about a specific item. 

To keep more shoppers engaged with the livestream, I created an expanded product description for shoppers. Customers could now see the different sizes, colours, and other variants of an item, all while allowing them to remain engaged with the merchant.

Download livestream videos

When a merchant completes a livestream, they have access to a report that details the livestream’s performance in terms of engagement and conversions. Merchants eventually told us that they’d like the option to download their livestream videos. I therefore designed this function into the report as shown. 

Our customers then asked us if they could repurpose their past livestream videos on their online store. My product team liked the idea and I began designing wireframes for how this might look like. Sadly, this was one of the features we couldn’t build as the decision to cease operations came shortly thereafter.

Takeaways

Working on Shop Studio Live taught me many invaluable lessons. Here are only a few of them.

Develop our own design system

Shop Studio Live’s look and feel was almost entirely made using Polaris components, Shopify’s own design system. I eventually learned that there was no compelling reason to go this route and the decision to go with Polaris was somewhat arbitrary. Given the opportunity, I would have created a whole new system system in order to give Shop Studio Live a more branded look. 

Feedback doesn’t always need to come from customers

One of our constant struggles with this project is the lack of feedback we received from customers. Part of the reason is because we had a very small customer base to begin with. In retrospect, I would have done more user testing and find participants through online testing sites like maze.com

How to work with limited dev resources

As there were only 1-2 full-time dev working on Shop Studio Live at any given time, I had to pick up my battles carefully as a designer. This project gave me a good sense of the amount of time engineers need to build features that designers may take for granted.

Perform a UX audit as soon as possible

When I first joined the Shop Studio Live team, I was immediately assigned to work on features that the previous designer had started. This kept me busy and I did not have the time for a proper UX audit. Knowing what I know now, I would have immediately advocated for some evaluative research off the bat.