Brainbaazi

UX DESIGN, VISUAL DESIGN, BRANDING

Brainbaazi is one of India’s largest live quiz game show. The game starts at 9:00PM and the host asks 11 questions and if you got them all correct, you share 100K INR prize money with the winners. As of late March 2018, the game had around 500K concurrent users every day.

The challenge

Eastablish brand foundations, design the whole experience from scratch for a very wide indian audience.

My role

Conduct competetor research, wireframing and rapid prototyping, creating a logo and branding styles, solving complex UX problems, creating high fidelity visuals, and working with devs to ensure correct implementation.

Research

During the ideation stage of Brainbaazi, we had very few competetors. HQ being the most significant one. But Brainbaazi needed to have a more Indian touch, so we started to look for patterns in Indian television shows like ‘Kaun Banega Crorepati’. We studied what users liked about HQ and other competetors, talked to potential users, and created a feature list that was later curated for MVP launch. We had a very tight deadline and did not want to reinvent the wheel so we used a lot of common patterns that users were already used to.

Initial competetor analysis

Wireframes and initial prototypes

For the initial 2-3 days, brainstorming with product managers on white board and scribbling on my sketchbook was the only thing I did, until we defined personas and user journey and came up with final wireframes on paper. And then I created initial prototypes in invision to share with stakeholders. We tested them on a small set of users, got some feedback from stakeholders and iterated a few times till we got a final approved protototype.

Some initial stage wireframing and ideas dump

Branding foundations

We did not even have a name until we had created our first prototype. Once we had something to work on, we started to think about the physical form, look and feel of the product instead of just user flow and technology. The stakeholders finally approved the name Brainbaazi and we started testing colors and themes internally.

To design a consistent brand, we needed to define very clear constraints for colors, fonts and logo.

  1. We needed to have elements and styles that made Brainbaazi brand feel like a game.
  2. The logo and colors must be gender neutral.
  3. Consider how the logo would look in different languages, if needed.
  4. The logo and colors must appeal to the wide age group of target audience while still being vibrant and fun.

Initially, I started off by experimenting all possibilities that made sense to me. I wrote down related terms on a paper and started to sketch ideas. After a few sketching sessions I began to recognise patterns and that helped me set some directions to go ahead. Because we had a very short deadline, I restricted myself to experiment in these four directions only.

  1. Casino route: Since people win real cash in this game so we could try casino style look and feel.
  2. Brain/Lightbulb route: Focusing on the intellectual aspect of the game.
  3. Abstract route: To experiment with abstract shapes to highlight other features of the game. For example, as the game proceeds it gets steeper. So a pyramid shape could possibly be used to depict that.
  4. Typography route: A lot of Times businesses have typographic logos, so it was worth giving a try.
Initial mind map and rough sketches
Some of the key iterations based on the above four routes

After around 60 iterations of logo and 20 different color themes we finally settled for an option that all stakeholders could agree upon. We made a few tweaks and did a few legibility treatments after testing the prototype internally with updated theme.

The final logo

High fidelity visuals

So now, it was time for the most fun part; designing the actual UI of the app. We first started with android, as most of our user base has andoid phones. Before going straight into designing, I took a little time organising and putting together theme elements, creating text styles, layer styles, symbols etc based on the rough screens used in prototypes.

I created a system for naming my artboards, layers, folders and assets, so that related items are grouped together (when exported in case of artboards and assets) and it’s easy to find things when design scales. I also created a system for structuring and organising my symbols, text styles and layer styles. The symbols had 5 major groups — components, elements, icons black, icons white, and styles. The components were larger or more complex repeatable groups of UI elements like appbar, chat window etc. Elements were smaller parts like buttons, checkboxes or text fields. Styles had symbols for colors, elevations, backdrop, text scrims and other overrides.

Why symbols for colors and elevations? Well, I like to make my symbols with colors and elevations as overrides so that in future, when design scales, any changes to the theme can be made with minimum efforts. I organised layer styles and text styles in a simlar way. My layer styles had three groups — colors, elevations and icon styles. I organised my text styles with font sizes so that it’s easy to find and apply a text style to some text. I grouped my artboards into modules and then made subgroups of screens that were basically the same but having different states.

Screenshot of my symbols in sketch
Screenshots of my text styles and layer styles

