1. A LEADING GAME APP – CASE STUDY
TINTON ABRAHAM15 JULY 2015
EXPERIENCE TRANSFORMATION

2. CHALLENGE
A leading gaming space is in the process of improving gaming experience of their online poker game
by providing a seamless experience for their clients. They have identified two major flows which
require improvement on UX side based on user feedbacks.
Flow1 - Signing up for a new account.
Flow 2 - Making a deposit.
Scope - Recommend a better UX design that improves these flows and create low-fidelity mock up
detailing the new approach.

3. MY ROLE
• Lead the project, talk to the customers to better understand their scenarios and explain the same to
my team.
• Understand and evaluate the existing pain points.
• Digest data from the usability study and think about how to translate it into concrete user interface
design improvements.
• Create and deliver high level wireframes of the task-flows in scope.

4. ASSUMPTIONS
• All Devices
• Test device - Samsung 5” Screen with Android Os
• Assuming that the initial loading time is not because of the UI element loading
• No technological constraints

5. HEURISTICS
SCOPE OF ANALYSIS
• Consistency
• Error prevention
• Feedback
• User control and freedom
• Match to user's real world
• Recognizable
• Flexibility and efficiency of use
• Aesthetics and minimalistic design
• Help recognize, diagnose, recover from errors
• Help and documentation
Each of the screens from the existing app will be evaluated against the above mentioned heuristic
checklist.

6. HEURISTICS
Splash Screen Sign in
Severity: Low
Heuristics Violated: Consistency and
standards
Problem Area: Device orientation
……………………………………………
Problem Description:
1. It is observed that the screen is
switching between landscape and
portrait modes frequently
……………………………………………
Recommendation:
1. Since it observed that the game is
in landscape mode, the splash as
well as the sign in screens to be in
landscape mode.
Severity: Medium
Heuristics Violated: Consistency and
standards, Recognition rather than
recall, Aesthetic and minimalist design
Problem Area: Labelling,
Presentation, Multiple focus area
……………………………………………
Problem Description:
1. On text box focus labelling
disappears
2. No specific point of entry since both
log in and register buttons are
having equal highlights
……………………………………………
Recommendation:
1. Proper labelling
2. Since Login is the most frequently
used item, prioritize using visual
elements
1
2
1

7. HEURISTICS
Register Register
Severity: Medium
Heuristics Violated: Consistency and
standards, Recognition rather than
recall, Match between system and the
real world, Flexibility and efficiency of
use
Problem Area: Layout and spacing,
Multiple selection for DOB,
Redundancy
……………………………………………
Problem Description:
1. Tap-able area is smaller than
recommended
2. DOB selection reduces efficiency of
use
3. Proper information classification
……………………………………………
Recommendation:
1. Follow consistency and standards
2. Use date picker
3. Do categorization based on IA
Severity: High
Heuristics Violated: Same as
previous
Problem Area: Content of Email
textbox hidden
……………………………………………
Problem Description:
1. Content of Email textbox hidden
due to the keypad
……………………………………………
Recommendation:
1. Use of push pull functionality to
keep the elements floating over
keypad and scrollable screens
1
2
3
1

8. HEURISTICS
Register Register stage 2
Severity: Medium
Heuristics Violated: Recognition
rather than recall, Flexibility and
efficiency of use
Design Pros: Apt error messages
Problem Area: No indication of
mandatory fields,
……………………………………………
Problem Description:
1. Cannot identify Mandatory fields
2. Validation only after form
submission
……………………………………………
Recommendation:
1. Mark Mandatory fields
2. Inline validation
Severity: Medium
Heuristics Violated: Consistency and
standards, Match between system and
the real world
Problem Area: Cancel button not
visible and functionality cannot be
recognized unless tapped
……………………………………………
Problem Description:
1. Cancel button not visible and
functionality cannot be recognized
unless tapped
2. Consistency not maintained with
the placement of back and next
button
……………………………………………
Recommendation:
1. Define single design pattern for
similar functionalities
1
2
1
2

