Play

Case study

By Md. Anas Ali

Index

In this case study, you will nd

Overview
About users
About existing system
Usability evaluation & insights
Optimised user journey

Page 1
Overview (1of 2)

Usage insights from crunchbase

3,381 -3.51%
Downloads in Feb 2021 Download growth

About Playo
2,14,544 -2.12%
Visits in Feb 2021 Visit growth
Playo is a mobile application that allows
gamers and sports enthusiasts to discover
and connect with playmates coaches and
trainers 68.52 %
Bounce rate

User segmentation

6% UAE
83% India 11% Others

Page 2
Overview (2 of 2)

Sports is really dear to me…

According to research “Reliving childhood when we waited the day at school to

end, meet friends and play hide & seek, badminton, cricket
More than 80% of the worlds population plays and what not. Teaming up, challenging, sweating out,
some sort of sports feeling bruised,… just thinking of those days gives me
chills.
72% agree that they play sports to have a
healthy self image. The rest do it for the love of And then, gradually and unapologetically technology crept
competition, nd purpose in life, manage into our lives, we grew up alongside, and some of us simply
stress, loose weight, enjoy social recreation had given up playing those sports we once were really
and feel entertained good at.

Intrinsic factors, extrinsic factors, social fun, Years later, the same technology is working its magic to
feeling of re, challenge & skill are few of the bring us back to playing again.
mostly quoted motivation enablers
With Playo, I nd myself getting back on ground more
often now”

Page 3
About users (1of 2)

Ecosystem

We usually indulge in sports with people who are around

us, close to us, have a matching skill and provide a notch
Classmates of competition.

With Playo, a sports enthusiast can match up and play

Skilled with
Siblings or other family members: This crowd could be
Just
small in number but is easy to persuade
Friends
anyone
Family
Sportsman Coaches Friends: Acquired at various occasions

Just anyone: If not siblings or friends, up the skill, play

with anybody
Neighbours

Venue admin

Workpals
Venue administrator is the manager at venue, who helps in
the allocation of sports rooms and gadgets, helps with
queries, and can link up with coaches and trainers

Page 4
About users (2 of 2)

User profile
“I like to play badminton, I like playing against skilled
players and feel challenged”

Anand is a quality engineer at a corporate in Bangalore. In

his free time, he enjoys hanging out with his brother and
25 Years friends to play badminton and cricket.
Age
He travels for work and wishes to keep up with his game
even away from home
QA engineer
Employment

Expectations
Bachelors in
engineering Find a venue that hosts sports and is closeby
Education
Find a group of sportsmen who share same interests
in the game
Bangalore, India Find the gear, quickly book the venue or plan over a
Anand R Location
weekend

Sometimes when immersed in the game, quickly

extend the playtime

Page 5
About existing system (1of 3)

System flow

Speci c schedule Are sports rooms

& duration available?

START
After onboarding Find a venue Select game Add to cart
click on Book Yes

Add more
venues?

No
DONE
Make Review
Receive booking payment cart
con rmation mail

Invite friends
to join the game

Page 6
About existing system (2 of 3)

User flows
Active “Book” menu Select venue Venue details page Select booking type

Playtm Sports Arena

Page 7
About existing system (3 of 3)

Select a sports room Verify details Make payment

Playtm Sports Arena

DONE
The venue is
booked

Page 8
Usability evaluation & insights (1 of 12)

Usability principles

Evidently display system’s current

status all the time
Evaluation overview
Display information and provide
feedback so that user is aware of status
and position
“After I used Playo for a couple of weeks, I started
nding it confusing and simply insu cient. To my Help recognise rather than recall
surprise I found my team mates sharing the same Don’t test users memory unless it is for
feeling. gaming fun, help them recognise
instead.

In order to study and assess the overall usability of Make user feel free and in control
this application beyond my personal perception, I Anticipate user expectations and
went ahead to evaluate this system using these behaviour and match with conceptual
principles model.

Help avoid committing errors

Prevent the occurrence of errors or
help detect and diagnose them

Page 9
Executive summary (1 of 2)

Start Find a venue Select game

An unstoppable tour makes user Auto play carousels create Icons that do not have interaction
feel out of command unnecessary eye xations associated with appear
interactive
Unusable and long horizontal
scrolls reduce user performance Various facilities that are not
dramatically clickable are displayed in the
Primary command buttons are form of buttons using more than
placed in stretch zone making it Bad imagery drives away user 5 colours that increases cognitive
di cult for interacting thumb to actions load
reach
Sort order of venues listed is When user taps on a command
inde nite. button drawer of options pop up.
This is an uncalled behaviour not
Unusable and ine cient search matching with expectations
and lter controls

Inconsistent and incorrect

Line graphics around cards labelling. “plays” and “matches
create pseudo clickable happening” mean the same
a ordance
Listing sports rooms varies
Generalised safe and hygiene depending upon the game
sections in all venues lower trust selected
factor.
Limited help provided and poor
content formation

Very critical Moderatley critical

Page 6
Executive summary (2 of 2)

Add to cart Receive cart Make payment

