UbisoftMothershipDesignSystem

Project Overview

The Mothership Design System was created for any Ubisoft team building new web assets.

Objective - Setting New Standards

Ubisoft is constantly producing new content for its game library and brand communications. Our goal with the Mothership design system was to unify web publications under a consistent design language. We strove to create an exhaustive library of components that any project stakeholder can pull from to find exactly what they need to produce their desired content.

View Figma Library Sample

Role

As Sr. UX Design Strategist at Ubisoft, I was the sole in-house UX Designer on in the marketing vertical. This role presented me with a wide range of responsibilities and opportunities. As part of my initial tasking, I was challenged with building the Ubisoft Web Design system for all brand properties. This included not only Ubisoft.com but the game sites as well, which would fall into a new game site model, I would build and maintain. This task was a full 0 to 1 effort, with the initial components being a small Illustrator file, that I would need to extend into an exhaustive component library covering every use case our web stakeholders required.

Research and Discovery

Competitive Analysis

At the onset of the Mothership project, we assessed leading design systems such as IBM's Carbon design system and Google's Material design system. The entire team attended a seminar at Adobe's offices, and studied the book Hack The Design System as a guide for implementation and lifecycle continuation.

Content Audit

Initially, we had a small set of wireframes from the Gamesite Model to use as a base. The goal was to extend those wireframes to represent the entire component library across all brand publications. We created a sitemap of all Ubisoft publications and began creating component examples of repeated design elements in use.

Key Findings

Ubisoft was in need of a unified brand identity across its web properties. This would include not only wireframes, but styled components and a comprehensive set of brand guidelines. Like Material, we strove to provide suggestive dos and don'ts allowing individual team stakeholders to produce their own content quickly with minimal contact with core development teams.

Design and Development

Process

Once we had an experience map to reference. We catalogued all of the major components in a spreadsheet, and replicated them within our design tools. We had an initial set of components from the Gamesite Model, we added components mainly from Ubisoft.com and other web properties such as Ubisoft News.

Key Components

An exhaustive set of componenets in both wireframe and Ubisoft brand styles living in design files in Adobe XD and Figma. After the set of components was completed, we began work on the container site - an internal reference tool that would contain brand guidelines, as well as individual pages for each component with extended guidelines on usage.

Challenges

Ensuring consistency across diverse platforms and media. Advocating for stakeholder buy-in across a wide set of diverse teams within the company. Component naming was another large challenge we needed to handle with care.

Implementation and Impact

Rollout

We had a gradual rollout for this project. As the library was completed, we shared it with key stakeholders and teams. Once we completed the container site, we had a large announcement to populate the system to all Ubisoft team verticals.

Results

Stakeholders from various Ubisoft teams commented on the ease of content creation with very fast turnaround times due to using the Mothership system. There was enhanced brand consistency. Game sites followed our model of high conversion rate affordances and a consistent information architecture.

Featured Elements

Game Site Buy Flow

For Assassin's Creed Valhalla, I was tasked with redesigning and updating the "Buy Page" purchase flow and integrating it into our design system. We had a challenge of handling multiple skus (Game Editions) while providing users with enough information on the difference in game editions in a concise and user friendly package. My designs resulted in the highest conversion rate and highest revenue buy experience in company history.

Search

I was assigned the lead UX role on Ubisoft's new search bar experience. Search is very unique for Ubisoft due to the common search terms used - either a [game title] or likely a support request like [locked out of my account] I oversaw the integration of our updated search tool from a UX perspective, leading content prioritization through an extensive research process.

Search Type Ahead Iteration

Search Results Page