My first deep dive into "Design System" came at Ericsson (North America), creating a simple design system consisting of foundational elements and simple CSS components.

Included:

• Simple Color System
• SASS variables for colors, sizing and spacing
• Foundational CSS components
• Flat file (JAMStack) rendered documentation

Aug 2016 - Jan 2017

I create an extensive library to simplify utilitarian icons. These were made available as SVGs and integrated into an icon font. 

Basic components alongside a Bootstrap extended css library were created, alongside documentation, so that Ericsson North America product teams could reuse the most common components, reducing development time by 30% per sprint. 

 The state of the digital portfolio across Fannie Mae was one lacking consistency or adherence to brand, standardized components, UI Patterns or even general styling or visual design direction.
 

In just 3 years sites and products started looking like distant cousins, using various elements of the design system

• Hired and managed a multi-discipline design system core team of designers, developers and researcher.

• Planned and oversaw work of the team with performance reviews and weekly 1:1s

• Mentored and provided performance feedback to ensure continuous growth

• Built foundational CSS with SASS to serve as core foundation to upstream application frameworks
• Built utilities CSS library (inspired by Tailwind CSS) to increase efficiencies of front-end development 
• Setup documentation system using a JAMStack CMS (Eleventy)
• Created Token browser using  HTML/CSS/JS 
• Setup and maintained assigned components (as needed for velocity) in Sketch & Figma

• Facilitated sprint planning & Design Thinking sessions generate new ideas
• Roadmap Development: Created and maintained a comprehensive roadmap, ensuring alignment with organizational goals and project milestones.
• Stakeholder Management: Collaborated with executives, product managers, and engineering leads to prioritize features and secure buy-in for key initiatives.
• Risk Management: Identified project risks and implemented mitigation strategies to ensure timely delivery of key milestones.
•  Cross-Functional Coordination: Led cross-departmental teams, including UX designers, developers, and QA engineers, to ensure cohesive and high-quality deliverables.
• Metrics & Reporting: Established success metrics and tracked project performance, presenting regular updates to stakeholders to maintain transparency and accountability.
•  Change Management: Facilitated organizational adoption of the design system, including training programs, communication plans, and stakeholder engagement.
•  Process Optimization: Streamlined workflows and processes to improve collaboration and efficiency across distributed teams.