So, after a strong and scalable foundation was ready, I started to design the screens, seeked a lot of feedback, did a lot of iterations. The final screens were recreated for iOS and iPhone X while keeping the platform conventions in mind. A lot did not change except the native fonts, iconograpahy, some system elements like the ‘share bottom sheet’, a few alignments etc. And before the designs were delivered, I checked every word for spelling, language and tone; every element for consistency and asked others for feedback.

I also created some interactions in Principle to visualise the motion of some specific components in UI and added some audio feedback wherever needed.

Some of the Key Screens
iOS versions of screens
iPhone X versions of screens

Working with developers

I delivered the designs to developers on Zeplin. It’s a wonderful tool but has a few limitations when it comes to organising the screens. I created sections for each module and organised the screens in order of appearance. Though subsections are not yet supported by Zeplin, I had a naming template for screens so everyone can find a screen easily — ‘Module—screen—state’ and then each screen has some specific tags to make them even more discoverable.

I collaborated with developers and product managers for brainstorming on corner cases and did some design tweaks so that the developers could easily develop and deliver the product on time.. I sat with the devs for interactions, animations and for making small changes depending on the priority to make sure the design is implemented correctly and looks good on all devices. I tested every build myself on both android and iOS devices and reported UI bugs or UX issues as well as noted down things that can be improved on design end.

Screenshot of my zeplin board

Solving key UX problems and scaling the product

Before the app was live publicly, it was released internally in TIL, where we could test the app on a much larger user base. We recognised a number of UX issues and tried to fix as many of them as possible. Some of those issues were solved after public release depending on the priority.

Some of the problems that affected users’ experience were:

  1. Drop on profile creation screen: After registering with mobile number, users were required to chose a username. They could also upload a profile picture and enter a referral code, if they have one. Initially it was hard to understand the reason of this significant drop on profile creation screen , untill we discovered in one of the comments on Play Store that users thought entering the referral code was required. And many of those users who did not have referral code did not proceed. Although, the referral code field already had ‘optional’ written in placeholder but depending on only text for our focus group was not a good idea. We solved this issue by just removing the field and putting a links saying “Have a referral code?”.
A simple UX tweak improved signups significantly
  1. Users quit game when they get eliminated: This problem could be solved in a number of ways for example by making the game more interactive and interesting, or giving incentives to users for staying in the game. This problem required new features in the game so I worked with product managers on different solutions. One of them was giving users an extra life for next game when they watch the whole game. Other solutions included to let the users play for highscore when they get eliminated. Top high scorers would win weekly prizes. Another solution was to introduce a ‘Jaldi 100’ question — the last but one question of every game which would be open for all users to answer. The first 100 users to answer this question correctly would win 100 INR for this question.
One of the ways we tried to engage users till the end of the game
  1. Poor internet connection: Most of our target users don’t use wifi to use internet. Many come from areas where 4G is not available. A large group of users who wanted to play could not play because the game was on a video stream and their poor internet connection did not allow them to play. So I worked with product managers and developers to provide three streaming modes to users: a) Normal mode — high video quality for normal internet connections. b) Data saver mode — Low video quality for average internet connections. c) Text only mode — No video; only text for poor internet connections.

    The app would automatically switch to recommended streaming mode based on user’s internet connection but users had the power to change the mode anytime.

Streaming modes for all kinds of internet connection
A few screens from text only mode flow

Besides all the above mentioned, I also worked on some dashboard screens so that stakeholders could keep an eye on the stats of the game. I also worked on web based panels for quiz master and production guys and some screens for anchor’s teleprompter. But sadly, I can only disclose this much amount of work.

Results

All of the efforts the Brainbaazi team made were received positively from users. The app got really good reviews on Playstore. Brainbaazi was even featured in top Trivia apps on Playstore. Currently, in mid April, the app has more than 5M installs. All this was achieved in just three months.

Although our efforts were well received, the app is far from perfect. We did a lot in the small time we had to launch the app but now the team’s responsibility is to turn it from good to great. A lot can still be simplified. A lot can be improved but it’s time to try a lot of things and learn what works and what does not.

That's it!

Thanks for reading. View more projects below.

Empowering
Android Phones
Revamp of India's
Best Music App
Everything About Your
Favourite Celebrities
Learn More About Me