Best Hand Played Mobile App

Services: Product Design, UX / UI Design, Visual Design

Recording and remembering past play is essential to a poker player’s success. However, there are so many factors (position, initial raiser, stack sizes, bet sizes, pot sizes, continuing action, the board, etc), that it is often easy to forget, or make a mistake. Additionally, the only current method of recording hand play is long form typing in a notes app. This inefficiency and headache often leads players to ‘record later’ which often results in user error. This is why we created Best Hand Played; a poker simulator that allows players to record live poker play in real time with a more intuitive, dynamic interface. We did A-Z on this app and in the pieces below focus on the Interaction Design, Information Architecture, UX and UI design and the iterative process we used to create an intuitive, functional, beautiful product that will alleviate stress in an already high stake game.

Best Hand Played Logo.

Initial Wireframing & Flow Chart Notes

The initial wireframing solidified two interaction design goals: 1) minimize the number of clicks and 2) have an intuitive & familiar game flow and interface. Wireframing helped understand game flow, user actions, inputs, and computer checks & responses to user action at every touch point.

Preflop UX was challenging, and the chart above (page 3) illustrates the complexity of the UX decisions. Our first iteration of preflop play (‘select first aggressor, and then player that responded’) was inadequate for all edge cases. We needed to accommodate limped pots, multi-action pots, heads-up pots and any combination inbetween; all while keeping the lowest number of clicks. The table shows three cases, and three Interaction designs with different UI methods. We created pros and cons and even mocked through each method with each hand to calculate the number of clicks. In the end we chose the method that was both the most consistent and the most intuitive even though it is not always the least amount of clicks

Visual Design & First Mockups

Four phones each with a different screen in the app. These were some of the first mockups created in the design process

Next we started the visual design. We wanted to get a ‘feel’ for the app. We knew our demographic, and since we were targeting newer casino players, we wanted the app to feel clean, friendly and approachable; our goal is trying to de-stress your game. In creating our assets (logo, palate, icon, typography, layout, etc.) we didn’t want to be too bright (gradients, florescent colors); our clients don’t want to draw attention to their recording at the table as it makes you look like a more experienced pro. Primary colors were too loud, but a variation on red and black were necessary because of the suits. Green was discussed, but red and green draw too close to a Christmas combination; in the end variations on red, blue, and gray scale were chosen because they compliment, feel familiar, and provide a clean palate.

Building a Two Sided App

In creating the initial mockups, it became clear that there were two sides to Best Hand Played: the simulator side, and the administrative account side. Because the information structure (sequential vs hierarchical), as well as the purpose, were different, we separated the two experiences, understood each independent unit, and then facilitated the integration.

Hand Simulation

We started with the Simulator, as it was the main functionality of the app. Once we developed the primary visual design and the main assets, we decided to create the interaction through the flop, as this stage encompassed the primary unit (unique / non-repeating) of the simulator. Next, we completed a high fidelity prototype with a single demo hand to simulate all touch points. The video walk through can be viewed above.

Admin Screens

For the MVP, the admin screens were all necessary parts of the UX that did not intersect with the Simulator schema; the Admin Schema was interacted with before, or after the simulator was complete. These screens included logins, primary home, session home, past sessions or hands, and input screens for new information that would affect the simulator.

Simulation Wireframes & Interaction Design

The twenty screens below illustrate the User Interaction through the Flop. Each user action is critical for advancement in the simulation, and the subsequent screens show the app’s response to various input.

UX Design. Images of varying pages of the website on a computer, tablet and phone.

User Testing & Modifying UI

After creating both the high and low fidelity prototypes, we utilized User Testing to see if our key demographic was able to seamlessly interact with our design. The process was illuminating and lead to many minor modifications. Two of the larger changes to the UI as a result of the user testing are discussed in detail below.

Admin & Account Interaction Design

After the high fidelity mock up of the simulator was complete, we transitioned to the admin and account experience. While visual design utilized the established assets and app ‘feel’, the interaction design was more complicated.

Original mockups and wireframing for Admin Screens and Account portion of app.

Information Architecture Notes & Edits

Once we created the admin mockups, navigational options of the nonlinear app created a unique obstacle. Because the admin and account was primarily hierarchical, but combined sequential information structure as well, the user interaction design was more challenging, and many more questions arouse around siloing information, and which features should be included in the MVP.

Admin & Account Redesign

The questions on user interaction, necessary features, and information architecture allowed us to design a more intuitive experience, cleaner UX / UI, with less barriers to entry and a higher value proposition.

Revised mockups and wireframing for Admin Screens and Account portion of app.

Next Steps...

The complexity of this app and the interaction with its users has been fascinating. Next, we are working to wire-up a complete high-fidelity prototype including admin screens. Additionally some recent user testing provided insight into grouping specific actions within the Simulator instead of a complete linear time progression that mirrors live play. We are excited to get this app into players’ hands and see if it will facilitate their Best Hand Played.