Hi Dog Gaming Platform
Gaming UI/UX Design · Windows Desktop Client Application
The Skins Factory designed the UI/UX for Hi Dog’s Windows desktop gaming client application, transforming a series of low-fidelity wireframes into an immersive platform for discovering games, joining matches, interacting with other players, creating private rooms, and managing in-game achievements.
The Challenge
Bringing an entire gaming ecosystem into one client
The application had to support game discovery, match preparation, player profiles, chat, invitations, groups, private rooms, billing, and in-game currency without feeling fragmented or difficult to navigate. Each area needed its own purpose and energy while still feeling like part of one cohesive desktop gaming experience.
Our Approach
Designing around discovery, competition, and community
We created a restrained charcoal foundation that allowed Hi Dog’s colorful avatars, game artwork, banners, and interactive states to command attention. The interface established clear paths between the lobby, game library, match experience, social features, and player account areas, while distinctive progress indicators, invitations, panels, and room controls kept fast-moving actions easy to understand.
Initial Comp Layouts
Our design team was given low fidelity wireframes, which served as a guide for the content layout. Below, you will find a glimpse of some of the initial layouts we created. These layouts share a common foundation but also incorporate subtle variations. From the onset, we had a clear vision of the design language we wanted to pursue. We populated the comps with some content to show our intent.
Login
We designed a simple, sleek login modal, with a deep charcoal grey that perfectly compliments the orange of their brand identity.
The Lobby Screen
With it’s dark, neutral design foundation and a combination of vibrant colors and ample white space, the design creates a visually stimulating environment. The intuitive layout ensures that gamers can navigate the space effortlessly.
The vibrant colors used in the Lobby were carefully chosen to create a lively, fun atmosphere. Bold hues such as electric blue, fiery orange, and a cool, mint green are strategically incorporated into the layout. These pops of color add energy and excitement, making the Lobby an inviting and dynamic area.
The Main Lobby
Notification Dropdown Menu
Settings Dropdown Menu
Match Page + More Games + Chat Windows
Match Page
We stuck fairly close to the original wireframe layout while implementing visual embellishments and subtle user experience tweaks. The wireframes had an old school time ticker, but we opted for a more modern progress ring. We came up with the idea of including a 2-minute warning alert which changes the color of the progress track to let players know the games are about to begin.
Match Page w/activated 2-minute warning progress bar.
More Games
This is the main hub for the game library. A variety of games are available here for players to choose from.
Chat Windows
The original wireframes had a simple Room Invitation card. We brought in the dynamic design we created for the Match Page.
Personal Center + Group Screens
The Personal Center serves as a player's profile, showcasing various gamification attributes such as badges, in-game monetary assets, and records set by the player. It is a comprehensive screen that provides users with a quick overview of their achievements and progress within the application. Beyond the individual user experience, the Personal Center also promotes community building within the application via the Group screen. Users can create or join a Group, further enhancing the community aspect of the application.
Personal Center
Group
Private Room + Bill Total + Time Dropdown
Private Room
Players can access their Private Room, join existing rooms and pay their bill.
The Bill Total is a slide-up panel. Given how little information there is, we felt that by having it focused and isolated on the bottom of the screen, it would be less distracting to view.
Date Picker modal.
Date Picker modal showing multiple weeks selected.
Create Room + Redeem
Create Room
We used a gradient from top to the bottom where each horizontal section shifts color. We did this by creating a gradient and sampling the color incrementally.
Redeem
This is where players will be able to redeem and exchange in-game currencies.
Have a project in mind? Let's talk.
Thank you for reaching out.
We will be in touch within one business day.