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 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.

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

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.

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.

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

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.

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 designed and printed shirts for the team to wear at company social and community events and also as giveaways / swags to designers and developers.

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.

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.