Shop Studio Live
PROJECT TYPE
Virtual Live Shopping App
PROJECT DURATION
2021-2022 (Sunsetted)
ROLE
Product Designer / User Research
TOOLS
Figma / Maze.co
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 Virtual 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 & Design Constraints
The Shop Studio Live team consisted of 6 people which included a product owner, project manager, marketing coordinator, 2 developers, and myself the product designer.

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 quantitative (via Maze.co) to identify opportunities for improvement.

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.
Shop Studio Live's dashboard built using Polaris, Shopify's design system (circa 2022)

Design Features

Working closely with the Shop Studio Live team through a series of design sprints, I took the lead in designing the following features.

Improving the Event Creation Flow for Shopify Merchants
Before Shopify merchants were able to host live events on their online store, they needed to create their event first. This was handled by our Create Event flow. Earlier iterations of this flow were clunky, had large amounts of unhelpful text, and high rates of user drop-off.

After conducting quantitative testing to identify weaknesses in the previous flow, I was able to build the newer iteration, shown below, which provided a more streamlined experience.
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.
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
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.
Develop our own design system

Shop Studio Live’s look and feel was almost entirely made using Polaris components, Shopify’s own design system. 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.