Overview
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.
Role
Designer
Timeline
5 months
Collaborators
Design VP, managers, lead designer, engineers
Deliverables
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.
Expectation
Designers and engineering use matching component libraries so design mock-ups match the live product.
Reality
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.
Improved documentation process for designers
Facilitates better communication between engineers and designers
Provide direction for developing ActBlue products in the future