A leading game app – UX case study
8 likes1,518 views
The document details a case study on enhancing the user experience of a leading poker app by addressing critical pain points identified through user feedback, mainly targeting the registration and deposit processes. Recommendations include improvements in design consistency, error prevention, and usability enhancements, such as clearer labelling and streamlined task flows, implemented through low-fidelity wireframes. The client was reportedly satisfied with the findings, leading to additional project engagement with the team.
A leading game app – UX case study
- 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.
- 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