MPL Logo
E-Sports Gaming Platform For MPL
Building a robust mobile gaming platform for India's biggest E-sports company to entertain billions of users.
Client
Client
MPL
Timeline
Timeline
Ongoing
Industry
Industry
Gaming
Location
Location
India
Project
Project
Design
Year
Year
2020
  1. Strategy

    We collaborated with MPL over a time and material engagement model to create a robust gaming platform, both mobile and web, for the users in India.

    1
  2. Analysis Planning

    As decided by the client, we worked with React Native with Redux and Redis to develop the mobile platform while the tech stack of choice for the web platform was React to align with the framework

    2
  3. UI/UX

    While Figma was used to formulate the UI designs, we picked out Whimsical to design feature workflows for the application.

    3
  4. Development

    The first milestones that were reached on the project was the creation of welcome modules as well as modules for event winners. Then we went to create features for registration flow, user management, referral modules and chat rooms/lobbies for players along with an in-built wallet with integrated payment gateways.

    4
  5. Testing

    We put the application through extreme testing scenarios throughout the development phase with A-B testing being conducted for sample users and the release rollout.

    5
  6. Delivery

    The gaming platform has seen a massive success in both the stores whilst our ongoing interactions with the clients have resulted in plans of the release of exciting new features.

    6
About the Client

Before becoming one of the biggest gaming platforms in India, Mobile Premier league was just an idea of some visionaries that was destined to be the most popular entertainment platform in the near future. As a start-up based out of Bangalore and operating in stealth-mode, MPL managed to score massive investments from leading investors with their concept and then went on to cement their place as the premier real-money based e-sports service. Today, MPL provides access to over 20 unique competitive games, all in a single place.

The Problem

The co-founder of MPL, Shubh Malhotra, was on the lookout for the best React Native developers to help him and his team realize their dream of providing an e-sports experience that would entertain people from all walks of life. In his pursuit of finding a reliable team with a proven track record of greatness, he reached our website and told us his requirement through the website request form.

Their requirement was of a beautiful and distinct UI/UX for their mobile app that would resonate with their users and create a strong and unique image of the brand. As the team discussed plans with the client, it became clearer that the Time & Material engagement model would be the right fit for incorporating all the requirements that client might have going forward with the project, and given the nature of the project, no definite phases were set.

Team On-Call

MPL had big plans and needed the best team to assist them in executing them. As the project involved starting small and building upon the way the project would turn out, the assignment was passed on to a single developer, led by Ankit for the initial stages. As they requirements kept getting denser and more complex, more developers were brought on board and trusted with taking the mantle to great heights. The requirement and the quality of delivery were non-negotiable, hence the client was always made an integral part of all decision making and the team brought onboard was done so with adherence to the clients' expectation.

Requirements

An all-encompassing, state-of-the-art UI/UX for the mobile app.

The app would have features such as interactive games, wallet management, leaderboards, user management etc.

The app should also inherit a chat feature for players to chat with each other.

The app would also have segments and sections for pushed ads and promotional events, as published from the backend.

An easy to use web based dashboard for easy management of features, promotions and users on the app.

Development

From a technical standpoint, the client had already done research on the technology that they wanted their app to be built in, and were fixated on utilizing React Native to its full capacity. Their requirement involved a new and improved UI for the mobile app, implementation of some new features within the app (as per the design and product requirements). An additional requirement was to build a web based dashboard for configuration and managing content on the mobile app as well as assert control over configurations, content and other promotional media that would be displayed on the app.

As a brand new look was pursued by the clients, the design team started their work to understand the product, the vision and the target audience, conducting constant interactions with the clients to get inside their heads and look at the product from their perspective. That was the secret to delivering an experience that was worthy of the platform and appropriate for the users. Figma was used to create the UI of the app and the web dashboard, Whimsical for designing feature workflows and Zookeeper for managing app configurations (which essentially allowed managers to show/hide/promote a particular feature on the app).

While the designers toiled hard at work, the dev team was in conversation with the clients to understand their technical requirements, in order to suggest a tech stack that would suit their platform well. As React Native was already decided upon, the only viable option came in the form of React for the web app. The frequency of communication between the devs and the clients was set to conducting sprints every week. The dev team agreed on shipping new features and new configurations every second week for the mobile app and the dashboard. Before every release, a walkthrough was conducted, which contained the UI workflow as well as backend feasibility for the features being shipped in that particular release.

With the UI and integration process running in tandem, the first set of screens and features delivered were the essential welcome modules, event and winners module, wallet features for secure transactions and leaderboards. MPL promised a whopping 60+ live games on their platform at launch, and the dev team was tasked with making sure that the platform is robust and scalable, enough to handle the number of players that were expected to be engaged with the app at a particular time. Handling these APIs was quite a task and keeping these things in mind, the registration flow, user management, referral modules, payment gateways and chat rooms/lobbies for players were designed.

As for the web app, the features that were being designed for the mobile app were to be manageable through the web dashboard and so it required extreme precision to design the flow of the dashboard in such a way that it promoted ease of use and ease of access to users, both old and new. React was used with Redux and Redis to create the frontend. Sentry was used for error logging and tracking & Babel was the choice of compiler for the project.

Testing was a function that was performed all throughout development and walkthrough sessions to test if the app was working as intended and was error free. Hansel was used for A-B testing with sample users and for the release rollout. Rest of the features were tested manually. The app was exposed to extreme testing scenarios and whatever bugs did pop up, were registered and fixed promptly. Postman was the choice of tool for testing APIs and endpoints.

Overcoming Challenges

This particular project was a little peculiar. The challenges did not come in the the development scenarios but in the overall nature of the engagement. There were extremely short deadlines set to complete features as the client wanted rapid development to reach a stage where they could deploy the app the quickest. A single week was given to design, create, implement and test a feature before delivering completely bug free. Since the application was already live, new updates were pushed every week for the end-users. The geeks rose up to the challenge and worked like champions to steamroll through the challenges and deliver everything on time, as planned.


In bird's eye view
  • Tickets were managed on Jira and Flock was used for Project Management & Collaboration.
  • BitBucket was used to store and manage source code of the app.
  • The app was deployed to Google Play Store and Apple App Store.
  • React Native was chosen for its cross-platform goodness and ease of pushing updates.
Final Impression

Since MPL is an ongoing project, there are no real final impressions of the client but the fact that MPL has kept up their engagement with us and is continuing to do so speaks volumes. The client is extremely happy with the current status of the app and how it is turning out to be and we are looking to continue this fruitful association for the foreseeable future.