Games Library (Redesign)
My main mission from 2021 to 2023 was the redesign of Ubisoft Connect games library as part of a global PC client design modernization.
Previous design
New Design
Project Overview
Feature
Games Library
Design Scope
Redesign (zero-loss)
Timeframe
2 years (BETA)
Project: Ubisoft Connect
Type: Game launcher
Platform: PC, Console, Mobile (discontinued)
Role: UX Designer
Tools: Figma, Miro, PS
Mission Brief:
1. Redesign and implement the Games Library for the new Ubisoft Connect PC application
2. Feature-parity between old and new library versions
3. For Ubisoft+ subscribers*, integrate the games catalogue to enable a smoother and more efficient experience
*Ubisoft+ is the subscription service of Ubisoft, giving players access to a catalogue of Ubisoft titles for a fixed monthly fee. These games could previously only be browsed in a separate library.​
​
Planning & Research
User Testing & Exploration
With so many game clients on the market (an ongoing player pain point) it was important to us to go back to the basics and grasp what players even need and want to do with game libraries in the 21st century :)
Even though it seemed basic, it was important for me to set fundamental boundaries. Especially when it comes to content beyond "just the games", e.g. news, social interaction, updates, it was crucial to understand when and how additional information is helpful vs intrusive and distracting.
​
This initial series of exploratory user tests was - as it turned out - one of the most universally helpful data sources we created across the entire project lifespan. Even two years later I would still often refer back to the input the players provided for us.
​
We established the library as the players' sanctuary - a place that is only about them and their games. With some stakeholders, this turned out to be a contested topic at times. (ominous foreshadowing)
First User Test Insights
Relatedness
Players want their libraries to be solely focused on the games they own and play.
"Game library is just for games, nothing else" - Participant 3
Customization
Players want rich and extensive customization tools and options for their games library.
"Would be nice to be able to
collapse rows you're currently not interested in. Alternatively, move it up or down." - Participant 4
Updates Visibility
Players welcome seeing updates/news in their currently or previously played games.
"There's times we take a break from games, so it could be interesting to see news to stay updated" - Participant 13
In the following user tests, we would trial various structural and hierarchical design concepts more specifically. For example, the extent of news or social activity players want/need, distinction between library states and game versions, recently played and other highlighted sections, search/filter/view options, and more.
​
We would also continuously include intuitive navigation and interaction expectations into our tests.
Competitive Benchmarks
We also looked at current implementations of PC game launchers and media apps, which gave us additional understanding on current player expectations and the topic of structural familiarity. We wanted ensure following established information hierarchies for familiarity, but also tried to identify gaps and details we could innovate and establish branding with.
Riot Games Client
EA Desktop App
GOG Galaxy 2.0 (CDProjekt)
Xbox PC App (Microsoft)
Steam (Valve)
Battle.Net (Blizzard)
Epic Games Launcher
Discord
Spotify Desktop App
Well... there sure is a pattern :)
Design Phase
I worked with my incredible UI Design partner to rapidly iterate on designs, whilst communicating updates with leads, product owners, developers, and other designers working in parallel on other client features. We tried various structures and game tile design approaches.
I unfortunately do not have any wireframes from this time, but we were quickly able to turn them into quite high fidelity prototypes for testing, as we were using a global design system.
Recently played
Players are most likely to open the client and play the game they had previously played, so recent games is the most important touchpoint for them. We wanted to integrate Recently Played games both in the global side bar, as well as the library, but were unsure if recent games should have an own section, similar to Steam
%20w%20description.png)
The vast majority of Connect users however own between 2 to 5 games, so we decided for a different sort:
The top section of installed games would automatically be sorted by Recently Played, whilst the section with the not installed games would be sorted alphabetically.
Ubisoft+ catalogue integration
One of the biggest challenges was figuring out the integration of the Ubisoft+ subscription catalogue, turning a detached and often confusing experience into a smooth and intuitive one. This was coined the Library+ experience.
Previous UI
MVP Library+ release
In the first iteration, the catalogue was integrated into the library structure itself, giving players the feeling of connection between both their owned and subscription games. ​
Additional features
Searching and Filtering
Due to owned games and subscription games using two completely different databases and therefore different metadata, we had to find a feasible solution with our developers to mitigate and work around inconsistencies.
In collaboration with one of the developers, we improved string matchmaking of the search bar input to a more robust and user-friendly version. We shared these improvements with the Friendlist feature team.
​
Game Editions
Because game editions were not only different across releases, but also often hard coded, exposing this information was an unexpected major technical feat. Additionally, when playing a game with edition-based content via subscription, it could lead to substantial issues when ending subscription access and downgrading back to a "lower" version. This required some error handling and error prevention design.​
Default sort - Recently played vs Alphabetical
Another surprisingly big topic (related to sort/filter/search) was how games would be sorted by default. There's arguments for both, and testing confirmed our assumption that it would at most be a 70/30 split or closer.
First, the idea was to have one row of Recently Played, and below the list of "My Games" sorted alphabetically - best of both worlds. However, this became a major issue when starting high-fidelity designs, realizing that it would inevitably duplicate game tiles for players owning 1-5 games (our biggest segment). Additionally, segmenting our games into "Installed" and "Not installed" added another layer of complexity.
Via testing we identified Quick Launch in the global side bar to be a prioritized spot to resume games, which decreased the priority of a separate library section. "Last played" would stay the default sort, whilst games with no play time would sort alphabetically.
(Also, cross-category sorting/filtering/searching was a whole other Pandora's box we opened :D)
If you're seeing this section without images... well, this is awkward.
But it's 5am and I am adding them first thing tomorrow, so pls refresh this page in a bit :D (or if you feel wild, read it text-only)
Distinct features
Inactive Games
When BETA or test version access ends, or games are discontinued (RIP XDefiant :')) , players often had no choice but to hide those games in their library. With the integration of the subscription, we added another case of locked access when a subscription is cancelled. Because players might have put a lot of hours into those games, or subscriptions can sometimes lapse on accident, we wanted to make sure that games would not just disappear and respect the time players spent playing them.
Therefore, we added an "inactive game" section to the bottom of the library, so players could still view progress and achievements, and visit related game pages if needed. This would also ease potential conversion.
List view / Small tiles / Big tiles
At a glance Game Status & Interaction
Sorting Information
Flexible Search
Shipped BETA Designs (2023)
Even though there were still heaps of topics to figure out, the new library design shipped as part of the Ubisoft Connect BETA in 2023 (here's a link to the official announcement).
(I might or might not be in this video, albeit with a different hair color, from a very different era)
Official UI Reveal
Ubisoft Connect BETA across our various platforms (PC, Console, Mobile)
Ubisoft Connect BETA Home/Landing page
Ubisoft Connect BETA Library gif
Library Details
or... De-Tiles :)
One of the biggest design decisions was to surface the primary interaction icons on this level of the library. Whilst many launchers opt for a "cleaner" design, we wanted to make sure that players could not only access and manage their games efficiently on a grid level, but also immediately see the state their games are in. Is it installed? Does it need an update? Is there a download error?
​
By putting this informational functionality on the primary CTA icon button, we could keep the thumbnails bright and recognizable for most cases, where other launchers visually obfuscate the image by darkening, adding monochrome filters, or adding inaccessible text/icons.
​
This "at a glance" design approach is utilizing a system of icon buttons, tags, and text to convey information to the players. All icon buttons have a tooltip hover.
Installed states
Play
Running
Update available
Ready to Install & Download
Ready to download
Downloading
Download paused
Playable (still downloading)
Inactive/unavailable game (installed)
Inactive/unavailable game (not installed)
Free Games, Demos, Trials
Demo
Free Game ("already added to library")
Trial
Differences
Demo: separate game build with a pre-built scenario to go through (can be different to the actual game)
Trial: actual game build with restricted access (access ends after certain time or scenario completion)
Free (access) games: a fully playable version of a game
Context menu
We wanted the context menu to be accessible in various way, accommodating players with different input devices. We allow right-click for mouse users, or interacting with the More Options menu to open it, accommodating controller and keyboard users additionally.
Right click (Mouse)
More options button
Sort Information
Different view options
Review & Lessons
Joining the redesign project early 2021 has majorly shaped me as a designer. I learned to work within a global design team, complex stakeholder structures, and a worldwide audience spread across various platforms. Even though game launchers are not the most popular piece of software among gamers, this project was - at many points - a humbling experience, due to its technical complexities and use cases, which requires immense attention to detail.
​
Taking on the role as dedicated accessibility expert (that would probably fill a few more case studies) turned out to be a whole series of learning lessons around the importance of strategy and "packaging". To know how, when and who to pitch ideas to, and to not solely bring problems to the table, but to offer solutions that are obviously supporting various stakeholder goals.
​
Thank you for reading, here's your reward meme :)
