A Shopify app that allows merchants to overlay a live stream video, live chat, and featured products directly on their online store.
.png)
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.
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.
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.
%20(1).png)
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.
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.
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 above, which provided a more streamlined experience.
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.
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.
.png)
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.
Working on Shop Studio Live taught me many invaluable lessons. Here are only a few of them.
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.
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
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.
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.
