
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.

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.


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

The design
Using TSL’s design system, I created tailored UI components to guide users through each step.
Step 1: Connect IG account


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'.


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

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.

Designing for various edge cases/ unhappy paths
Designing error states and feedback loops to ensure users were always informed, reducing frustration and enhancing trust.



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