9. HEURISTICS
Successful registration Payment Methods
Severity: Medium
Heuristics Violated: Visibility of
system status , Consistency and
standards, Aesthetic and minimalist
design
Problem Area: System status not
appropriately placed, Layout, Too much
information
……………………………………………
Problem Description:
1. Cannot identify System status
2. Varying button sizes
3. Unnecessary information displayed
……………………………………………
Recommendation:
1. Define design pattern for feedbacks
2. Follow consistency and standards
3. Information hierarchy to be
maintained
Severity: High
Heuristics Violated: User control and
freedom,
Problem Area: User is navigated to a
completely different application
……………………………………………
Problem Description:
1. no emergency exit to leave the
unwanted state
……………………………………………
Recommendation:
1. Payment methods to be included
within the app.
1
2
1
3

10. HEURISTICS
Capturing card details Capturing card details
Severity: None
Heuristics Violated: None
Design Pros: Easy and simple
selection methods for user
…………………………………………
Problem Description:
None
……………………………………………
Recommendation:
None
Severity: Medium
Heuristics Violated: Recognition
rather than recall,
Problem Area: Long and continuous
credit card numbers
…………………………………………
Problem Description:
Longer numbers are difficult to validate
…………………………………………
Recommendation:
1. Chunking of credit card number will
allow user to enter more efficiently
1

11. HEURISTICS
Capturing card details Capturing card details
Severity: None
Heuristics Violated: None
Design Pros: Form level error
validation
…………………………………………
Problem Description:
None
……………………………………………
Recommendation:
None
Severity: Low
Heuristics Violated: Aesthetic and
minimalist design
Problem Area: Content and
presentation
…………………………………………
Problem Description:
1. Too much content to read and
interpret
…………………………………………
Recommendation:
1. Simplify
1

12. HEURISTICS
Register
Severity:Low
Heuristics Violated: Aesthetic and
minimalist design
Problem Area: Content and
presentation
……………………………………………
Problem Description:
1. Too much content to read and
interpret
2. No Heading, sub heading or lead
summaries
……………………………………………
Recommendation:
1. Simplify
2. Provide a short and crisp summary
1

13. EXISTING TASK FLOW Landing
Page
Log in Register
Success
Enter Personal Details
Register Username
and Password
Enter Address
Play Now
Deposit Now
Select Payment
Method
Enter Denomination
Enter Card Details
Success
Yes
Yes
No
No
Success
No
YesHome
Screen
Cash Tournament
EXTERNAL
Further
Flow

14. USER TESTING AND INTERVIEWS
4 Participants (Mobile gamers)
Test Scope – Registration and Deposit with the current app
Scenario given to the users
• You have installed the poker app. Register yourself to create an account.
• Make a deposit of 20$ to your account with the following official test Visa card: 4444333322221111
• Avail any one bonus offer
Ideally 8-10 participants are required for identifying 80 to 85% of usability issues.

15. USER TESTING AND INTERVIEWS - FINDINGS
1. Most of the users mentioned about higher loading
time
2. Users unaware of exit/cancel button
3. Keypad overlapped the content
4. Prev, Next & Done button on the keypad went
unnoticed and used
5. User were repeatedly using the device back button
to close the keypad
6. Users took considerable time to get registered and
1 of them quit the process in between
7. Reluctant to continue in a payment gateway
outside of the app.
8. Users expected selection of amount before
selecting payment options
9. Users were not able to understand the bonus offer
description and 3 of them selected “No thanks”
10. Users mentioned about switching of screen
orientation from portrait to landscape.
11. Post usability test, users were asked the reason for
the failed transaction and none of them could recall
the reason.

16. TASK PRIORITIZATION
Frequency
Importance
Low
Low
High
High
Log In
Register
Deposit
Play
Profile
Setting

