What is Android Overlay?
Market Analysis
Design Process
Initial Draft
Second Draft
Third Draft
User Testing
Video Layout and Sequence
Android Overlay is a feature that allows applications to appear on top of other ones. One most common example is like Facebook Messenger, where chat head appears when you receive a message. Bunch is hoping to have a constant video chat overlay on top whatever game the user is playing, creating a much more immersive experience like a virtual room with friends.

We found out that when people use Bunch or video/voice chatting while playing games, their retention rates increase significantly.  By implementing Android Overlay, we are hoping another level of increase in game sessions.

Android Overlay can also let us know users better. We can use those data to convince game developers and publishers to use more of our future platform.
Discord is our one of the biggest competitors. They having been providing an overlay functionality for several years, which will give users a floating chat head for quick control.
Discord is our one of the biggest competitors. They having been providing an overlay functionality for several years, which will give users a floating chat head for quick control.
Android Overlay not only serves mobile gamers to have a more immersive social gaming experience, but also, according to our data, gamers who use video/audio chat while playing games have much better retention rate and willing to play more and spend more on in-app purchases. Therefore, Android Overlay also serves game developers so they can know better about their users.

According to game developers feedback, they were very excited about this new feature atop of their game but they absolutely do not want video chat overlay to disrupt the actual game play. This is also the biggest concern from users who heard about video chat overlay for the first time.

We quickly lay out several options to start the initial design.
**Option 1** - One chat head is floating on top of the game(default mode).  Tap on the chat head will bring up both all chat heads and the control(expanded mode).

**Option 2** - One chat head is floating on top of the game. Tap on the chat head once will bring up all chat heads. Tap on the chat head twice will bring up the control.

**Option 3** - One chat head and a control handle are floating on top of the game. Tap on the chat head will bring up all chat heads. Tap on the control handle will bring up the control.

After balancing the level of disruption, the level of easiness to control and the level of social interaction, we decided to go for the option 1, which only one chat head is floating and tapping on the chat head will bring up all chat heads and the control.

The team has planned an initial two step development on the Android Overlay. A MVP will be pushed on by the end of December and a quick follow up V1 will be out January 2020.

For the MVP, the product should provide

1. Ability to enable Android Overlay permission
2. Ability to toggle between default/expand mode

In the following V1, it should be able to

1. Add a hidden mode
2. Provide different templates for different cases
3. Mute audio/video individually
I put up several drafts to start the initial design, fulfilling basic functionalities. Several feedback are listed below.

- Default and expanded modes should have clearer focus and functions.
- The chat control and other actions (invite and go to Bunch main app) should have clearer seperation.
In a video chat, the user is able to mute his/her own mic/video and mute all audio/videos. By this, instead of design buttons for all individual actions, I conclude 2 major use cases.

Video Chat Mode - Mic On, Cam On, Volume On, Video On

Voice Chat Mode - Mic On, Cam Off, Volume On, Video Off

Therefore, a toggle to quickly switch modes can be very useful instead of punching 4 different buttons around.
Switch to video chat mode will automatically turn on both mic and cam. Switch to voice chat mode will switch off the camera but leave the mic on. User can still manually turn on the video or cam. It makes no sense when user engages into a video chat while turning off the cam and it makes zero sense either when user mute the mic when into a audio chat.

An one piece control panel on the left will attach self camera in it too.

Another detail adjustment is the mute indicator. Since the user is able to mute any one including himself, an difference in active and passive mute indicator should be created. A white, translucent mute indicator is for people who mute themselves and a white circular background red microphone button is to show the current user actively mute the person. Another tap on it will dis-mute person.
The feedback from the switch is we want to make this more traditional. So switch is probably not the best option for the first version.
A more completed control attached  to video chat heads is a more conventional as other chatting app providing right now. By arranging controls and other icons in the same line, there is a clear separation between control and other actions. By placing the control on the bottom, the video layout can be arranged in an easier and better way.
After an initial prototyped has been drafted, the team is doing a first round user testing. The goal is to see if, under a typical mobile gaming scenario, users are capable perform certain actions without running into obstacles.

In this test we want users to

1. Go to expanded mode from default mode
2. Check everyone's screen
3. Use basic controls. (Microphone, camera, mute others, hangup the call)
4. Add new person into the session
5. Go to the Bunch main app and come back

The team is using [usertesting.com](http://usertesting.com) to conduct user test with our prototypes.
One of the biggest strength of [usertesting.com](http://usertesting.com) is the site can conduct the prototype instantly and within 30 minutes we received 5 tests videos from users. But it also means since so many people can test it we need to carefully design the pre-test questions so we can control our target users as accurate as possible. After the first round of user testing we re-phrase the entry questions to

"What is initial Brawler the player gets when playing Brawl Stars?"

This greatly helps us to reach people who play competitive mobile games frequently, providing us  more accurate test results.
Another big thing we need to design is how chat videos can be arranged under the portrait and the landscape mode. We considered the orientation of ALL chat screens will be determined by the first person's orientation. Other people's chat screen will rotate accordingly. This can ensure a smooth and easy roll-out of the first version and will be iterated in the quick followup.

The entrance and exit of chat videos can be complicated too. For major video chat apps now, self video is usually docked on the corner of the screen, making the major space for whom the user is chatting with. We decided to dock the self video on the right bottom corner, adjacent to the plus button. As a growth hack, instead of guiding users to use the smaller add button on the control panel, we intentionally made the plus button the same size as the chat video to encourage usage of the new overlay function.
The video layout in landscape mode is straight forward. In different number of people cases, all the videos are alined in the center, with user's self put in the bottom right corner.

We tried different sequences and layout of the video screen entrances.
The video layout in portrait is a bit tricky. Android has so many device sizes, which are majorly different in screen height. Responsive design is a big concern. In order to maintain the consistency while keep the user focusing on what they care the most, several layout options and entrance sequence were designed and tested.
Being the number 1 chatting app in the US, iMessage sharing feature is another big part of organic growth for Bunch. We designed some game specific and generic share thumbnail for it.
We studied how Facebook Messenger and Discord on how to end an overlay session. We chose the typical drag and dismiss behavior. Here is animation prototype I created.

[drag to dismiss prototype]

A request of permission page should let users know what is Overlay in seconds. User should instantly know the advantage of Overlay and ideally turn it on from the system level in seconds.

1. Overlay shows video chat heads
2. While playing games
3. Easy control of the video.

Therefore we decided to make into an animation format, showing real game footage as the background, besides overlay chat video floating on the top with easy controls.
Request user's attention to turn on Overlay switch from Android system level can be tricky. We studied several scenarios.

The interrupt will pop out in four conditions.

1. Onboarding, for first time users.
2. Update, for non-first time update users.
3. Game page, when entering the game launcher.
4. After game session, when finished a video chat/game session.
Landscape
Portrait
iMessage
Hang up and Permission
Sharing Assets
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Bunch app enables user video chat while playing mobile games together. Similar to Discord app, Bunch is about playing mobile games together for the younger generation, primarily focusing on connecting gamers with their actual friends.
Read our media coverage on TechCrunch
What is BUNCH?
Bunch, play your favorite games with friends,
over group video chat.
Dribbble
LinkedIn
Resume
Home
Image Image
Bunch
video chatting with friends while playing mobile games.
Image