What is Live-stream-shopping
Millennials keep reinventing old things. This time their victim was teleshopping. Just kidding. 🙃 Live-stream-shopping (LSS) allows you to watch streams and order things right away. Coronavirus pandemic made the segment grow fast because the world was locked down and had to buy food and goods through the Internet. The main question was ‘How to stand out among identical online shops?’
As we’ve already mentioned, LSS is actively developing in China — revenue made from online sales totaled up to $244 billion over the past year. In Russia, the industry is just starting up, and the only vivid LSS example is the e-commerce app ‘Zalipaking’ by AliExpress that attracted popular Russian stars, bloggers, and influencers to the streams.
Let’s start with prototype
The client came to us in August 2020. He knew Chinese and kept an eye on the e-commerce app market of Asia. He studied the matter and found out that there were few analogs outside of China. It meant that the project had the potential.
We have already worked with the client on another project — Energo, powerbank rental service in Moscow — that’s why they offered us to take on the live-stream-shopping app development of Eyebuy — Russian live-stream-shopping app.
The task seemed to be interesting, but we honestly said that we had no experience in the development of such apps. At the same time, we wanted to test our stack, try to implement the whole functionality, and gain experience. To avoid risks, we decided to start with a prototype. Our client had neither a certain scope nor a large budget but had the urge to start with the new project for the European market.
Together we wanted to see how viable the startup was before the large-scale development and big investments. However, we also wanted to make sure that we could use our stack for the technical implementation of the idea. For that reason, we can say that the project wasn’t a classic one.
References
We started live-stream-shopping app development with the research of analogs. There are few projects like this in Russia, and we didn’t meet the one we like.
We found good examples in the foreign market. For instance, a swiss platform BamBuser that had its own SDK for streaming. Early in the game, we thought we would base Eyebuy on it but then decided to do everything on our own to study all nuances and pitfalls.
We took the Indian service BulBulTV and examined its features and user flows. We liked the work principles of the service and decided to rely on it. To distinguish Eyebuy from competitors, we came up with a killer feature — users can jump from our app right to the online shop, and the cart is already filled with the products they chose on a stream. All the user needs to do is to pay for the order and wait for the parcel.
Stack
We agreed to develop UI/UX design for both web and mobile apps and a prototype of Eyebuy.
We didn’t hesitate when choosing a stack: looking back at the previous experience we had with Energo, we decided to use our ‘eternal classic’ stack that consists of React and React Native for the frontend app development for web and mobile respectively, and Node.js for the backend part. Therefore, it was a 3-man team: project management, UI/UX designer, and full-stack developer.
Express design
We had to complete all the live-stream-shopping app development steps in a haste. The client had no specifications for the interface but had references. At the prototype stage, the design is needed just to present the architecture of the app development. Our designer had experience in developing a similar app (for video calls), so it wasn’t hard for her to come up with a simple yet functional design. It wasn’t a sleepwalk though.
The references facilitated the work, but they didn't become a panacea for all problems. For example, we had issues with the cards that represent the goods: on the wireframes brought by the client, they overlapped the stream. Now they look like stories on Instagram: if users are not interested in the product yet, nothing will disturb them and they can enjoy watching the stream.
First streams
Our e-commerce app developers built a prototype within a month and tested it with several small showroom owners. At that stage, the maximum number of unique users who visited the streams was 40. While the number of concurrent viewers reached 25.
Nothing is perfect from the very beginning. Our first streams didn’t go flawlessly either: the number of viewers was recorded incorrectly. We were using the Socket.IO library and adding up every real-time user into a variable. To put it simply, we were logging the action ‘user has connected to the stream’ and increasing the number in the variable, but not always accurately decreasing upon a disconnect.
Comments posted by viewers during a stream jumped across the streamer’s screen and distracted him/her. We easily solved the problem by sorting the comments by date.
The killer feature also became a headache — we had to integrate each online shop card manually. It’s not simple to build a universal code that could automate that process, because each shop has a different engine and site structure.
Despite the bugs and issues we already knew that brands were interested in such an e-commerce app as there were enough demo requests.
Getting closer to pilot
The test streams showed that people were keen on the solution, so we moved on to developing a pilot version of the app.
As you remember, at first we didn’t outline an accurate scope of work and set up planning (set up Jira into the project recently though 🙂), because we had agreed just on a prototype.
It was a challenge for us. We faced various bugs — some of them were easily fixed, some are still waiting in Jira. The basis of the app is streaming. When we tested the app, on an Android device everything was alright — fvl-videos played well. Live-stream-shopping app development problems started with testing on iOS because it doesn’t support Flash video file formats. We fixed this bug by changing the video format to hls.
To be honest, they don’t allow you to start translating a video with sound (it must be muted by default). So we had two options: to broadcast a muted stream and hope that users would find the ‘Sound on’ button by themselves or to add a pop-up requesting to turn on the sound at the start. We chose pop-up ‘cause users were wondering how to turn on the sound. 🙂
First ‘big’ streams
With the pilot, the client went to large brands: Letual, Mascotte, Decathlon. They liked the idea and agreed to hold test streams.
Here the streams went without a hitch: they didn’t crash, and the quality remained high. On the Mascotte stream, the number of unique viewers reached 500 (opposed to 40 on the prototype stage) and the number of concurrent viewers was 39. We also tested the killer feature: users were adding items to the cart right on the stream, and were redirected to an already compiled cart on the Mascotte website. During the stream, there were 83 click-throughs.
There are still some difficulties to get prepared for each stream. Streams repeat, and the developer has to add new products each time. We already fixed it: began to store arrays in associative objects and bind products to a specific streamer.
Here’s what we’ve got to improve:
- Make it possible to automatically record streams. At the start of the project, we tested it manually (start a stream → record a video → save it to Google Drive), and now are looking for an automated solution. So far we’ve found a special library for streaming — node-media-server. With it, we can save streams in mp4. However, the documentation doesn’t say anything about saving files to storage.
- There is an open-ending question: what if a million users connect to a stream? The cool thing is that we used node.js, which will help to keep up the load.
The results: MVP and regular users
The pilot version of the e-commerce app proved that the idea has traction. We moved on to MVP development — now we’re planning to automate all the manual processes. This way online shops will have everything to start several streams at the same time and easily upload items through the admin panel.
For now, you cannot download the app from app stores — that’s why there are no proper metrics on performance. But for the pilot, having 500+ unique users on test streams is already a success. The client is looking for new partners, and we are estimating the features that users requested after the test streams. At the same time, the project has already acquired regular users who want to continue cooperating: a jewelry brand and a clothing brand.
