Currency Design System

Understanding our Users and their Problems

A methodical approach was employed to tackle the complexity of improving the design and development workflow, emphasizing communication, active listening, and continuous learning. The initial step involved conducting insightful user interviews with key stakeholders, including product owners, designers, and developers. These interviews aimed to comprehensively understand user needs, challenges, and workflow dynamics, providing unique perspectives from diverse roles within the teams.

Subsequently, the gathered information was synthesized and utilized in collaborative journey mapping sessions. Visual representation of the end-to-end user experience facilitated the identification of pain points and bottlenecks in their workflows. The process then transitioned into iterative improvement, where solutions were prioritized based on their impact, and collaborative efforts with the design and development teams were undertaken to address the identified challenges. Continuous feedback mechanisms and regular updates to the journey map ensured that the improvement process remained adaptive and user-centric. This methodical approach allowed for a deep exploration of user experiences, fostering collaborative solutions and ongoing enhancements to the design and development workflow.

Scaling for Success: A Systems-Level Approach

Following a thorough analysis of our experiences, we've pinpointed essential actions for effective systems-level scaling. First and foremost, establishing regular cadences with product teams is imperative for transparent communication and gaining insights into their ongoing initiatives. Second, recognizing and adapting to the unique working styles of each team is crucial, ensuring seamless integration of our design system and the delivery of optimal value. Our guiding mantra is to consistently create, communicate, educate, and repeat for sustained success.

Putting People at the Center: A Weekly Synergy

To ensure a people-centered approach, we've implemented a series of initiatives:

• Weekly Syncs: Regular synchronization sessions foster collaboration, aligning teams, and maintaining a cohesive working environment.
• Office Hours: Open-door sessions provide an avenue for teams to seek guidance, share ideas, and facilitate a culture of accessibility.
• Onboarding for Success: Initiatives for onboarding new product team members have been implemented, ensuring a smooth integration into our collaborative processes.

Contribution & Communication

The Loose Change libraries in Figma function as a dynamic feedback loop within the design ecosystem, providing product designers with a space to share finalized components that are not yet part of the formal Currency Design System. This decentralized approach encourages cross-team collaboration, as all designers have access to Loose Change to add and publish assets beneficial to other teams. The Currency team acts as a governing body, monitoring component adoption in Loose Change to strategically absorb popular assets into the more structured Currency Design System. This user-centric and collaborative process reflects a design philosophy that fosters adaptability, flexibility, and scalability to meet the diverse needs of various teams in the evolving design system.

Three Pillars

The primary goal of Currency is to create a scalable and dynamic framework that accelerates productivity and fosters speed in the design and development process. By providing cohesive and consistent design elements, the system ensures a unified user experience across various products and platforms. This cohesiveness is achieved through well-defined guidelines and documentation that serve as a comprehensive reference for designers, engineers, and project teams. Ultimately, the aim is to establish a standardized and efficient approach to design, enabling teams to work seamlessly and efficiently while maintaining a consistent visual language and user experience.

To rely on these three pillars to ensure we align with our north star "The Currency design system helps designers, engineers, and product teams work together to build more cohesive experiences across M&T and Wilmington Trust's line of digital products and services."

The Mint (UI Components)

Our Figma Libraries serve as the central repository where we meticulously curate and publish approved Currency assets, making them readily accessible for our design teams. Whether designers prefer a browser-based interface or the Figma application itself, these libraries provide a seamless avenue for accessing and implementing approved assets directly into their design work.

Within these libraries, designers encounter a curated collection of design elements, including but not limited to UI components, typography styles, and color schemes. These assets undergo a thorough approval process, ensuring alignment with design guidelines and overall brand consistency. This centralized hub not only streamlines the asset retrieval process but also acts as a single source of truth for our design language.

Design Foundations: Atomic Design, 8pt Grid Precision, and Variants in UI Development

• Atomic Design: Embracing the principles of Atomic Design involves breaking down user interfaces into fundamental building blocks, each representing a different level of complexity
• 8pt Grid: This system enhances visual consistency, creating a harmonious and organized layout.
• Variants: Variants allow designers and developers to create diverse appearances while maintaining the underlying structure and functionality.

The Treasury (Code Repository)

Our code repositories play a pivotal role in seamlessly translating visual design prototypes into a user interface, embodying a framework-agnostic and efficient approach. Adopting the Inverted Triangle Architecture methodology, our repositories serve as the foundation for a robust and scalable structure.

Within these repositories, developers leverage a comprehensive set of out-of-the-box styles encapsulated in design tokens. These tokens encapsulate design decisions and enable a systematic approach to styling, ensuring consistency across the entire user interface. This framework-agnostic design allows for flexibility, empowering developers to integrate our design system seamlessly into various frameworks and technologies.

The Portfolio (Documentation Site)

Our website serves as an invaluable resource, offering a comprehensive understanding of how Currency operates to benefit you. The documentation encapsulates the core concepts within the system, providing a roadmap for approaching the challenges that Currency is specifically designed to address. This strategic guidance empowers users to make well-informed design decisions, fostering a deeper comprehension of the system's capabilities and potential applications.

In tandem with the documentation, our website features live examples showcasing finalized designs. These examples provide a dynamic and contextual experience, allowing users to explore and interact with real-world implementations of Currency's design principles. Notably, these designs are not mere illustrations; they are accompanied by fully-functional HTML code snippets. This feature goes beyond static visuals, offering users the ability to delve into the code, understand the intricacies of implementation, and even replicate the functionality in their projects.

Some features:

• Getting Started: inciples. To familiarize yourself with existing assets that you can incorporate into your designs, review the Components and Patterns sections.
• Contribution: The Loose Change libraries in Figma are a space for product designers to share finalized components that are not yet part of the Currency Design System, encouraging cross-team collaboration and reuse.
• Bug Reporting & Requests: Visit the Slack channel.
• Changelog: All changes and revisions will be documented here.
• Components: Choose between a design and development view. Explore use cases and discover code snippets.