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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
Thanks for reading. View more projects below.