UX
UI
Product
Web Design
Branding
aBOUT THE LOBBY
The arcade games lobby is a collection of in-house produced arcade games, accessible to operators through an iframe. The target users of the lobby are slot players and adults who used to play arcade games in the 80s and 90s. These games are a blend of classic old games with the thrill of a slot machine.
Similar to the old arcade machine, the lobby will display a leaderboard of winners for the different games available. Additionally, players will have the option to choose their favorite games and save them to a separate section of the lobby.
The lobby does not require any registration; the only requirement to identify the player is to choose a username or use the one automatically provided by the system.
In this project, my role encompassed all aspects of design, including user flow, wireframes, icons, design system, prototyping and testing, and branding of the lobby's look and feel.
The Homepage
The homepage of the lobby has been designed with a mobile-first approach, as the majority of the players use mobile devices rather than desktops.
The top section features the "recently played games" in a horizontal scroll carousel. Once a player is identified and selects their preferred games, this section will change to "your favorite games". This separates the recent/favorite games from the rest, making it easy for the player to access and play them with just one click.
The bottom section of the screen features a sticky bottom menu with links to home, leaderboard, promotions, FAQ, and My Profile section.
The central section of the homepage consists of a grid of game thumbnails, highlighting new releases, followed by a streaming video of a game, and finally, the leaderboard.
The Thumbnails
The lobby thumbnails design has been created ad-hoc for the type of game, with all elements following the same style reminiscent of arcade machine buttons.
The thumbnail indicates interaction points and information areas.
The interaction points include:
- Favorite icon: Clicking on the heart will add the game to the favorites section.
- Info icon: Clicking on the info icon will open a modal with information and a video about the game.
The information section:
- Top left corner: This area will display the label of the game, which can be "New," "Most Played," and so on.
- Top center: Icon representing the category of the game.
- Bottom left corner: Name of the game.
The Leaderboard
The Leaderboard is an important component of the page that needs to be highlighted.
It serves to inform players about their progress compared to other players in a specific game, creating engagement by increasing competition between them and ultimately leading to more playing sessions.
The top part of the leaderboard is a scrolling selector of the games, and the content of the leaderboard will change accordingly. On the far right, there is a link to a guide on how it works and the option to expand it to full view.
The leaderboard can be shown on a daily, weekly, or monthly basis.
The username of the logged-in player will be displayed in a green row sandwiched between the players before and after them, just after the top 3 players.
Change Username
The Change Username modal has been designed to guide the player through the process of changing their username while avoiding errors and frustration.
All the username requirements are displayed on the first screen.
When a requirement has not been met, a warning icon appears, and the color orange indicates what is missing.
The save button will be inactive until all the requirements have been met, and the input field will turn green with a validation icon.
The final screen confirms the username update and presents a button to go back to the lobby.
