Problem
Our design system underwent a substantial version update, encompassing significant enhancements in terms of visual aesthetics, component design, design decision tokens, and typography styles. It became imperative to provide our users with a seamless option to transition to the latest version of the design system while preserving compatibility with older assets.
My roleAs the project lead, I assumed the responsibility of defining and prioritizing the project tasks. I meticulously crafted a comprehensive timeline that guided the project's progression, ensuring efficient allocation of resources and timely completion. To facilitate collaboration among our remote team members, I authored essential documents outlining collaborative expectations, milestone checklists, and a decision tracker.
Moreover, I took charge of executing 80% of the design-related aspects of the version update. This encompassed the creation of new typography styles, establishment of new design decision token names and colors, as well as the thorough updating of our components and documentation. |
Skills
|
Solution
To ensure a seamless opt-in experience, our team implemented a solution that involved incorporating the updated components directly into the existing file. By avoiding the need for users to activate a new library, we aimed to streamline the transition process.
In order to enhance clarity and ease of use for designers accessing the assets, we conducted rigorous testing of naming conventions. This meticulous approach ensured that designers could readily identify and distinguish between different versions when utilizing the assets.
Furthermore, I collaborated with my engineering team to create migration guides for designers and developers. This ensured that all our users have the necessary tools and information to adopt the new version 5 of our design system.
In order to enhance clarity and ease of use for designers accessing the assets, we conducted rigorous testing of naming conventions. This meticulous approach ensured that designers could readily identify and distinguish between different versions when utilizing the assets.
Furthermore, I collaborated with my engineering team to create migration guides for designers and developers. This ensured that all our users have the necessary tools and information to adopt the new version 5 of our design system.
Foundations
I updated our Typography and design decision token documentation. The Figma documentation now includes links to our doc site, includes our branding, and a brief description.
Components
I created documentation to help our users understand the properties that each component offers. Documentation includes recommendations and visual examples. In testing users reported liking seeing the properties of the component explained with examples.
|
|
Impact
The implementation of the new version of our design system has yielded significant positive impacts on the products it supports. By providing early access to our new enterprise design language, these products have gained enhanced capabilities and functionality. The incorporation of new features in Figma has resulted in increased efficiency and interactivity, leading to reduced file sizes and elevated prototype fidelity.
The remarkable impact of the design system update has been duly recognized within Capital One. The project's success and significance were acknowledged through the prestigious achievement of winning our internal tech excellence award. Over the course of eighteen months, our dedicated team of six accomplished the task of updating more than 25,000 assets, encompassing both the design and technical aspects of our design system.
As a result of this update, our business-facing products now boast the same modern aesthetic as our premium customer-facing products. This alignment has played a crucial role in unifying Capital One's entire product portfolio under a cohesive visual design language, effectively eliminating arbitrary uniqueness. It is worth noting that this initiative was one of our CEO's top priorities for that particular year.
The remarkable impact of the design system update has been duly recognized within Capital One. The project's success and significance were acknowledged through the prestigious achievement of winning our internal tech excellence award. Over the course of eighteen months, our dedicated team of six accomplished the task of updating more than 25,000 assets, encompassing both the design and technical aspects of our design system.
As a result of this update, our business-facing products now boast the same modern aesthetic as our premium customer-facing products. This alignment has played a crucial role in unifying Capital One's entire product portfolio under a cohesive visual design language, effectively eliminating arbitrary uniqueness. It is worth noting that this initiative was one of our CEO's top priorities for that particular year.
Testing naming conventions
The name of the component must include the version but I also needed to make sure the assets were properly organized so that the Figma assets panel is easy to navigate. Our users mainly drag and drop components directly into their files from the assets panel. Below are the A B test that were conducted to assure usability and get user feedback.
|
Test A
V5 and ❌ (Deprecating) naming conventions to show versioning. V5 meaning version 5 which we are encouraging users to migrate to and ❌ (Deprecating) meaning the older version 4 which we want to discourage users from continuing to use. The assumption made here is that the users know that V stands for version and ❌ (Deprecating) is still available in code. |
|
|
|
Test B
Version 5 and Version 4 made a clear distinction between the versions. Users no longer reported usability issues with the navigating out assets panel. Big take away is sometimes friction is necessary to implement clear asset structure. We added an additional click but it resulted in a more accessible library. Moving forward our assets begin with files displaying the component name that house two separate files based on the desired version. |
|
|
Component testing
Before publishing new components to our library I conducted 6 users test to make sure they are built well enough for all our users needs. I created this test format to collect feedback and conducted live demos to get stakeholder input.
Section 1 asks them to place examples of the component from their projects. Section 2 tests the users ability to manipulate the components size, properties, text, and icons. The final section is a space for feedback from the user on how we can improve the component build or naming conventions. This step was essential to creating a suite of accessible components.
Section 1 asks them to place examples of the component from their projects. Section 2 tests the users ability to manipulate the components size, properties, text, and icons. The final section is a space for feedback from the user on how we can improve the component build or naming conventions. This step was essential to creating a suite of accessible components.
Interactive components
I am most proud of bringing interactive components to the library. Having interactive components elevates our users prototypes without them having to do a thing!
Example of components in a modal prototype. Hover and Active states are baked into all our interactive components.
Example of components in a modal prototype. Hover and Active states are baked into all our interactive components.
Project briefI created a comprehensive project brief document that served as the authoritative source of information for the version update project. This document provided a concise yet comprehensive overview of the project, encompassing essential elements such as the problem statement, a RACI (Responsibility, Accountability, Consulted, Informed) chart, the project's overarching goal, tangible objectives, and a well-defined timeline outlining the anticipated delivery of each milestone.
The project brief document served as a crucial reference point, ensuring clarity and alignment among all stakeholders throughout the duration of the project. |
|
Timeline
Amidst a substantial project load and a modest team of three designers, I employed a strategic approach for optimal manageability. Fragmenting the project timeline into attainable milestones enabled incremental and effective progress.
Scheduled weekly check-ins served as dedicated collaborative forums, maintaining alignment, assessing advancements, addressing challenges, and facilitating informed consensus. This structured communication framework ensured a cohesive workflow throughout the project's entirety.
Scheduled weekly check-ins served as dedicated collaborative forums, maintaining alignment, assessing advancements, addressing challenges, and facilitating informed consensus. This structured communication framework ensured a cohesive workflow throughout the project's entirety.
|
|
Review process
To handle complex tasks—over 100 actions in a separate Figma library branch—I introduced a meticulous peer review. With a detailed checklist, I ensured thorough examination by two designated designers for quality and consistency. Clear instructions on documentation, branch merging, and final publication further streamlined the process, ensuring efficiency and precision in integrating tasks into the design system.
Build methodTo ensure uniform Figma component creation, I designed a concise Component Construction Guide. It provided standardized practices for designers, enhancing asset consistency, efficiency in design reviews, and overall collaboration. Encompassing auto layout, positioning, interaction, naming, and more, the guide fostered harmonized component construction for elevated design consistency and collaboration.
|
|
Design & code comparison
To synchronize design and code updates effectively, we employed a meticulous component update document. This reference comprehensively detailed proposed changes, fostering alignment and shared understanding between design and tech teams.
Post-build, a vital step included a thorough side-by-side comparison, validating the harmony between design and technical aspects. This rigorous process enhanced collaboration, quality assurance, and adherence to project objectives.
Post-build, a vital step included a thorough side-by-side comparison, validating the harmony between design and technical aspects. This rigorous process enhanced collaboration, quality assurance, and adherence to project objectives.
Example of React button not aligning with design specifications.
Community
To engage a user community of 1,000+, I led diverse initiatives. Bi-weekly meetings showcased updates and projects, while a monthly newsletter highlighted achievements, tips, and designer recognition. Inclusivity thrived through materials tied to events like Black History Month, Asian Pacific Islanders Appreciation Month, Hispanic Heritage Month, and other holidays. Timely support via Slack ensured a lively, collaborative user community.
|
|
|
Migration guide
I developed comprehensive migration guide documents that provide detailed instructions for transitioning to Version 5 of the design system. To ensure a smooth and seamless upgrade process, both designers and developers have been well-informed about the introduction of new components. In order to minimize any friction encountered during the file upgrading process, we provide thorough documentation on best practices for migration. These resources serve as valuable references, guiding users through the migration process and facilitating a successful transition to the updated version.
Restraints
Our project was undertaken by a team consisting of four designers and four developers. In alignment with our VP of Design's directive, we set a delivery target for early 2023. However, we encountered certain constraints during the project.
One of the technical restraints we faced was the limitation imposed by Figma, which restricted file sizes to a maximum of 2GB per file and imposed a cap of 1,000 component variants. This necessitated careful management of our design assets to ensure compliance with these limitations.
Another significant consideration was the need for seamless user adoption and migration to the updated system. We recognized the importance of minimizing disruptions and ensuring a smooth transition for our users, which required careful planning and thoughtful implementation strategies.
Furthermore, the remote nature of our team posed challenges in terms of team building and collaboration. Despite the geographical barriers, we made dedicated efforts to foster a sense of cohesion and maintain effective communication channels.
By acknowledging and addressing these constraints, we were able to navigate the challenges effectively and deliver a successful project, meeting our VP of Design's expectations while ensuring a smooth user experience and maintaining a high standard of quality.
One of the technical restraints we faced was the limitation imposed by Figma, which restricted file sizes to a maximum of 2GB per file and imposed a cap of 1,000 component variants. This necessitated careful management of our design assets to ensure compliance with these limitations.
Another significant consideration was the need for seamless user adoption and migration to the updated system. We recognized the importance of minimizing disruptions and ensuring a smooth transition for our users, which required careful planning and thoughtful implementation strategies.
Furthermore, the remote nature of our team posed challenges in terms of team building and collaboration. Despite the geographical barriers, we made dedicated efforts to foster a sense of cohesion and maintain effective communication channels.
By acknowledging and addressing these constraints, we were able to navigate the challenges effectively and deliver a successful project, meeting our VP of Design's expectations while ensuring a smooth user experience and maintaining a high standard of quality.
Metrix
- 85% of our business platforms successfully adopted the new version within six months of release.
- 25,000+ assessts updated
- 500,000+ instances of my Figma assets pulled into users design files
- Supporting 35 platforms
- 1,000+ Github repos
- Won internal tech excellence award