Team — Sathwik Aala, Teja Mokkapati, Shabeer Majeed
Duration — 3 months
Location —Bengaluru, India
Target user analysis report
Application flow design
Wireframes and prototypes
Usability testing report
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.
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.
Players search and challenge an opponent for a quick game. The winner takes all the money.
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.
Users in battle mode play games with other real players and see all their moves. Everything happens in real-time.
Users view the money added to their account as soon as they win.
Players find the history of all games they have played in the app. This includes tournaments, battles, wins, and losses.
Users instantly add/withdraw the money they have won easily and quickly with the various payment methods provided.
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.
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.
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.
"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."
"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."
"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."
"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."
"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."
"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."
"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."
"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."
"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."
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.
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.
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.
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.
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.
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
Tournament prizes information
Game entry information
Downloading game assets
Game assets download success
Game start countdown
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
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.
Calculated the score based on usability testing sessions with 15 participants.
Calculated the percentage based on tasks given to 15 participants in usability testing sessions.
The number has been calculated based on user acquisition rate by end of first month from launch.
Calculated the percentage based on user acquisition results by the end of first month from launch.