17. REVISED TASK FLOW Landing
Page
Log in Register
Success
Enter Personal Details
Register username
password, Email,
Phone and Dob
Enter Address
Deposit Now
Select Payment
Method
Enter Denomination
Enter Card Details
Success
Yes
Yes
No
No
Success
No
Yes
Home
Screen
Cash Tournament
EXTERNAL
Further
Flow
Profile
Above 18
and T&C
Yes
No

18. ADVANTAGES OF NEW FLOW
• Flow based on Task prioritization
• Single home screen navigation
• Sequential and optimized task flow
• Optimized number of user inputs
• Fewer registration steps
• Reduced number of screens

19. REDESIGNING THE REGISTRATION FLOW

20. NAPKIN WIREFRAMES
I started with napkin wireframing
as it is a great method for early
exploration of the “big ideas.”
They’re
• Quicker, easier to create and
modify
• More encouraging of feedback
• Test for usability issues

21. LOW-FI WIREFRAMES
• Configured in landscape orientation
throughout as the game is played in this
configuration.
• Grouping of elements using Gestalt Principle.
• Setting Priority - Log in given high priority
Login

22. LOW-FI WIREFRAMES
• Confirming 18 years of age is the prime
criteria for registering and continuing further.
Age Confirmation

23. LOW-FI WIREFRAMES
• Only limited number of inputs is taken at first
from the user.This makes him more engaging.
• Also reduced the time taken for completing
registration process.
Registration

24. LOW-FI WIREFRAMES
• More friendly way to enter text and navigate to
the next fields.
Registration - Entering text
• Navigation using Next and Prev

25. LOW-FI WIREFRAMES
• Inline validation of errors
• Error validation adjacent to each fields
Registration - Inline Validation

26. LOW-FI WIREFRAMES
• Configured in landscape orientation
throughout as the game is played in this
configuration.
• Grouping of elements using Gestalt Principle.
• Setting Priority - Log in given high priority
Registration - Chunking
Chunking - recommended while capturing credit card number as well in the payment section.

27. LOW-FI WIREFRAMES
• Recommending the use of date picker for
easy selection of dates
Registration - Date Selection

28. LOW-FI WIREFRAMES
• Personalized confirmation for each user
Registration - Success

29. LOW-FI WIREFRAMES
• Cash deposite option positioned to a more
prominent area
Home Page

30. LOW-FI WIREFRAMES
• Profile Strength meter - gauges how robust
the user profile is.
• Drives user to complete to progress to 100%
profile completion.
Profile
Profile Strength meter -This feature is designed to get the most out of your members from the get go and
direct them to wherever you deem important straight after registration

31. LOW-FI WIREFRAMES
• Better form design to capture all personal
information from the user
• Default recommendation of first name, last
name, country etc.from the phone memory –
Thus minimizing user inputs.
Profile – Entering Text

32. LOW-FI WIREFRAMES
• Configured in landscape orientation
throughout as the game is played in this
configuration.
• Grouping of elements using Gestalt Principle.
• Setting Priority - Log in given high priority
Profile - Completeness

33. THE IMPACT
• Our Recommendations were very well received and appreciated by the client.
• They were highly impressed with our findings and the processes that we followed in coming up with
the better UX recommendations for their app.
• We received 2 more projects from the same client in the same financial year.

34. FEEDBACKS
“Hi Tinton,
Thanks for all the great work!!”
Lloyd Melnick | Director of Social Gaming| Rational Group
“Great to see this response !!! Well done team ....”
Karolina Wonchala | Design Lead | Rational Group
Dear Tinton and team,
It’s completely for all the hard work “you folks” have done!
“Thank You”
Emma Tregoning | Senior Digital Designer (Contract)| Rational Group
“Hi Tinton,
We received final approval today, so it’s confirmed that no further work is needed
on the prototype. Thanks for all the great work!!
Kelly Bennett | HR Business Partner | Rational Group

35. THANK YOU