Price and other labels that are not Review cart is a long page with After successful payment user is
interactive are emphasised using lot of content. Such pages put directly moved to a “Karma
an underline and a di erent users o load, o track and keep earned” page before displaying
colour them away from bolting or con rmation message.
converting
Cart is not visible on the page.
After selecting the sports rooms During the course of booking, if
are hidden away any of the sports rooms turns With so many options available,
unavailable it is di cult to update no help is provided to decide on
the cart by diagnosing the error the mode of payment

Cart is equivalent to real world The use of karma points is not

shopping tangible products is very evident.
wrongly used as a synonym to Policy details are long and
book multiple sports room descriptive and are openly
displayed in this page. User has to
scroll through all of it before
making payment

Very critical Moderatley critical

Page 6
Usability evaluation & insights (1 of 10)

Start: Onboarding

Issues and recommendations

1
User should go through this rigorous tour every time after
logging into the application. There is no way available to
skip it
Provide a skip option, let user feel in command

1 Previous and next buttons are the primary action buttons

here. These are placed in a stretch zone making it di cult
for an interacting thumb to reach
Consider users thumb reach, position core interactions in
the natural zone

Page 11
Usability evaluation & insights (2 of 10)

Find a venue - Home

Issues and recommendations

1 Auto play carousels create unnecessary xations. They tend to reduce

user focus on primary task which is “Book venue”
Display information to simplify decision making and drive user action
1

2
2 The primary task elements such as “host game, book venues, show
activity calendar…” are available over an unusable and long horizontal
scroll. 7 such elements are presented using multiple colours. Due to
pop-out e ect, when more than 5 colours are used in the same display
user performance is observed to be dramatically reduced
Consider displaying primary tasks upfront. Negate “paradox of choice”
by exhaustive prioritisation of options. Do not use more than 5 colours
in a single screen
3

3 Bad imagery: Users tend to look in the same direction as people in the
image. Here the back of the coach is visible who is looking away from
the command action “Learn”
People in image should be facing towards action driven commands

Although it is evident that if you want to play, you will have to book the
court. 2 di erent actions “Play” and “Book” is made available to user
redundantly.

Page 12
Usability evaluation & insights (3 of 10)

Find a venue - Book

Issues and recommendations

1 The sort order of venues is inde nite. Not ordered by favourites, near by
or best rated just random horizontal venue listing.
A minimised search icon is a good option for rst time users as they
might not be aware of venue names to search. For a repeating user an
open search and a list of already visited and favourite venue list will help
nd a venue
1 Distance of the venue from the current location is an important missing
data point

2 Safe and hygiene section seems to have randomly been put out here
generalising that all the venues are safe. This is a trust lowering factor.
2
The line graphics used at the border of this card makes it appear pseudo
clickable.
Do not use disturbing graphical elements other than the one that builds
emphasis. Enhance the a ordance of “know more” by enlarging the
click area to the entire card
3
3 Upon clicking on “see all venues”, the display changes dramatically.
Listing shifts away from horizontal scrolling to vertical card
arrangement with a di erent look and feel.
4 Maintain consistency in display, interaction and behaviour. Consistency
converges conceptual model with users mental model

4 The “Events and academies” section are barely visible after a full vertical
scroll and are hidden behind the nav bar.
Include an extended whitespace at the end of the page to get away
from this hideaway

Page 13
Usability evaluation & insights (4 of 10)

Find a venue - Search, filter & sort

Issues and recommendations

1 1 When user taps on the already open blank search bar, the rest of the
page goes blank. And the “search venue” place holder inconsistently
changes to “SEARCH” text label.
- This is a good place to use multifaceted search with location and
game type parameters.
2 - The readability of all caps is low, limit its usage to prominent use
case only

Just a blank page leads to persuasion laggard. Do more… Assist with

search keywords, display more frequently searched options or
favourite venues. Help user recognise venues if recollection is
di cult
3 4
2 With none of the lter options selected the “show results” remain
active. The complementary (reset) and positive(show results)
commands are placed far away. “
Identify and represent di erent states and reposition similar buttons

3 Inconsistent iconography: Line icon for “Venue with booking o ers”,

textual graphic for “rating” and lled icon for “Sage and hygiene”.
Inconsistency induces cognitive load in new users
Build consistency

4 Active checkboxes appear disabled due to light colour shade.

De ne easily distinguishable colour scheme that highlights mindful
a ordance in representing di erent states and behaviour

Page 14
Usability evaluation & insights (5 of 10)

Select game

Issues and recommendations

1 Safe and hygiene section seems to have generally been put out here
stating that all the listed venues are safe. This is a trust lowering factor.
Also, the line graphics used at the border of this card makes it appear
pseudo clickable.
Do not use disturbing graphical elements other than the one that builds
emphasis.

Icons that have interaction associated with them appear similar otherwise.
Users will not be able to identify hidden behaviour without tapping.
De ne the guides for iconography speci c to their behaviour and use
them consistently throughout the platform

Inconsistent and incorrect labelling: “Plays” and “matches happening” are

