Ubisoft Connect

A network for all players

Ubisoft Connect is a transversal meta-layer which connects all players and brands under the Ubisoft umbrella.
By offering players a series of 12 connected micro-apps, it enriches game experiences.

My contributions to this project were split into two parts.

1. Multi-platform, multi-theme design system

craft many of the team's Figma components for the shared library,
ensure accessibility compliance and localization of UI components,
devise solutions for storing design tokens in a single source,
implement a single shared library for design tokens, including light & dark themes,
code engineering demos of how design tokens might be used in production code,
distribute the library of design tokens via an internal Artifactory instance,

2. Challenges feature within Ubisoft Connect

collaborate with Game Designers to come up with the app's business rules,
create flexible UI components to accomodate various challenges provided by game teams,
carefully integrate the Challenges feature within the Ubisoft Connect overlay shell,

Ubisoft Connect brings together over 250M players from across the world on PC, Xbox, Playstation, Switch, Stadia, iOS and Android.

Company: Ubisoft
Team: Ghina El-Chemali, Letícia Zancan, Maria Rundqvist, Émile Bergeron, Basile Fecourt, Roxanne Angers
Role: Product Designer, Front-End Developer
Timeline: 2019-2020
Status: in production

A video of Ubisoft Connect with Rainbow Six: Siege, on PC.

App screenshot of Ubisoft Connect, showing a level 20 user, a carousel of Top News, and a carousel of Friends. — The Home tab of Ubisoft Connect on iOS

The Profile tab of Ubisoft Connect on iOS

A Design Sytem for all devices

Name an electronic device. Someone probably tried to run a game on it. Games are ubiquitous - an idea which Ubisoft epitomizes. Upon starting this project, it was clear that most current & next-gen devices needed to be supported by this Design System. As most games are now played on mobile devices, light & dark modes would need to be included. Controller modalities also had to be taken into consideration, meaning that both focus-based navigation (common with game consoles or keyboards) and mouse/touch navigation had to be supported.

Icons showing devices types: TV, Mobile, PC, Playstation, Nintendo Switch, Xbox, and Stadia — Support for many device types

Rows of color chips from the Ubisoft color palette, shown for both the dark and light themes. — Light & dark modes

Illustrated demonstration of the difference between cursor and focus-based navigation. — Cursor & focus-based navigation

Distributing tokens for engineers

This project was on a short timeline, as its release needed to match with the launch of the PS5 and Xbox Series X.
To support this timeline, engineering teams from various offices were leveraged. In implementing some of the micro-apps, some of teams used React and others used Vue.js. This meant that a shared library of React components would not be usable by all engineering teams. Therefore, to best scale the usage of the Design System to engineering teams, I devised a solution which matched the level of abstraction:

A library of centralized design tokens, consummable by both React and Vue.js

To pull this off, here was my process:

pitch the idea to PMs, Engineering & Design and get their buy-in on the idea,
collaborate with engineers to learn how packages were distributed within Ubisoft,
integrate Figma design decisions into the Theme-ui spec,
structure overridable color themes within the set of design tokens,
create coded component examples using the theme context and design tokens.

My work enabled both React & Vue.js teams to save time on their implementation by not having to worry about styling.
Code I wrote now runs on over 250 million PC, mac, Android, iOS, Nintendo Switch, Playstation, Xbox devices and even cloud streaming platforms!

Diagram showing Design tokens written with the ThemeUI spec, being consumed by React and Vue.js applications and running on Ubisoft Connect. — System diagram of the path taken by the design tokens library

The challenges feature

Challenges are in-game prompts which players can complete to earn in-game currency and level-up their Ubisoft Account. There are 2 types of challenges: Core challenges only need to be completed once; and Time-Limited challenges reset every week and can be completed multiple times. Challenges are comparable in nature to Xbox & Steam achievements, Playstation trophies.

Together with a Game Designer responsible for designing wider system economics and gameplay loops, and a Product Owner responsible to matching business requirements, I designed UX & UI of the Ubisoft Connect Challenges feature.

The core of the Challenges feature is a list of Core and Time-Limited Challenges. Each challenge has criteria which need to be completed in-game by players.
Individual challenges are represented by a Card component within a list. Many variables can compound and create lots of complexity within individual challenges:

One-time challenges,
Partial progress challenges,
Community challenges
Multi-tiered challenges
Completed challenges

This is what Challenges look like in the mobile app:

App screenshot of a list of Core Challenges for Assassin's Creed Valhalla. — Core challenges

App screenshot of a list of Time-Limited Challenges for Rainbow Six: Siege. — Time-Limited challenges