The first series of decks and materials outlined the benefits of a design system, what problems it solves (and those it doesn't), a general strategy and setup for a dedicated team to build and support it along with project management plan and release cadences.

Team guidelines and guiding principles set the tone of how the design system team would approach problems and guide through challenges to deliver business value.

These guidelines and principles would be refined and improved under facilitated workshops and sessions with the team.

One of my favorite slides. It was important to communicate the responsibility the design system team inherits.  Bad decisions can have big consequences down and upstream, especially in the corporate development cycle where update cycles are yearly.

Design systems are often confused as systems only for designers, but I've found the greatest benefits actually come to the developers and greatly benefit from code tooling.  I spent a lot of time communicating and selling a full tech stack of design system tooling that included A CSS framework that was powered by a modular SASS system that generates CSS that could then feed into any application framework technology.  

This was before web component specs were as mature as they are now.  If I was to do the pitch today, I would emphasis the use of web components as the cornerstone between all the downstream application frameworks and products.
 

I knew a dual-track agile was the way to go with a complex program based design system and with design leadership not too familiar with product team concepts a lot of the proposal was focused on how I would run Pi's and Prints.

• Initial design thinking sessions and product visioning for the design system
• Conducted deep Product and Component inventory. What components were heavily used and key components missing
• Identifying and documenting stakeholders, contributors and influencers, and what are their current experiences with product development
• Collaborating on the general sense of what a design system is and how it fits into typical product development
• Gathering a branding and style audit to inform the Design System foundations

It's important to map out who are the systems stakeholders.  Who are the contributors, influencers,  key leadership, and possible detractors.  With facilitated workshops we were able to start capturing this key information.

Its important to know the state in which UI design is being implemented right now. Using Mural as our main collaborative platform we started collecting screenshots of products and websites across the Fannie Mae digital portfolio.

I also started collecting a visual inventory on how visual elements, colors, typography were all used across branding and marketing elements.

At various checkpoints, I assigned research to be conducted. This qualitative and quantitative research touched based with designers, developers and product team leaders on the effectiveness of the design system, missing pieces, etc

These pieces include:
- Color System
- Type Scale and Fonts
- Spacing and Dimensional scale
- Naming Conventions

- much more ...

Outside naming, I feel color systems are the next hardest and complex thing in Design System setups. Deep thought needs to go into not only the visual design aspect but also naming conventions, scalability, and flexibility while driving strong usability and accessibility adherence.

The existing color palette for Fannie Mae was outdated, and not created for digital usage.  So the first step was to collect inspiration boards.

Next step was to start exploring with color combinations across all sorts of situations and context

and even more testing and exploring.....

After explorations, a color palette emerges. Mood boards are created and an official color palettes are created.

Fine-tuning means detailed work in the colors with HSB ensuring the ramps are flexible in a wide range of applications and color combinations remain accessible.

To ensure proper composability and predictability color ramps had to meet defined contrast targets.   This ensures scenarios like Red 20 can be used on Red 80 and always be accessible.

4.0 color system was expanded for a wider use outside brand and direct messaging.

Similar detailed work  was done with typography to analyze what was being used, what worked and what didn't

A dimension scale was created which then served as the basis of heights, widths, spacing, and all matters of dimensional-based options.

From that a typography scale was established, alongside weight , letter spacing, line-heights, and more. All which created the ingredients needed to craft the receipts of composite options like typography styles and default styles in the HTML.

The feedback framework allows for a structured way to communicate to designers and developers how to approach giving system feedback to the user when interacting the products.

For me, the biggest benefit the design system provides is the common language that allows for designers and developers to be able to sit in a room and whiteboard sketches of page designs. This is where true rapid problem-solving can happen.  For this, I created hand sketch templates for product designers or engineers to print out for sketching.

Our first library was in sketch, which at the time was the primary tool for designers at Fannie Mae.   We then used DSM (Design System Manager) as a distribution mechanism of the library files

Blueprint Figma components used the new and advanced component properties feature allowing for cascading of components in Figma, just like in code

A clear understanding of how the design system tech stack, integrated into the companies existing tech is key to empower teams with a flexible system .

With Blueprint I setup an architecture that allowed for many entry points of usage depending on the various possible needs of teams.

I setup a token repo to store and handle the conversion and transforming of tokens to various systems at Fannie Mae.  


While I tested several different systems, I ultimately landed on Style Dictionary as the platform of choice to handle this processing

Blueprint-ui is the name I gave our CSS/SASS library which serves as the core to downstream frameworks and libraries.

Built on SASS, it was setup for ultimate modularity giving products the ability to use a render CSS or use the SASS and use mixins and functions to help with design system aspects.

The goal here is the developers shouldn't have to overthink in how to use it and to have various levels of entry depending on product unique needs.

Tailwind CSS inspired, this utility library was build due to the lack of quality CSS developers at Fannie Mae.  This allowed Angular developer easy and fast access to powerful CSS capabilities without having to write the CSS or SASS themselves.

I created an in-depth css variable theming system that allowed for light and dark modes but also does advanced things like detecting the background color set In the variables and automatically sets the appropriate text foreground set for that background

Just like with design principles, coding principles and naming conventions serve as the backbone of consistency, raising quality and increasing efficiency.
 

The feedback framework allows for a structured way to communicate to designers and developers how to approach giving system feedback to the user when interacting the products.

These guides helped developer and designers understand basic of data visualization to aid in getting consistency in usage and styling while ensuring best experience for our product users

Having the right team with the right skills is key to a successful design system program delivery. I aimed for a team, heavy with generalists, ranging from UI & Interactive design to Front-end development.

Where possible, I was able to pull in designers already working in Fannie Mae's centralized design team where their current Fannie Mae domain knowledge enabled them to hit the ground running. Meanwhile, while I started and facilitated the hiring process.

Deeper team management and organization leadership deliverables are covered under confidentiality and I am unable to share.  

It's not pretty nor fun, but sometimes managing resourcing, especially inside of matrixed organizations requires some clever Excel formula programming.

Tracking the skills matrix of individual designers along with how that rolled up to the team is key to aligning with demand or desired org structure goal.

This is then used during the hiring process to help prioritize which candidates helps fill in gaps

At various times in my blueprint oversight I was asked to provide varying levels of resourcing or support models.  This would include the ask of people, capabilities that level would give and risks associated.  Additionally, financial impact and budgetary concerns were calculated and articulated to leadership. 

The first and prioritized area we focused on with Blueprint was with color contrast.  We ensured that known color combinations met WCAG standards.  Ensuring that failing combinations were noted and documented not to use.

Simplified checklists/posters were created to help communicate basic accessibility standards to product teams.  The goal here was to move the needle, slowly but steadily.

I moved our work into 3-week sprints and started focusing on staggered releases centered around Program Increments in a dual-tracked agile setup with both discovery and delivery backlogs.

I created a maturity model to clearly communicate the current state of the design system and its long-term goals. This helped manage leadership and stakeholder expectations by addressing future ambitions while curbing unrealistic timelines.

I mapped out the contribution request process, from intake and triage—splitting into idea, request, or default—through collaboration with team members to formalize the request for steering committee approval and backlog inclusion.

Not everything should be included in the Design System. For Blueprint, I established clear guardrails for decision-making and worked with the team to refine them.

In the corporate world there's always pressure to use in-place systems (sharepoint, confluence, etc) for things like this. However, I wanted complete freedom in all aspects of the site so that we could ensure the site was easy to navigate, and properly showcased the code side of the system while looking good and presentable.

After trying a few other jamstack systems, I ended up choosing Eleventy CMS, which I did the initial setup to be later be handed off
 

I developed a quick token filter and search browser out of HTML, CSS and plain Javascript as a quick tool to help the team when first starting to use the tokens.  It was a quick way to see the choices of the token variables and the nesting assignments. 

I choose and setup Storybook to be our quick component-driven testing.  For our CSS framework

Setting up Storybook controls feature provided a quick way to have adjustable and preview atomic level combinations with the ability to easily copy and paste. 

I guided the team and a group of excited outside designers through some design sprints of logo creation.

As product owner, I made the final selection on one designed by Kirk Lewis, that had the most flexibility, had hints of atomic and connected elements connected together to create a greater composite. It's structural but also organic at the same time.

Both functional and creative marketing posters were created and hung around the various offices to grow the awareness of Blueprint

I designed and printed shirts for the team to wear at company social and community events and also as giveaways / swags to designers and developers.

I worked with the internal design org's creative team to produce a promo video for Blueprint that really celebrated our full release as a scalable enterprise design system

Team member created video bumpers and other short promos for presentations, social gathering, etc

Quick promotion videos were created, highlight the efficiency designers can achieve using the system

We centralized our community building and communication using SharePoint and Microsoft Teams. This provided an excellent, unified space for users and adopters of Blueprint to ask questions, receive updates, and discuss general topics related to improving digital products through design and development.

Additionally, we set up a dedicated Microsoft Teams workspace for the Working Team, complete with its own set of channels. This allowed contributors and the core team to focus on the development and continuous improvement of Blueprint.

Setup and maintained a series of streams of support to help teams adopt and get help with issues or bugs.  

Working with development teams working with Blueprint (Specifically the css library) we were able to create an savings examples

Adoption is a hard metric to track and a hard thing to communicate. My ultimate goal was for the design system to provide value and benefits with ease to downstream products.
However, like any product, we have to be able to show the value to leadership. Inspired by Nathan Curtis, I created this proposal on how we can better rank adoption and communicate it.

This was an example dashboard of an application dashboard showing the latest measurements that would be shared in program level status meetings with leadership

Proposed a monthly report dashboard that combined website page views and visits,  coded component usage, and products being tracked. 

The metrics tracking proposal at large was not carried through due to huge resourcing impacts to the design team and design system during Covid shutdowns.