EveryDollar Design System
Keeping product teams in sync with a brand aligned and product-focused design system.
A working demonstration of the responsive components with their respective properties (variants, instances, booleans).
Built a scalable design system that aligned product teams, reduced UX inconsistency, and translated brand into a cohesive in-product experience.
Impact
Improved cross-team consistency, reduced development rework, and enabled faster, more aligned product delivery
Role
Led system definition and drove cross-team alignment as the most senior designer
Design system components of the EveryDollar app experience.
Problem
Five product teams were designing in parallel without a shared system. Patterns diverged, interactions became inconsistent, and the overall experience felt fragmented. This increased cognitive load for users and slowed development due to lack of a common foundation.
Requirements
Needed a lightweight but scalable system—flexible enough for a small team, but structured enough to support real product complexity. The system had to improve consistency without introducing process overhead.
Solution
Created a brand-aligned design system that balanced consistency with flexibility.
Structured the system across five layers:
– Principles
– Foundations
– Components
– Patterns
– Templates
Defined clear usage guidance and guardrails so teams could make faster decisions without drifting from a cohesive experience.
Extended brand into product by translating marketing identity into interaction patterns, visual language, and component behavior.
Business Context
Built to support multiple teams shipping in parallel, with a need to improve speed, consistency, and overall product quality without slowing development.
Results
Reduced UX fragmentation and improved consistency across teams
Decreased QA issues and development rework
Enabled faster handoff and more efficient collaboration
Established a clearer, more cohesive product brand
A snapshot of semantic values, typography, and icons documented for the EveryDollar design system.
Deep Dive ↴
Constraints
The system was built alongside active product development in a “building while shipping” environment.
Design principles and product branding were still evolving, with no dedicated creative leadership. I stepped into that gap to drive cohesion across the experience.
Balanced strong and frequent leadership input with UX fundamentals to ensure decisions remained grounded and usable.
Additionally, the brand existed primarily in marketing and had not yet been translated into product—requiring definition of how it should function within an interactive experience.
Design Decisions
Prioritized a lightweight system to encourage adoption, avoiding unnecessary complexity or rigid process.
Focused on practical guidance over exhaustive documentation to help teams move faster while staying aligned.
Structured the system to scale—from high-level principles to implementation-ready templates—so it could support both strategic and tactical work.
Documentation
Organized the system into five layers: Principles, Foundations, Components, Patterns, and Templates—bridging strategy and execution.
Partnered with another designer to define clear guardrails and usage patterns, enabling teams to make consistent decisions independently.
Outcome
The product shifted from fragmented to cohesive as shared patterns were adopted.
Consistency improved across interactions and flows, reducing user friction and cognitive load.
Teams moved faster with fewer inconsistencies, and collaboration across design and engineering became more efficient.
At the same time, the product’s brand became more clearly expressed, resulting in a more intentional and unified end-to-end experience.
Sets of components and documented "do" and "do not" use guidance.