Fold
A savings app with clearer goals, accessible progress feedback, and implementation-ready motion behavior.
Interaction principles
- Turned abstract balances into named goals with a clear contribution plan and next milestone.
- Designed progress feedback that remained understandable without relying on color or animation.
- Documented motion timing, reduced-motion behavior, and edge cases for implementation.
Case study
Challenge. The original app emphasized the total balance but gave people little help deciding what to save for or whether they were on track. Celebration motion looked polished, yet status feedback depended too heavily on color and animation.
Approach. I reframed the experience around named goals, contribution plans, and understandable milestones. Interactive prototypes explored setup, editing, shortfalls, and celebrations, while accessibility reviews covered contrast, text alternatives, reduced motion, and dynamic type.
Outcome. The final system paired every visual progress state with plain-language status and a useful next action. Motion specifications described intent, timing, interruption, and reduced-motion fallbacks so engineering could reproduce the behavior consistently.
Before & after
A balance-first dashboard became a goal-led savings experience with understandable milestones, plain-language progress, and feedback that remains complete without color or motion.
#0B7A75 → #55C6B7#F2B84B#F7F4EE#20312FColor library
Teal expresses steady progress and trust, while gold marks milestones and positive reinforcement. Warm paper reduces visual noise, and deep green-black keeps savings totals and guidance accessible in every state.
Font library
Outfit gives the mobile interface a clear, optimistic character. Hanken Grotesk supports longer guidance, settings, and accessibility copy where quiet readability matters most.