Playship Mobile Gaming Application

VMware Hero Image

Company

Project Details

Team — Sathwik Aala, Teja Mokkapati, Shabeer Majeed

Duration — 3 months

Location —Bengaluru, India

Project Deliverables

Target user analysis report

Application flow design

Wireframes and prototypes

Usability testing report

Introduction

What is Playship?

Playship is a online competitive mobile gaming app where players compete with others to win real money. There are two types of competitions in the app. The first is called a Battle in which there is a one-on-one match with winner takes all. The second is called a Tournament where multiple players pool in money and play a tournament over a period of time. The top players who win the tournament share the winnings from the pool accordingly.

What was my role?

I was a UX designer on a team with two other UX designers and two graphic designers. I collaborated on all parts of design process with our team in research to testing. In addition, I developed some parts of backend using Node.js. The higher-level process we followed at Playship is shown below.

Challenge

Understand the behavior of the target users to design a competitive mobile gaming app where people compete with others and win real money.

Key Features

One-on-one battle

Players search and challenge an opponent for a quick game. The winner takes all the money.

Tournaments

Players enter a tournament and seek to stay on top of leaderboard. When the tournament ends, the top players get the share of pool money accordingly.

Real-time gaming

Users in battle mode play games with other real players and see all their moves. Everything happens in real-time.

Instantly win money

Users view the money added to their account as soon as they win.

Tracking previous games

Players find the history of all games they have played in the app. This includes tournaments, battles, wins, and losses.

Instantly add/withdraw money

Users instantly add/withdraw the money they have won easily and quickly with the various payment methods provided.

Research & Design Process

Background Research

Before we started the core UX research process, we completed background research. Specifically, we conducted "blue skies research" where we explored the current research and studies available, which help us with our study. So examined various research papers, articles, and journals regarding mobile gaming and mobile gaming users' behavior. We also met with product managers and other stakeholders regarding the product they wanted to build.

User Survey

Using Survey Monkey tool, we conducted the user survey and received responses from over 300 participants. We framed survey questions which can help us understand the existing user behavior. Specifically, we tried to understand the demographics of users, category of games they like, time of day in which they play, their motivation to play for money, etc.

From the survey, we analyzed the data and segregated the users into the 4 groups below.

The types of games these 4 groups are interested in playing for money are as listed below.

User Interviews

We conducted interviews with 30 participants who are our target users. From these interviews, we collected the user expectations from the app. Some of the requirements we found from the users are listed below.

  • 01

    Same skill matching

    "I want to match with opponents who are equally good as me. I should see his overall statistics before playing."

    "Matching players has to be fair. I don’t want to play against someone who is very experienced."

  • 02

    Cashless games

    "I want to play practice games and gain some confidence before I play with real money."

    "There should be a way to play games without involving the money as well. They can help me practice."

  • 03

    Easy money withdrawal

    "I want to withdraw my winnings to my bank account easily and quickly. It shouldn’t be a hassle."

    "I don’t like having too much money in my digital wallets. I would want to transfer them to my bank directly."

  • 04

    Game tutorial

    "Even though it might be a familiar game, there are always tricks that can be helpful. I want to know them."

    "If I am playing for money, I would want to see the game tutorial before playing. It can be really helpful."

  • 05

    Replay of games played

    "I want to see the replay of a game I played. That can help me understand where I went wrong."

    "Rewatching the game I played will improve my skill. I will also have proof if the opponent cheats."

  • 06

    Quick cash games

    "I want the games to be quick. I can’t play a game for 30 minutes and realize that I lost all the money."

    "It shouldn’t take more than 5 minutes for game to finish. The more time I spend on money games, the anxious I get."

  • 07

    History of played games

    "I want to track my progress. I want to see if I am winning or losing money by playing games in the app."

    "I want to see where I am making mistakes while playing. It would be helpful if I can access all this information."

  • 08

    Live tournament winners gameplay

    "I want to see the gameplay of tournament winners. It might help me in winning the next game."

    "I should be able to watch the tournament games live. It can help me understand their strategies."

  • 09

    Reporting suspicious activity

    "If I find any hackers I should be able to report them and get all my money back."

    "In games which involves money, there are always cheaters. I want to know the company is taking care of them."

Personas

Based on the information we gathered, we created personas that represent our users. For each persona, we created their demographic details, such as their age, gender, income group, etc. Apart from these details, we also included what the individual persona might think, do, and feel.

Application Flow

Before designing the app, we created app flow diagram to determine if they align with the stakeholder expectations and project goals. So, we used sticky notes and created the app flow in the first iteration.

After creating the app flow, we tested it with stakeholders and developers who understood the app flow. We recorded each feedback while they followed the flow and iterated it multiple times until the optimal flow was achieved.

Sitemap

After creating the application flow, we refined the navigation structure of the app to a granular level and determined where the content will be placed. Before going to the wireframing phase, we also finalized the relationship between different pages of the application.

We tested the entire sitemap thoroughly with the stakeholders and developers of the project and iterated it multiple times. The final sitemap is shown below.

Wireframes

Using the sitemap and the application flow, my teammates and I designed the entire app using Balsamiq tool. Primarily, we incorporated all the functionality we discussed with the stakeholders and the users.

Design Review

We received positive reviews from developers and stakeholders when we presented all the wireframes to them. As a result of discussions on various economic and technological feasibilities, we removed some elements and iterated the wireframes multiple times until everyone was on the same page.

High-Fidelity Prototypes

We used Sketch for designing high-fidelity screens and Marvel for prototyping. In this stage, there were several iterations of the screens based on the aestheics and usability. Below are some of the screens we designed.

Login with mobile number

Verify mobile number using OTP

One-on-one battle games

Tournaments

Tournament prizes information

Game entry information

Downloading game assets

Game assets download success

Game tutorial

Game start countdown

Real-time gaming

Game over

Won the game

Player game history

Searching an opponent

Searching an opponent in background

Opponent found successfully

Add cash to the app

Withdraw cash from the app

Player profile

Visit playship website
Usability Testing and Evaluation

To analyze the usability of our application, we conducted usability testing and evaluations. Since, we are testing the interactive prototypes only, we performed moderated usability testing with around 15 sample users who matched our personas. Based on this usability testing, we recorded the discrepancies and pain points in our application. We then used Rainbow spreadsheets to understand and prioritize the iteration tasks.

We also performed usability evaluation of our redesigned prototypes using Think-aloud protocol and Heuristic evaluation methods. We asked a multiple UX professionals in the industry to evaluate the prototypes.

Results

  • 92/100

    System usability scale score

    Calculated the score based on usability testing sessions with 15 participants.

  • 86.6%

    Task completion rate

    Calculated the percentage based on tasks given to 15 participants in usability testing sessions.

  • 3800+

    Daily new users

    The number has been calculated based on user acquisition rate by end of first month from launch.

  • 47.3%

    Aggregate retention rate

    Calculated the percentage based on user acquisition results by the end of first month from launch.

“Sathwik had worked with us for a brief period, but made a significant impact. His research towards UI/UX design for our app proved very crucial. He has a good understanding of what our users want or need. He worked not only as a part of our research team, he also worked as a part of our coding team. It is rare to find a person who can design and also write the code. He worked closely with marketing and product teams to optimize the designs. He is a quick learner and it was a pleasant experience working with him.”

TEJA MOKKAPATI, MANAGER AT PLAYSHIP

Previous Project

vRealize Automation Notification System

Next Project

Codedu Programming Editor