Back to works

Transforming the online gaming transaction experience

Results

Impact

  • Enhanced user satisfaction with improved usability and intuitive design.

  • Decreased support inquiries by streamlining workflows and reducing friction points.

  • Accelerated deposit and withdrawal processes, making transactions smoother and more efficient.

  • Improved user engagement by creating a more seamless and enjoyable experience.

Problem statement

Bingocams’ community members experienced challenges in obtaining a clear, organized overview of their transactions. Although the transaction processes themselves were functional, a lack of clear information led to user confusion, increased customer support inquiries, and, potentially, member loss.

Tools

  • Sketch
  • Zeplin
  • Abstract
  • Whimsical
  • Usertesting.com
  • BootstrapVue
  • Material Icons
  • Jira

Role

  • User research & analysis
  • UX and UI redesign
  • Component creation
  • Usability testing

Timeline

  • 3X2 weeks sprints

Project overview

Confusing transaction processes led to frequent support requests. This project focused on deposits and withdrawals, improved transaction flows, and enhanced clarity of transaction history, reducing support needs and boosting user satisfaction.

Problem discovery

  • Reviewed insights from the customer success team to understand recurring user concerns.

  • To uncover hidden pain points and validate customer success feedback, I conducted usability tests with 5 new and 5 returning users via UserTesting.com, focusing on deposits, withdrawals, and navigation.

Users' pain points before the redesign

Before state of the transaction overview

Solution

To address these challenges, I proposed a redesign of the transactions page. The updated design was intended to provide a more organized, accessible, and informative transaction experience that empowered users to track their activity confidently and independently.

Wireframes

I created wireframes to outline key layout variations for the transaction overview page and gathered user feedback on the concepts.

Wiewframe

High-fidelity design

Once the direction was decided, I developed high-fidelity prototypes that emphasized transaction status and clear labels, covering all responsive breakpoints for a seamless experience across screen sizes.

Error handeling and empty states

I designed mockups for errors, empty states, and other edge cases, collaborating closely with the development team.

Unhappy flows

Usability testing

I set up usability tests on UserTesting.com to gather feedback from users and refine the high-fidelity prototypes. The most important insights from were: - Allowing users to save payment methods saves time and boosts satisfaction. - Toast messages offer sufficient feedback, while dialog boxes are distracting and unnecessary.

Feedback from user

Design system

To ensure consistency, I designed the transaction card components for the shared library and created detailed guidelines to support development and QA teams.

Transaction history component

But UX is never done…

This project was completed four years ago, and looking back, here are a few areas I’d love to improve today:

  • Measure system usability with a usability scale.

  • Test for accessibility across different devices and user groups.

  • Improve micro-interactions, especially during loading states.

  • Conduct more frequent usability testing throughout the product lifecycle.

  • Enhance assisted onboarding to help all users quickly understand the updated transaction processes.