Ubisoft Mothership
Ubisoft Mothership
Design System
UX Design
UX Design
Branding
Branding
Project Duration
2020-2022
Company
Ubisoft
Team
Global Digital Marketing
Role
Senior UX Design Strategist
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.
Container Site Comps
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.
Container Site Comps
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
Search Type Ahead Iteration
Search Results Page
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.