I'm currently working on Ubisoft Connect, designing the future of the games library on the upcoming desktop app. The current Ubisoft Connect desktop app sees 10 Million monthly users. My work is currently under NDA, so I can't show most of the designs I've been working on; however, I can discuss some of the work I've completed on the game tiles, as we've released this in our open beta.
The project's initial goal was to redesign the game library to improve the user experience and to utilise our new design system already in place on the PC and console in-game overlay.
Our user research showed that the game tiles' design was essential to the overall user experience. We reviewed the library structure and game tiles on our desktop and competitor apps.
Our research revealed many pain points, but the main pain points discovered were...
Researching the current design of our game tiles, I found that the design was restricted by the assets used. The assets came from the vertical rectangular shape of the physical game case box art. Using an asset designed for a physical medium wasn’t necessarily the best asset to use in this digital format.
I positively reframed the main pain points using the How Might We method.
The insight gathered from the research phase helped me to define the challenge differently.
Redesign the game tile and asset to create a design optimised for desktop devices where players can quickly launch and manage their games from the library.
Our north star design principles were that the game tiles had to be...
We took the HMWs collected in the research phase and came up with solutions for each.
We conducted multiple internal reviews and three user tests on the library structure and design of the game tiles to arrive at our current iteration.
The game tile asset’s aspect ratio is 16:9; I chose this aspect ratio so that the game tiles could fill the library using fewer but larger columns, allowing us to utilise our space more efficiently. I standardised the game logo designs to be white only to ensure they are consistent across tiles and easy to read.
Here are some of the leading cases for the game tiles. Firstly, we have the basic installation states, Installed, Not Installed or Update Available. We also have a case for a recently added game or if it's running on the user's machine.
The games also have downloading states for regular and progressive downloads where the player can play part of the game before the entire download is complete. Due to the construction of the game asset, we can darken the background image but keep the logo entirely white.
The games can also have an inactive state; often, this is because the user owned a game through the Ubisoft+ subscription service, which has since expired.
The friends playing component displays any of the users' friends who are currently playing this game. We show a maximum of three avatars before an overflow state; on click, a modal shows all friends who have played this game.
The view of the game tiles can be changed from the default tile view to a list view to show more games in the available space.
The library has three game tile sections: Installed, Not Installed, and Inactive. We also have a toolbar to change the view, sort and filter options in the top-right of the page.
I created a master component in Figma that we use across all design documentation. When I edit this master component, all the children are automatically updated, saving us a lot of time when updating documentation.