Designing a calm and clear personal finance interface focused on everyday transaction management.
Designing a calm and clear personal finance interface focused on everyday transaction management.
Role: UX/UI Design
Scope: Interface design & Interaction flows
Focus: Clarity, hierarchy, and low-friction editing
From overview to transaction details and editing
Problem
Managing everyday finances involves frequent, small interactions — reviewing transactions, understanding spending, and correcting details. However, many interfaces make these tasks more complex than necessary.
Managing everyday finances involves frequent, small interactions — reviewing transactions, understanding spending, and correcting details. However, many interfaces make these tasks more complex than necessary.
Lack of clear hierarchy
Important information is often presented with similar visual weight, reducing scannability.
Lack of clear hierarchy
Important information is often presented with similar visual weight, reducing scannability.
Friction in simple edits
Actions like changing a transaction category require unnecessary steps.
Friction in simple edits
Actions like changing a transaction category require unnecessary steps.
Core insight
Small transaction tasks should require as little friction as possible.
Core insight
Transaction management should feel fast, clear, and low-friction.
Validation
This was a self-initiated concept without formal user research or usability testing. The proposed experience therefore represents hypotheses requiring validation with users in a real banking context.
This was a self-initiated concept without formal user research or usability testing. The proposed experience therefore represents hypotheses requiring validation with users in a real banking context.
Design Approach
Prioritized clarity through hierarchy
Structured key information to support fast scanning and immediate understanding. Rather than increasing information density, I prioritized hierarchy and whitespace to make important transaction details easier to identify.
Prioritized clarity through hierarchy
Structured key information for fast scanning and immediate understanding. I prioritized hierarchy and whitespace over information density.
Integrated editing into the main flow
Simple actions like changing a category are designed to be quick and uninterrupted. Rather than moving users to a separate editing screen, I kept the action within the transaction context to reduce unnecessary steps.
Integrated editing into the main flow
Simple actions like changing a category stay within the transaction context. This reduces unnecessary steps and interruptions.
Reduced visual noise to support trust
Used minimal color and visual elements to create a calm, reliable financial interface. Rather than using stronger visual treatments to emphasize information, I kept the visual language restrained to avoid adding noise to a sensitive context.
Reduced visual noise to support trust
Minimal color and visual elements create a calm, reliable financial interface. The restrained visual language keeps the experience focused.
Optimized for fast interaction loops
Designed flows that allow users to review and act without interruption or unnecessary steps. For simple changes, I chose implicit saving over an explicit confirmation step to keep the interaction fast.
Optimized for fast interaction loops
Designed flows that allow users to review and act without unnecessary steps. Simple changes save implicitly, keeping interactions fast.
Solution
Reducing friction in everyday transaction management
Transaction details can be reviewed and edited within the same screen, allowing quick updates without navigation or confirmation steps.
Reducing friction in everyday transaction management
Transaction details can be reviewed and edited within the same screen, allowing quick updates without navigation or confirmation steps.
Category editing happens in context, without interrupting the user’s flow.
Category editing happens in context, without interrupting the user’s flow.
How it works
01 — Review transaction
01 — Review transaction
Prioritizes cognitive ease by visually separating primary data (amount, merchant) from secondary metadata.
Prioritizes cognitive ease by visually separating primary data (amount, merchant) from secondary metadata.
02 — Edit category in context
Utilizes a bottom sheet to maintain spatial context, preventing user disorientation from unnecessary page loads.
Utilizes a bottom sheet to maintain spatial context, preventing user disorientation from unnecessary page loads.
03 — Continue without interruption
Removes friction by auto-saving the selection, intentionally dropping the standard (but redundant) "Save" button.
Reflection
Designing for clarity and trust
Focusing on hierarchy and restraint helped create an interface that supports quick understanding while maintaining a calm, reliable feel.
Designing for clarity and trust
Hierarchy and visual restraint supported faster understanding while maintaining a calm financial experience.
Balancing speed and control
Removing confirmation steps improved flow efficiency, but introduced the risk of unintended changes — highlighting the need for thoughtful error handling in future iterations.
Balancing speed and control
Removing confirmation steps improved flow speed, but increased the risk of unintended edits.
Future iterations would require stronger error recovery and feedback patterns.
What I would explore further
Introducing undo for quick error recovery
Auto-suggesting categories based on merchant patterns
Evaluating how users respond to implicit save interactions
What I would explore further
Introducing undo for quick error recovery.
Auto-suggesting categories based on merchant patterns.
Evaluating users response to implicit save interactions.
Role: UX/UI Design
Scope: Interface design & Interaction flows
Focus: Clarity, hierarchy, and low-friction editing