overview A redesign of the ubisoft connect games library
context
games library redesign
I'm currently working on Ubisoft Connect, designing the future of the games library on the upcoming desktop app. 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.
ubisoft connect pc branding [animation credit: Benoit Masse]
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.
current ubisoft connect desktop app
Research - Designing the right thing
game tile benchmarking
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.
I examined...
benchmarked companies
main pain points discovered
Our research revealed many pain points, but the main pain points discovered were...
empty library
Our users have between 3 and 20 games in their library on average; the library can feel empty at the lower end of the scale because the game tiles take up so little space.
game title text
The tiles aren’t wide enough to correctly display the game title text, which often breaks into three lines.
Covered logo
The Ubisoft+ tag and downloading information on the game asset can cover the game logo, making it hard to read.
no quick launch
Players can’t launch the game from the library tile; they must go to the game page to launch or download it.
Assets
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.
digital game tile
physical game case
positively reframing pain points
I positively reframed the main pain points using the How Might We method.
hmw (how might we)
problem definition
The Challenge
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.
North Star design principles
Our north star design principles were that the game tiles had to be...
The game tile should allow players to quickly launch or manage a game easily.
Players’ game collection is something that they perceive as sacred, and it needs to be respected and protected.
The game tile should offer different levels of organisation and triage of games.
The game library tiles must work with our focus state for controllers and keyboard navigation and adhere to WCAG guidelines.
develop - Designing the thing right
How might we ideation
We took the HMWs collected in the research phase and came up with solutions for each.
ideation
game tile anatomy
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.
game tile anatomy
game asset
Designed for desktop screens with a readable logo.
Game title
The title has more space for characters due to the new horizontal game asset.
Icon buttons
The icon button on the left can be used to quick launch, install and update your game. The icon button on the right opens a context menu for additional options.
Additional info
The additional info text can be used to display download info, sorting info and error messages.
Tags
The tags can be used to highlight game tiles because they have an update, are recently added, recently downloaded or are currently running etc.
Ubisoft+ tag
The space in the top-left corner is dedicated to showing a Ubisoft+ tag which indicates that the game is owned through the Ubisoft+ subscription.
Social component
The space in the top-right corner is dedicated to showing whether any of your close friends are currently playing to help the player decide what game they’d like to play.
Download bar
The download bar has a dedicated section at the bottom of the game tile.
game asset anatomy
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.
game asset anatomy
The logos sit inside a 21:9 container centred on the background image that takes up 50% of the background image's width; this ensures that the space at the top and bottom of the game tile is free to be used by other elements without fear of covering the game logo.
cases
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.
Game installation state
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.
downloading
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.
Inactive
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.
friends playing
list view
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.
list view
basic layout
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.
basic layout
deliver - refined solution
Master component
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.
Master component
mockup
I used a mockup to display our open beta design in context.
