Unifying a Mobile Design System for Productivity and Fintech Workflows
Design
•
Work
Modern productivity platforms often evolve faster than their underlying systems. As features ship across teams, small interaction decisions accumulate, creating inconsistency, accessibility gaps, and cognitive friction. This project examines how foundational interaction components, particularly buttons and action states, can quietly shape trust and error prevention in high-frequency, high-stakes mobile workflows. Rather than focusing on visual polish, the work centers on behavioral consistency, accessibility as infrastructure, and design decisions that scale without slowing delivery.
Role
UX Designer · Design Systems and Product Strategy (Internal, Client-Confidential)
Platform
Mobile productivity and financial workflow application
Collaborators
Product Managers, Engineers
Tools
Figma
Timeline
2 months
Confidentiality Note
Some details have been abstracted to respect client confidentiality. This case study focuses on system-level design thinking, accessibility, and interaction consistency rather than proprietary implementations.
Context
This mobile platform supported high-frequency productivity tasks layered with financial actions, such as reviewing transactions, approving requests, and tracking progress across workflows.
Because users operated in time-sensitive and accuracy-critical contexts, the interface needed to be:
Predictable
Accessible
Calm under pressure
Over time, multiple teams introduced variations of core UI components, especially buttons, resulting in inconsistent behaviors and accessibility gaps across screens.
The Challenge
How might we create a unified mobile design system that improves accessibility and consistency without slowing down feature development?
This challenge was not about visual polish.
It was about trust, motor accessibility, and cognitive clarity in fintech-adjacent workflows.
Audit and Diagnosis
I began with a system audit focused on interaction behavior rather than aesthetics.
What I examined
Button variants across primary flows
Tap target sizes and spacing
Color contrast and state visibility
Disabled, loading, and error states
Inconsistent usage of primary vs secondary actions
Key Findings
Buttons with identical labels behaved differently across screens
Primary actions were visually ambiguous in critical flows
Tap targets frequently missed mobile accessibility guidelines
Loading and disabled states lacked consistency, increasing uncertainty during financial actions
These inconsistencies increased cognitive load and risk, particularly for users relying on assistive technologies or operating in low-attention environments.
Strategy
I defined a focused system strategy anchored in four principles:
Accessibility as a baseline, not a layer
Behavioral consistency over visual variety
Clear action hierarchy in high-stakes flows
Components designed for reuse and extension
Buttons were selected as the entry point for system unification because they appeared in every critical workflow and directly impacted user confidence.
System Design Focus: Button Architecture
Rather than expanding variants, I reduced the system to a small, intentional set:
Button Types
Primary
Secondary
Tertiary
Destructive
States (standardized)
Default
Pressed
Disabled
Loading
Error
Each state was documented with:
Visual behavior
Motion feedback
Accessibility annotations
Usage guidelines
Outcome
Improved consistency across mobile flows
Reduced ambiguity in primary financial actions
Established an accessibility-ready foundation for future components
Created a shared reference point for designers and engineers
Reflection
This work reinforced that in productivity and fintech environments, small interaction details carry systemic weight.
Buttons are not decoration. They are commitments.
Share
Copy link
