Overview
I introduced motion to our design system, improving dull experiences with dimension and engagement
Building upon my work on ActBlue's design system, I used existing principles as a foundation for motion design guidelines.
Role
Lead designer, researcher
Timeline
5 months
Collaborators
Design and research team
Deliverables
Workshop, north star principles, interactive prototypes
Problem Statement
Lack of guidelines led to inconsistent implementation of motion, creating a substandard user experience
My goal in this project was to create a clear guideline for designers to implement consistent, intentional motion design.
Generative research including competitor research, design literature, and team workshops, showed that compared to competitors, ActBlue products did not adhere to specific motion design standards.
This is an example of under-utilizing motion design. Transitions are harsh and sudden. It lacks visual feedback.
An example of over-designing, this dashboard function uses unnecessary and excessive motion design. It hinders the experience by overwhelming users.
Competitive Analysis
Researching competitors, precedents, and best practices informed my team's direction
I created and led a workshop with the design and research team to identify a direction for motion design in our products.
Participants were asked to explore a set of websites using motion design and note characteristics they liked or disliked and why. I then facilitated a discussion of the implications these freeform thoughts had for motion design in our own organization.
Solution 1
Introducing simple and humanistic motion design to create a welcoming experience
ActBlue’s pride is in small dollar donors and grassroots movements. Motion should reflect this character with a personable, welcoming feel.
Motion should also uphold accessibility, a main priority of the overall design system.
Added motion provides visual feedback
Feels warm and welcoming, not instantaneous and cold
Visual communication improves accessibility
Solution 2
Prioritize purposeful and inclusive motion, and eliminate flashy and trendy design
Simplifying over-designed components of the product reduces mental load, making the product design timeless and more readable.
New design keeps only motion that conveys information
Intentional motion reduces mental load
Keeping data static is more accessible for reading
Way Forward
A defined north star approach to give designers direction
I left ActBlue having provided engineers and designers with a set of progressive design changes to make in the future to avoid pushback. My designs are built upon existing frameworks that make them feasible and easy to implement.
Purposeful
Motion should be functional and improve usability.
Inclusive
Uphold accessibility as a main priority.
Humanistic
Motion should have a personable, welcoming feel.
Classic
Focus on tasteful, timeless, and minimalist interactions.
Delivered defined, actionable guidelines
Identified problem areas in the product
Foundation for developing ActBlue products in the future
I would have loved to see how my designs impacted the brand of our products, but unfortunately my internship ended prior to implementation.