inspect motion hero image

All Star Cricket 2020




Design process




Kickoff



Stakeholder Interviews

I conducted several stakeholder interviews early on during the beginning phase of the project. My goal was to understand the vision of the founders, their current business goals for the product and how they defined success.

Summary : It’s a worlds first multiplayer cricket game, It is aimed at mid-core mobile gamers from tier 2/3 cities. It is available on the Google Play Store. Expected to entertain and engage 1M+ cricket fans all over the world.




Discovery



Competitive Analysis

Based on stakeholder interviews, I began analyzing several of the competitor products. The goal was to understand the good and the bad bits of these products. Performing an audit/review of competing websites and apps is a great way to summarize the competitive landscape. It brings us clarity in differentiating the product’s unique selling point(USP). It also allows us to perform “Heuristic Review” where we document usability flaws and other areas for improvement.

The following apps were considered for competitive research

Attitudinal(Qualitative)

For qualitative research I paired up with our testing team who help me connect and conducted 1:1 user interviews to get deeper insight into why users were doing things. It allowed me to record their points of frustration and their expectation with regards to the product. I got a chance to get to know our users in their true sense which is their attitude.

Behavioral(Quantitative)

For Quantitative Research, a research method we used for discovery was having an in depth look at the analytics and generate funnel and segment charts for continuous monitoring.

Wireframes We used quantitative data to inform the user persona.

Data Visualization User Behavior

Persona Construction

We used quantitative and qualitative methods of user research to inform the user persona construction.

Primary Persona Primary persona

Secondary Persona Secondary Persona

Tertiary Persona Tertiary Persona




Concepts & Validation



After multiple iterations the final wireframes were presented to the stakeholders. It allowed them to envision what the final product might look like and how the information was organized.

Wireframes

Wireframes




Design



Information Architecture

Information Architecture

Sitemap

Wireframes

UX Flows

Tutorial Flow (Sample)

Tutorial Flow

Core Loop

Final

Core loop is a chain of actions that are repeated over and over as the primary flow your players experience.

Game Design Loop

Final

FTUE & Onboarding

FTUE

First Time User Experience had to be handled very well. Our user research indicated we had 2 types of learners:

Sentences that required higher grasp of language (eg. “Anticipate the ball”) would not work, hence we had to design a tutorial where things taught were visual and supported both types of learners, thus breaking the language barrier. Moreover being gamer user types, the impatience was quite high. Hence, we decided to go with a narrative design where we were able to handhold the users longer without causing them frustration. And the narrative elements helped provide a greater immersion. This was crucial for engage-ability.

Button States

Button States Button states design was important as a good part of UX can be delivered through the most common interaction i.e tapping the button.

Button Animation States We also had to define the button animation states that was experienced by the user as he/she traverses through the UI. This is important as the button tap depth and shadow and other visual elements which are part of the fully functional button, needs to feel like its a part of the game world. This promotes better immersion and leads to higher engage-ability.


On-Boarding

FTUE The sequence of events for a FTUE had to be communicated to the game programmers. Above image is describing a basic cinematic experience which was designed and implemented.

Map Button States The interaction and its states for the level map in which we had to describe the button states as well as environment changes such as path highlight and flag deploy(to signal completion of a level).



On Boarding Screens 1 Some example screens of narrative driven user on boarding. We used a concept “Modeling Acquisition by animated objects” where an isolated finger guided the user on the exact interaction input the system was waiting to receive.

On Boarding Screens 2 We ensured that tutorial was designed keeping in mind both existing as well as new users. Existing users were able to skip the tutorial while the new users had to go through the tutorial at least once in their game lifetime.

We ensured that the effort of learning our game system was rewarded by having a very glorified tutorial end screen that properly acknowledged the users success in completing objective.

Color Palette and Button Styles

Color Palette

Final Screens

Final Final Final Game Over Screens

Game Over Screens

Game Over Screens

UI Depth - We wanted the UI depth to not go more than one level in most cases. And we made sure popups were not full screen because:

One hand interface had a huge impact for our users as it allowed players to play the game in more situations and places. And that helped to improve retention in the product.

Stadiums

Stadiums Concepts

I was instrumental in concept ideation and worked closely with artists to get them to bring the ideas to life. We planned the visual system such that there was visual hierarchy among badges of the same series.


Badges

Badges

We created a badge system that rewarded badges to users who were able to achieve streaks/records. This gave users incentive to be more invested in the game.


Interaction Design

A few screens that showcase interaction design.


Outcomes

All Star Cricket already has over +40% D1 retention rate in MVP, and 25% of revenue is coming from IAP, exceptional metrics for a title aimed at the domestic market.

Our Team

Badges