top of page
mobile hero.png

How I created the end-to-end experience of Shoppable Instagram Simulcast

Navigating the technical complexities of Meta APIs to create a unique feature integration and boost profitability distinguishing TalkShopLive in the live commerce space.

Role

Lead experience and visual designer

Team

Product managers, Video Producers, Engineering team, Executives

Tools

Figma, FigJam, Slack

Duration

Q2 2024

What is TalkShopLive?

A social-selling and video commerce platform enabling users to sell products through live streaming.

Who are the people involved?

Sellers

  • Influencers and celebrities

  • Small, mid and large-scale businesses wanting to sell their products 

Viewer/Buyers

  • Influencer and celebrity followers

  • Online shoppers

Opportunity

Standing out in the live commerce space

Sellers on TSL wanted to leverage Instagram (IG), where their primary audience resides, to create a shoppable live experience directly on Instagram rather than redirecting users to TSL. Our goal was to provide a seamless way for sellers to broadcast TSL shows on multiple platforms including Instagram and make Instagram shows shoppable.

The key challenges

Navigate the technical complexities to provide a seamless self-serve experience

Simulcasting to Instagram was relatively straightforward, but integrating shoppability was complex. Existing solutions allowed for simulcasting, but they did not support direct shoppability on Instagram Live

Manual setup

To make IG Live shoppable, sellers had to manually select live events and modify URLs, requiring developer intervention, which was time-consuming and not scalable.

Diverse user needs

Some users wanted to simulcast live shows through TSL, while others preferred going live directly on IG app and only needed TSL for the shoppable feature.

Event selection

Sellers could create multiple live events, but due to Meta API limitations, they had to manually select which event should be shoppable, as there was no automatic recognition of active live streams.

Lack of a unified interface

There was no user-friendly interface allowing sellers to connect IG accounts, choose their broadcast method, or select live events to make shoppable, which added to the complexity of the setup process.

Complex account connections

Connecting an IG account to TSL required linking an IG Business account via a Facebook Business Page, with multiple permissions needed from both Facebook and Instagram. This process was complex and needed clear guidance for users.

The solution

Simplifying the complex

Coming to a design solution is often a bumpy ride and this was one of the bumpiest!

I created user journeys starting with happy path journeys after which I moved on to the other journeys of unhappy paths. I designed a user-centered, step-by-step guided experience to make the setup and execution of shoppable Instagram Live as intuitive as possible.

Step 1

Show setup

- Connect an IG account via a Facebook account
- Choose a broadcast method: 

  • Use a desktop device for simulcast and live shopping.

  • Use the IG App for live streaming while TSL adds shoppability.​

Userflow -Show Setup

Step 2

Pre-Live Preparation

Based on the chosen broadcast method, give users different input forms:

  • If Simulcasting, enter RTMP URL/Key of the IG event and select the event.

  • If using IG App, directly select the IG event.

Userflow - Studio: Preparing to go live
Userflow - Studio: Preparing to go live

Step 3

Live state

Remind users to start IG Live after initiating simulcast on TSL.

Userflow - Studio: Go Live

The design

Using TSL’s design system, I created tailored UI components to guide users through each step.

Step 1: Connect IG account

UI - Modal: Connect to Facebook
UI - Modal: Instagram connection to Facebook

Clear, step-by-step guidance was provided for connecting IG via Facebook.

The flow was designed to be intuitive, so even if users skipped instructions, they could easily connect their accounts using their known Facebook and Instagram credentials.

Note: Ideally, the 2nd and 3rd steps would be combined to allow users to directly see a list of Facebook pages and their connected IG accounts once logged in. However, due to the limitations of the API response, we can initially only verify if an IG account is connected to a Facebook page, without immediately displaying the accounts.

The 'Resync' button serves 2 purposes:

1. Not having to refresh the TSL page in case the user is notified of some missing permissions and then decides to update it on Meta while in the connection flow, it prevents the user from starting the whole flow of connection again thus saving time and user efforts.

2. The button was first called 'Refresh'. When permissions are missing, the user is shown a message to grant the required permissions to TSL and then click the 'Refresh' button. 

To avoid the confusion between browser refresh and flow refresh, I renamed the button as 'Resync'.

UI - Modal: Instagram Facebook connection
UI - Modal: Connect to Instagram popup

Step 2: User interacts with the TSL Studio* and enter RTMP Stream URL/Key and select Live media OR select Live media only
*Stay tuned for TSL Studio case study designed solely by me, a completely refreshed and reimagined way to Go Live while eliminating all the previous UX issues.

Based on the Go live method selected during IG connection stage, each IG account is given the respective forms to make their IG Live shoppable and ready to go before going live

UI - Studio Instagram setup

Step 3: Remind users to go Live on IG after clicking 'Start Show' on TSL Studio

Double confirmation to let users know to start their IG Live too or else they would miss out on the Simulcast or Live shopping experience.

Ideally this should be automatic but due to Meta policies, a person has to go Live on the simulcasted platform along with going live on IG.

UI: Flow for going live on Instagram after clicking 'Start show'

Designing for various edge cases/ unhappy paths

Designing error states and feedback loops to ensure users were always informed, reducing frustration and enhancing trust.

Error state: Minimum requirements not met for Instagram account
UI - Error state: No Instagram account connected
UI - Error state: Permission missing for Instagram account

The impact

Successfully shipped by the end of Q2 2024.

30+

Instagram Shoppable Simulcasts created

2

Deals secured with major publishers, drawn by the enhanced functionality.

15%

Increase in total product purchases after shoppable IG Lives

10%

Revenue growth attributed to the new feature.

Media coverage

Want to know more?

86148c92b48efd35-sticker.png

Like what you see? Let's connect

Get in touch to collaborate or just to say hi! 👋

📍 San Francisco, California, United States

bottom of page