LOBBY TILES

BetMGM Poker App

Client: BetMGM

Role: Research, UX, UI & Product Design

Product: Native App

Challenge: The tiles (cards) used in BetMGM’s game lobbies were cluttered, difficult to navigate & aesthetically unappealing, making it hard for users to find important information & ultimately select a game.

Solution: Simplifying game selection with updated designs informed by extensive research, making them easy to understand & aesthetically pleasing.

Games Lobby tiles

Before this project, BetMGM’s game lobby tiles were cluttered & overwhelming (left). They featured confusing, unclear icons, lacked hierarchy & did not align with the dark mode used throughout the app.

Through extensive research into our user needs, best practice in card (tile) designs & accessibility guidelines, I created a clearer, cleaner card design with a well-defined hierarchy. The new design includes images to help with quick identification of games & fits seamlessly with the existing dark mode used by the app.

Research & User Testing

I conducted comprehensive research into competitors, non-competitors & industry leaders, as well as best practices in card design.

We also carried out thorough user testing to determine the necessary data points for game selection. A significant portion of this testing was conducted on the UserTesting.com platform, with additional ad-hoc in-person testing within the office.

Below is a clip of a user participating in one of our tests:

How user testing affected designs

Once our desired number of users had completed the test, we compiled the results & used this data to influence the design of the tiles.

On the left, you can see the results of the card-sorting test for the tournament tiles. On the right, we decided to place some data points into pills. The determination of which data points went into pills, as well as their hierarchy, was influenced by the results of the user testing.

Game tile designs

There are five game lobbies in the BetMGM app: Tournaments, Sit & Go, Spins, Fast Forward, & Cash Games.

I began by wireframing the tournament tile, as tournament games have the most data points. The tile was cluttered & the most in need of a design rework.

While designing the wireframes, I took into account the data hierarchy established through user testing. On the left, you can see the worst-case scenario for tournaments, displaying the largest possible combination of data points on a tile. It's extremely rare for a tile to include all of these data points. On the right is a tile featuring actual data from the app, representing a more typical layout.

Tourneys Wireframe - Worst Case: Largest possible combination of data points

Below, I have applied a new UI to a typical tournament tile, aligning it with the design of the rest of the app.

Status on designs

The user testing identified the status as one of the most important data points.

The status is colour-coded for quick identification. Below is a standard tile showing each status. In addition to the status panel on the bottom left, each tile has a matching coloured stroke to aid identification..

tiles for different game types designs

All game types: Wireframes

Once I had finalised the designs for the tournament lobbies, I designed wireframes for the four other game types.

All game types: designs

I then applied the new UI to each game type. In the Cash Games lobby, BetMGM displays both Cash Games & Fast Forward tiles, so I gave these tiles colour-coded game titles at the top left.

game types in situ

Below, the updated Cash Games, Sit & Go & Spins tiles can be seen in their respective lobbies. On the left of each image is the lobby with the old tile design & on the right is the new tile design.

Before the redesign, there was no design consistency across the lobbies. Each lobby had very different tile designs, creating an inconsistent experience for users. When redesigning the tiles, I ensured a consistent look for the game tiles throughout the app, resulting in a cohesive user experience.

Cash Games Tiles in the games lobby - before & after

Sit & Go Tiles in the games lobby - before & after

Spins Tiles in the games lobby - before & after

Multi language

BetMGM is a global company & the app is available in multiple languages. I worked with a translator to ensure that the designs would be effective across all markets. Some words are poker terms and therefore should not be translated.

German tile showing the largest possible combination of data points

Greek tile showing the largest possible combination of data points

Tickets

We wanted to clearly display in the game lobby which games the user already has a ticket for. The existing app did not have a way to show this. To make these special tiles stand out, they were designed with a ticket shape, a gold outline & gold title text.

Ticket in situ

The special ticket tile can be seen on the Tournament & Cash Games lobbies.

Recently Played

Before the tile redesign, the 'Recently Played' section used the old game tiles, which lacked consistency. Some tiles, like those for tournaments, couldn't be included due to their shape, while others, like the cash game tiles, looked out of place because they were designed for light mode but the app used dark mode.

Additionally, not all tiles were labeled with their game type, making it difficult for users to quickly identify which category a tile belonged to.

During the redesign, I ensured a consistent look across all tiles & included clear labels in the 'Recently Played' section for easy identification.

On the standard tiles (left), we wanted to provide space for the data points, so we made them as wide as possible within the design. The recently played tiles (right) needed to fit within a carousel, so their width was reduced, & the layout was adjusted to accommodate the narrower style.

Labels indicating game type were added to all game tiles.