Ubisoft Mothership

Ubisoft Mothership

Design System

UX Design

UX Design

Branding

Branding

An Exhaustive Design System

The Mothership Design System was designed to be used internally by any team that needed to build new digital assets. Intended to be exhaustive, this system could be used on game sites and internal team initiatives.

The Mothership Design System was designed to be used internally by any team that needed to build new digital assets. Intended to be exhaustive, this system could be used on game sites and internal team initiatives.

Figma Example

Objective

In the realm of cryptocurrency and finance, users often face overwhelming interface complexity. Transactions typically involve multiple steps due to regulatory requirements or the inherent complexity of the interactions, particularly in crypto activities such as staking and yield farming. Many users struggle to understand and engage in these processes, highlighting a need for better education and streamlined interfaces. The overall experience of financial and crypto interactions feels cumbersome, and my goal was to eliminate this interactive overhead, simplifying the process of composing and completing transactions for users.

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.

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.

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.

Figma Example

Design and Development

Process

Once we had an experience map to reference. We catalogued all of the major components in use, 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.

Process

Once we had an experience map to reference. We catalogued all of the major components in use, 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.

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.

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.

Initial Wireframe

Designed Mockup

Search Type Ahead Iteration

Search Results Page

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.

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.

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.

Research and Discovery

Research Goals


Our goal with the research phase was to determine the feasibility of LLM transaction Composition. Is this technically possible, and what would a product look like with this LLM driven interaction mental model. Our research was deeply informed by a year of user testing conducted for Abacus, a next-generation crypto asset management tool. The primary objective was to simplify the user experience for complex crypto interactions, enabling average users to effortlessly compose and execute advanced transactions.

Research Goals

Our goal with the research phase was to determine the feasibility of LLM transaction Composition. Is this technically possible, and what would a product look like with this LLM driven interaction mental model. Our research was deeply informed by a year of user testing conducted for Abacus, a next-generation crypto asset management tool. The primary objective was to simplify the user experience for complex crypto interactions, enabling average users to effortlessly compose and execute advanced transactions.

Methods

Our research methods consisted of rapid prototyping to generate a testable prototype soon after initial idea inception. We then presented that prototype to key stakeholders and AI engineers for feasibility testing and validation of technical capabilities. In its current phase Alfred is ready for further testing with general users.

Methods

Our research methods consisted of rapid prototyping to generate a testable prototype soon after initial idea inception. We then presented that prototype to key stakeholders and AI engineers for feasibility testing and validation of technical capabilities. In its current phase Alfred is ready for further testing with general users.

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 on the project.

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.

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.

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.

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.

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.

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.

Initial Wireframe

Designed Mockup

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

Additional Screenshots

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 on the project.

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.

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 on the project.

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 componet 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.

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 use, 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.

Key Findings

Many users find the interface and processes of crypto wallets intimidating and overly complex, especially when dealing with advanced features like staking, yield farming, and multi-signature transactions.

For more detailed key findings, check out our research on Abacus.