Project Overview
About Cosmos
Cosmos Web Apps aims to provide a unified, scalable design framework for Imagineering’s Tech Studio’s suite of applications. By creating a centralized repository of reusable components, design patterns, and guidelines, the design system ensures consistency, efficiency, and improved user experiences across applications. Thorough research, user studies, and best practices informed the design system's development aligning it with the specific requirements and objectives of the Tech Studio’s App Team.
Timeframe
12 months
Role
Design System Management and Documentation, Accessibility Design, Product Design
Teams
Imagineering’s Tech Studio, Art and Illustration Team
Tools
Figma, Vuetify, Storybook, Airtable
Problems and Challenges
The Tech Studio's primary objective is to construct, oversee, and uphold a diverse portfolio of over 300 internal products for Imagineering. However, since its establishment, there has been insufficient attention given to the significance of design and establishing a unified design language.
Most product teams operated without dedicated designers, leading to the creation of Cosmos as a makeshift solution to promote application consistency. However, this solution brought its own set of problems.
Issues with Accessibility
The primary colors did not meet current WCAG accessibility guidelines.
Lack of Design System Foundations
Undefined type ramp and fonts, missing states, and a lack of unified iconography language.
Nonexistent Component Library
Components that did exist were kept in an unmaintained, unorganized design file.
No Repository
Developers were independently recreating Cosmos in their preferred front-end languages, resulting in a fragmented system with no centralized repository for updates.
Missing the Magic
Even internal apps need a little bit of pixie dust. The out-of-the-box Material Design styles did not embody the Imagineering brand or feel distinctly Disney.
Solution
As I embarked on the Astrolabe project, the absence of a comprehensive design system became increasingly apparent and impossible to overlook. The lack of a standardized set of design guidelines and components hindered the start of the development process. Recognizing the need for a robust design system, I took the initiative, with support from both my design manager and Imagineering project partners to create one from scratch, paving the way for a new, cohesive user experience throughout Astrolabe and the rest of the applications in development at the Tech Studio.
TL;DR (Too Long; Didn't Read)
As part of the initial kick-off team for Astrolabe, highlighted in another case study, the absence of a design system at Imagineering’s Tech Studio became evident and hindered the start of my design work. I took the initiative, with support from my Imagineering partners, to create a robust design system from scratch for Astrolabe with the goal of adaptation across the Studio’s large portfolio of digital products. Cosmos Web Apps, built on Vuetify and embracing Material Design principles, emerged as a comprehensive solution, providing a unified design language, improved accessibility, and a centralized component repository.
Process
Leveraging Other Design Systems
In an effort to leverage existing resources and avoid unnecessary duplication, I conducted an inventory of Tech and Digital’s Hyperion design system and the previous iteration of Cosmos. The goal was to identify reusable components, patterns, and uncover missing elements to better plan my approach to creating Cosmos Web Apps. This minimized the need to reinvent the wheel in some areas and allowed me to design quickly.
Visual Discovery and Creating Artifacts
To inform the visual direction of Cosmos Web Apps, an extensive research phase involved studying internal applications from both the Tech Studio and Tech and Digital. I carefully documented patterns and elements that resonated with me. Additionally, sources like Dribbble and other enterprise-like software were explored to gather further inspiration. This wealth of findings was consolidated into moodboards, creating a visual reference for the desired look and feel. These mood boards served as a foundation for developing a style tile, providing a concrete visualization of the intended aesthetic for Cosmos Web Apps.
Moodboard
Color Exploration with WDI Brand Identity Colors
Style Tile
Developer Collaboration
I collaborated closely with software engineers from the Tech Studio to identify and establish essential foundational elements and nomenclature for Cosmos. To enhance efficiency, we utilized Vuetify's frontend framework, which proved instrumental in accelerating our workflows. Throughout the process, I relied on the invaluable guidance and expertise of the engineers to effectively apply styles to Vuetify components, ensuring a seamless integration of design and development efforts. We relied on Storybook to ensure alignment between my Figma designs and their code.
A New Cosmos
Colors
Defining colors for Cosmos Web Apps was one of the biggest challenges. While the Hyperion design system provided a solid foundation with its existing color palette, it lacked the predefined states required by the Vuetify framework. Additionally, the previous version of Cosmos had non-compliant colors and lacked comprehensive state definitions and documentation. To address these issues, I adopted the primary action colors from Hyperion and employed Material Design principles to establish clear and consistent states for Cosmos Web Apps.
Typography
I decided on a type ramp using Disney’s own Inspire font and chose to sparingly use their Heritage for special elements like user's initials for their avatar fallback value.
Icons
I utilized the Material Design Icons library as the framework of Cosmos is based on Material Design principles, therefore, aligning it with the overall visual language. Additionally, I designed and introduced two custom icons to address the need for differentiation between commonly confused items, further enhancing the clarity and usability of the system.
Illustrations
The illustrations created by a member of the Art and Illustration team, originally for Astrolabe, inspired the direction for the system's color scheme.
Application Chrome
In designing the application chrome, I prioritized its role as a navigational framework for accessing a wide range of functionalities and tools. Taking into consideration user mental models, I conducted an extensive initial discovery phase, analyzing patterns commonly used in other enterprise-sized software and internal Disney apps. This research guided me in making informed decisions on how to approach the design, ensuring that the application chrome would align with familiar conventions and optimize user experience.
Cards
Cards play a vital role in various Tech Studio products, including Astrolabe, and were among the initial components I developed. Serving as an alternative to list views, cards are designed to present data in a visually appealing manner while offering sorting and filtering capabilities.
Tables
Tables were another essential component that required early attention and definition. Given the large amount of data present in the apps, it was crucial to establish a robust, dynamic, and efficient table design. By carefully considering the data structure, sorting, filtering, and other necessary functionalities, I created table components that effectively handle and present data.
Inputs and Forms
Using the use cases defined for Astrolabe as a starting point, I designed various types of inputs for items such as date range selectors, radio buttons, checkboxes, and text fields.
Other Components
A design system is a dynamic entity that continually evolves and expands over time. While I have established a strong foundation with the components I’ve created, I realize that the need to augment and diversify the existing framework will arise.
Results
Figma Library
The Cosmos WebApps Figma library consists of over 200 published styles and components, an up-to-date change log, and a road map. I ensured alignment between the design system nomenclature and the front-end framework's terminology / API. My thought process was that by adopting consistent terminology and naming conventions, I established a better connection between the design system and the underlying front-end codebase.
Documentation
Easily accessible by all tech studio Imagineers, Airtable acted as a centralized platform for tracking icon usage across existing applications with the ultimate goal of establishing one, unified iconography language. This approach aimed to foster a common understanding and familiarity for individuals who rely on multiple apps in their workflows. Additionally, Airtable served as a convenient host for storing copy related to modal or alert messaging, allowing for easy access and management of essential communication components
Consistent Visual Language
The development of Cosmos Web Apps prioritized the integration of Imagineering brand elements and colors. Elements of the Imagineering logo were thoughtfully incorporated into empty state illustrations, headers, and avatar fallback values. To maintain legibility on data-heavy pages, a focus was placed on sharp, clean lines. The system embraced a friendly and approachable aesthetic by enlarging the corner radius of cards, containers, menus, and buttons. My design choices resulted in a visually consistent and engaging user interface that embodied the Imagineering brand while ensuring usability and readability
What's Next
New System, New Name
While Cosmos Web Apps currently serves as a temporary name, it is expected to undergo a renaming process as the system further evolves and becomes more familiar among Tech Studio Imagineers.
Design Tokens, Dark Mode, and Other Themes
While working on Cosmos, the primary focus was on developing a light mode. However, efforts were made to explore incorporating design tokens, laying the groundwork for future implementation of dark mode and additional theming options. This forward-thinking approach aimed to enhance user customization and create a more inclusive user experience within the Cosmos Web Apps.
Gathering Use Cases for More Comprehensive Components
Given the multidisciplinary nature of Imagineering and the wide range of applications developed by the Studio, it is essential to have design components that cater to the specific use cases of each app to make this design system truly comprehensive.
Final Thoughts
By leveraging Cosmos, designers and developers can be empowered to create cohesive and visually appealing interfaces aligned with the overall design language. It plays a crucial role in achieving a harmonized user experience across the suite of Tech Studio applications and provides a solid foundation for consistent design decisions, increased productivity, and facilitated collaboration among the team members.
Like all design systems, Cosmos Web Apps will continue to be a work in progress.
