b.live Case Study

The consumption and creation of video content have grown into a real trend over the recent years. And the significant success of the Twitter-acquired video broadcasting app Periscope has added another hot ingredient into this trend: live broadcasting. Together with our clients, we crave for keeping up with the trends. As the result of such craving, the app b.live was born.

What is b.live

Just as Periscope, b.live allows users to stream their videos live in the easiest and the most pleasant way. However, the app also has some significant distinctions that make us proud.

b.live provides users with the opportunity not only to create personal accounts but also to collaborate with other broadcasters creating the united channels. Streaming on such channels enables users to promote their video-content among b.livers (b.live users), and monetize it.

App features:

Draw on screen during the live broadcast
Post emoticons during the broadcast
Broadcast via multiple sources simultaneously (for instance, via YouTube and Facebook Live)
View broadcasts using a web interface, a mobile device is not required

Requirements and Challenges

The main challenge during the development was the fact that our team was new to such a project, and the client had unique ideas which had never before been implemented in an app like that.

“We can do it!”, we thought, and - as it turned later – we were right :)

Here are the key technical requirements we had to meet:

Build native applications for both iOS and Android platforms: the users must have a possibility to broadcast from any iOS- and Android-powered device.
Implement the multi-sharing feature: the users must be able to integrate their account with YouTube and Facebook Live and broadcast via the three sources (including b.live itself) simultaneously. Currently, this feature is exclusive for b.live: even the market leader, Periscope, can’t do that.
Implement the ability to view broadcasts via the web version of the app, so users would have a choice to watch streams from their desktop or laptop if they don’t want to exhaust the battery of their mobile device.
Find and adopt the most the video compression technology that is able to handle video streams from all users.
The application must be as viral as possible.

Implementation

One of the main issues that we had to deal with was handling the traffic delivery since even a relatively popular video broadcast requires the considerable amount of traffic to be delivered. What’s more, this traffic needs to be transmitted fast.
To deal with this, video broadcasting services normally use a content delivery/distribution network (CDN). However, even with an inexpensive CDN solution (we use Hetzner) and with the highest possible compression, transmitting high volumes of traffic is still quite expensive. Thus, we needed to find a budget solution for the testing period and for the period before the app would become widely popular and begin to monetize.
In order to solve this problem, we used several dedicated servers rented from a web hosting company. It’s not too expensive since you don’t need significant computing and RAM capacities to make the transmission possible – you need only a high bandwidth capacity.
The hosting company provides a limited amount of free traffic which we use to deliver a video broadcast to a limited number of users. As soon as the number of users that receive the broadcast reaches the established threshold, the system switches to a usual CDN.
This solution proved to be extremely cost-effective and saved our client a sufficient amount of money so far.

/ Home Screen

Broadcasting

On the first screen, the key idea was to make the user experience as simple as possible. That’s why only three buttons were left on the first screen:

Add or view friends;
Start streaming;
Watch another user’s stream.

The actual video stream from the user device’s camera is used as the home screen, which is intended to motivate a user to start broadcasting right away.

Also, the home screen features shortcuts for a quick access to the main functions allowing users to:

Draw something right over the video;
Apply a color filter (just like in Instagram, but for the video);
Post an emoticon;
Write a text message.

Social features

The target audience we have aimed at based on our market research is active people between the ages of 13 and 29. We’ve chosen generations Y and Z since people of this age are more open to socializing and getting new acquaintances.

We wanted to encourage users to start making social connections right from the main screen, which – ultimately - should boost the number of monthly active users (MAU), as well as high user retention and recency rates. However, we also had to make sure that the home screen isn’t overloaded with UI elements.

In order to find the perfect balance between functionality and clean visuals, we’ve built the UX based on swipes.

Swiping left and right, users can switch between the following functions:

Draw on screen during the live broadcast
Post emoticons during the broadcast
Broadcast via multiple sources simultaneously (for instance, via YouTube and Facebook Live)
View broadcasts using a web interface, a mobile device is not required

/ PROFILE

Edit and Share

Times, when social apps' user profile screen were overloaded with information and functional elements, are long gone. Considering this, as well as the general concept of clean and spacious UI design for b.live, we’ve put only essential functions on the profile page.

They include:

Invite friends to the app
Edit profile
Access app settings
View user’s current statistics in numbers (followers, subscriptions, blocked users, and received “stars”).

We tried to encourage users to share the app on their profile screen in order to make the app go viral.

/ CHAT

Three-Mode Chat

A common problem among live broadcasting apps is that user interactions within them are often inconvenient and distract from broadcasts. To make b.live convenient and engaging, yet not distracting, we’ve designed a three-mode chat for it.

The modes are:

Standard chat mode: all messages sent by the broadcast viewers are being displayed real-time;
Silent mode: messages are hidden; this mode is convenient when the broadcast has way too many users who post too many comments to read them all properly;
History mode: views the current stream’s full chat history.

As the result, we’ve managed to make a convenient chat, which was proved by the increase of the engagement metrics.

← Wirex

Shark Taxi →