ShopStory
White-label live-commerce solution and a streaming app for bloggers.
What is Shopstory?
A company wants to make video streams, show products, and sell them in real time. ShopStory is a platform that helps do this.
The solution integrates into an existing website. Bloggers can use the ShopStory streaming app or external software.
Video stream + catalog by one simple integration
Work process
ShopStory is a small international team. We used a design process similar to the Double Diamond model but adapted for our needs.
Success metrics
We value privacy of our clients and measure only what can be measured on our side.
Starting point
There were two ways to inform customers about the stream: advertising and social media. Both of them worked mostly before the event.
In the same time, companies that use ShopStory often have a lot of daily main page visitors. The idea to attract these customers seems to be obvious, but how to do this as a white-label solution?
Advertising campaigns
Social media
company's website
no traffic
stream
Research
First of all, we needed a list of requirements that would make our solution work for all current and potential clients.
1
Visible
E-commerce websites often have an overloaded main page. The badge must stand out.
2
Multi-platform
The solution should be easy to use on both desktop and mobile devices, especially on mobile.
3
Not damaging
Better to avoid interrupting those who have already planned their purchases. A current order is a priority.
Version 0
Abstract ideas are difficult to discuss. Moreover, we worked async. That's why we started with version 0, which existed purely for discussion. We have all listed our requirements. We needed to understand how our ideas looked like in reality.
Live
19:02
Beauty Hacks & Must-Have Products ✨
Live
Beauty Hacks & Must-Have Products ✨
Live
Beauty Hacks & Must-Have Products ✨
Live
32:16
Live
32:16
Live
32:16
Live
2:03
Live
Beauty Hacks & Must-Have Products ✨
Live
Beauty Hacks & Must-Have Products ✨
Live
Beauty Hacks & Must-Have Products ✨
Buttons do make everything more obvious.
Live
32:16
Live
Live
32:16
Live
Live
Beauty Hacks & Must-Have Products ✨
One solution
Abstract ideas are difficult to discuss. Moreover, we worked async. That's why we started with version 0, which existed purely for discussion. We have all listed our requirements. We needed to understand how our ideas looked like in reality.
Live
19:02
Beauty Hacks & Must-Have Products ✨
Live
Beauty Hacks & Must-Have Products ✨
Live
Beauty Hacks & Must-Have Products ✨
Live
32:16
Live
32:16
Live
32:16
Live
2:03
Live
Beauty Hacks & Must-Have Products ✨
Live
Beauty Hacks & Must-Have Products ✨
Live
Beauty Hacks & Must-Have Products ✨
Buttons do make everything more obvious.
Live
32:16
Live
Live
32:16
Live
Live
Beauty Hacks & Must-Have Products ✨
Iterations
The picked option wasn't final. We tried to see the solution through many lenses and carefully improved it multiple times.
Live
Live
32:16
Live
Live
Live
Code
By the end, we had a final solution that fulfilled all the requirements, relied on the budget and the libraries that have already been implemented.
Working on the main badge led us to a new hypothesis: "customers still undecided on a purchase might have found it helpful to view a similar mini-player on the catalog item’s page." We decided to try this option too.
Live
Validation
After implementing the new features, there has been a drastic change in the metrics.
The live widget has increased the number of live stream viewers by a factor of 10. The mini-player has increased the number of the recorded stream viewers by a factor of 30.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M 14.136 6.038 C 14.487 5.686 14.487 5.115 14.136 4.764 L 9.636 0.264 C 9.284 -0.088 8.713 -0.088 8.362 0.264 C 8.01 0.615 8.01 1.186 8.362 1.538 L 11.326 4.502 L 0.9 4.502 C 0.402 4.502 0 4.904 0 5.402 C 0 5.9 0.402 6.302 0.9 6.302 L 11.326 6.302 L 8.362 9.266 C 8.01 9.618 8.01 10.189 8.362 10.541 C 8.713 10.892 9.284 10.892 9.636 10.541 L 14.136 6.041 Z" fill="rgba(240, 235, 233, 0.35)" height="10.804218750000006px" id="o1MinJwHn" transform="translate(1.8 3.598)" width="14.399319375000005px"/></svg>)
2026