used to refer upcoming games that are already booked within single
venue.
Use content that is grammatically correct, contextual, has consistent
1 voice and tone
3
2 Broken widget displays label and button by its coding name. This signi es
untested and not very dependable journeys from the app provider.

3 Various facilities available on the venue are displayed in the form of

buttons - although not clickable, using more than 5 colours.
Use buttons only when an action is associated with them and do not use
2 Scroll more than 5 colours in a single screen

Page 15
Usability evaluation & insights (6 of 10)

Select game

Issues and recommendations

Listing sports rooms di ers depending on the game user selects. i.e. if
badminton is selected available sports rooms are displayed in the
1 same page and if football is selected available courts are displayed in a
modal window.
Maintain consistent behaviour. Use deferred create control to display
available rooms for di erent games

1 Limited help and poor content: It is not evident what “Football 5 a side
pitch means. No help is provided to nd its referential sense either.
And in few other places, sentences do not adhere to one case and
voice.
Assist with help and documentation. Here, use tappable tooltip
controls to provide help

2 In the previous page, book hourly appears to be a command button at

its initial sight. But when user taps on it a drawer of options pop up.
2 This is an uncalled for behaviour and does not match with users
expectations

Page 16
Usability evaluation & insights (7 of 10)

Add to cart: Book a sports room Issues and recommendations

Cart is used to match a real world shopping experience of tangible products.

Firstly, Playtm doesn’t include multiple products to shop (it only allows multiple
playrooms to be booked at once) it still continues to utilise cart synonym.
Instead of using a cart synonym, group booking can be simulated using list
builder or standard selection labels. Once a user selects a playroom the selection
remains and a sticky label displays an overview of number of playrooms booked
and the total bill.

As user can’t add multiple playrooms from di erent games before a cart is
refreshed, the use of “Add to cart” is unnecessary here. Even without it, a user
can select list of courts for a single sports type and click on next to navigate to
the review page

1 1 Cart is not visible in this page. The page doesn’t display the number of playrooms
already added to the cart. After selecting sports rooms if user clicks on “add to
cart” the selections vanish. Leaving user confused if the selected playrooms are
kept away for billing or are no longer available for booking
Use list builder or standard selection label that displays selection and the total
2 bill persistently

2 The price is underlined here, making it appear as if it can be clicked upon for
seeing details. The underline is used here for building emphasis and is resulting
in bad a ordance
Build a de nite content graphic language, and use underline not for creating
emphasis but only to represent clickable nature

Page 17
Usability evaluation & insights (8 of 10)

Review cart
Issues and recommendations

This is a seemingly bulky page. Here user reviews the booking (a.k.a
cart here) before making the payment. Long pages come out to be o
loading and users could lose track of important information soon and
could remain unbolted or unconverted.
This page should persuade user to book quickly without being
1 disturbed with unnecessary or secondary information

1 Although all the playrooms are of same cost and have exactly same
amenities they are listed one under another. It increases the page
length unnecessarily
If the playrooms are identical, try including quantity as a eld and
display playroom numbers selected

During the course of booking, if a court becomes unavailable, it doesn’t

clearly mention which playroom is unavailable anymore, it simply
mentions you cannot book slots that are unavailable. This is not very
helpful as an error message and user has to move back and forth
multiple times to identify, diagnose and continue
A good error message displays the current state, error information and
clearer steps to be taken by user to rectify error

2 2 Policy details such as reschedule, cancel, club are listed here as open
elements. These not only increase the page length unnecessarily but
Scroll
also slow down user before making payment.

Page 18
Usability evaluation & insights (9 of 10)

Make payment

Issues and recommendations

With so many available options, it must be di cult for user to

decide on the mode of payment.
Help user make a decision: reduce the options or build hierarchy
using favourites, last used, frequently used or with o ers.

After a successful payment, it directly navigates to the booking

details page with an overlay window that displays “you earned
karma”. Leaves user confused if the payment is successful and
the playrooms are booked.
Utilise laddering, display a success message, make user feel
accomplished of his e orts and then introduce him to rewards.

It doesn’t explain what karma points are and how can user reap
bene ts by collecting it. This is a underacheived attempt to
utilise gaming fun. Explain the need and importance of it, build
adequate competition and lead into immersion.
After
Payment
Closing
window

Page 19
Usability evaluation & insights (10 of 10)

Navigation scheme: Away from the immediate journey

Issues and recommendations

Inconsistent experience is untrusted for.

In pro le page, hamburger menu is positioned on the top left
side. A full page of menu items is listed by tapping on it.
In policy page, hamburger menu is positioned on the top right
side of the page. A drawer with 5 to 6 options is displayed by
tapping on it.

Page 20
Optimised user journey

In uence by existing
leaderboard status or
o ers and invites. Use No
time gap and fun
missing motivations

No Find available Check for

START Select a venue
venue amenities
Join someone Can someone
else’s game join the game?

Yes
Find o ers
Get invites and and pay
manage approval

Go to venue Verify booking

STOP and play game details
Share experience
Share details with
approved invites

Page 21
Next steps

Coneptualise
Validate
recommendations

Towards more
Test usability &
Develop & test customer driven
iterate
solution

Page 22