ActBlue 2022

ActBlue 2022

Elevating and Refining the Blueprint Design System

Elevating and Refining the Blueprint Design System


I proposed accessibility updates and improved documentation and specifications to streamline development

I created comprehensive design documentation and proposed a simplified, more accessible design component library.




5 months


Design VP, managers, lead designer, engineers


Design system documentation, roadmap presentation

Problem Statement

Designers and engineers did not adhere to the design system due to unclear documentation and communication

A survey of ActBlue's products revealed various legacy components and one-off elements designed for single use which are not included in the design library.

Chatting with senior designers and engineers helped me understand that they do so because there is no protocol in place for discussing new design components.


Designers and engineering use matching component libraries so design mock-ups match the live product.


Design libraries are not updated, and have mismatching components so the product is inconsistent.

Solution 1

Simplify the design library by identifying essential components to keep and improve

Centering the design system around the core components allowed me to eliminate unnecessary components from our designs and focus on creating quality documentation for essential elements.

Cohesion by removing inconsistent components

Pinpoint areas of improvement

Solution 2

Propose actionable accessibility changes for frequently used components, making the biggest impact with less work

I also focused on improving the design components that would make the biggest positive impact on our users' experience.

ActBlue takes pride in inclusion and accessibility, so I proposed feasible changes such as improving color and font contrast, as well as information hierarchy for screen readers.

Improved accessibility metrics while staying true to the designs

Updated components to make the most impact

Solution 2

Providing comprehensive documentation and specifications to improve communication across teams

Design libraries for designers and engineers were not consistent with each other. To address the discrepancies, I created a new documentation system that designers and engineers alike can refer to as they work.

Parity between design system libraries for designers and engineers

Document how and why components should be implemented

Way Forward

An updated design system that upholds accessibility, and can be quickly implemented by engineers

This simplified, up-to-date design library will serve to inform the development of ActBlue products in the future. Designers and developers will have a shared document to refer to when creating ActBlue products.


Motion should have a personable, welcoming feel.


Focus on tasteful, timeless, and minimalist interactions.


Motion should be functional and improve usability.


Uphold accessibility as a main priority.

Improved documentation process for designers

Facilitates better communication between engineers and designers

Provide direction for developing ActBlue products in the future