A secure web app designed to help users manage payments, track expenses, and build better budgeting habits. This case study focuses on clear data visualization, intuitive user flows, and creating a trustworthy, user-centered financial experience.
Finsight is a mobile-first app designed to help everyday users take control of their finances. With budgeting tools, smart spending insights, and secure payments, it empowers people to manage their money with clarity and confidence — without the overwhelm common in many finance apps.
The Core Challenge
Today’s finance apps often leave users feeling confused, anxious, or mistrustful. Many present cluttered dashboards, complex setups, and impersonal features that fail to address what users actually need: simplicity, transparency, and control over their financial decisions.
Our Goal
Our goal was to design an intuitive, trustworthy experience that helps users easily track spending, set personalized budgets, and make secure payments — all within a calm, clear, and accessible interface.
To understand where Finsight could stand out, we analyzed competitors in the financial space — looking closely at their strengths, weaknesses, and opportunities for improvement.
Competitive Analysis
Strategic Insight
While apps like Mint and Rocket Money offer useful tools, they often compromise trust with cluttered interfaces, ads, and upselling. Finsight fills this gap with a clean, ad-free experience focused on empowering users through real-time insights, seamless payments, and optional offers that truly support their goals.
While the competitive audit revealed market gaps, it was equally important to understand who we were designing for — which led us to define our core user persona.
Say Hello To Jordan
Jordan is a freelance UX writer working with tech startups. They’re comfortable with technology but don’t want to spend hours setting up spreadsheets or digging through financial data.
With a clear understanding of our core user, we mapped key flows to ensure their journey through the app was simple, intuitive, and focused on their needs.
We identified six key flows to cover onboarding, budgeting, payments, and user settings. Each flow is directly tied to a core user need.
User Stories & Flows
As a user, I want to view a visual breakdown of my spending, so that I can easily understand where my money is going.
User Flow 1
As a user, I want to make secure mobile payments, so that I don't have to carry physical cards and can track my transactions instantly.
User Flow 2
As a user, I want to set a monthly budget goal for specific categories, so that I can track my financial habits and stay in control of my spending.
User Flow 3
As a user, I want onboarding to be quick, so I can start tracking fast.
User Flow 4
As a user, I want to manually add cash payments or external expenses, so that I can keep my budget tracking accurate even when I pay outside the app.
User Flow 5
As a user, I want to discover recommended financial products like credit cards or loans, so that I can make smarter financial decisions that fit my needs.
User Flow 6
With our core flows mapped and user stories defined, we moved into low-fidelity wireframing to explore layout, navigation, and interaction patterns — bringing the experience to life on screen.
Sketching the Experience
Low-Fi Wireframes
We translated key user flows into early wireframes to explore layout, navigation, and interaction patterns before moving into high-fidelity design.
Low-Fi Wireframes
With our core layouts established, it was time to define the visual foundation that would guide the product’s look and feel.
The style guide shaped Finsight’s visual identity — from color and typography to iconography — ensuring consistency and clarity across every screen.
Style Guide
Logo & Design System Foundations
The Finsight logo merges an abstract eye and dollar symbol to express financial clarity, insight, and trust. This foundation extends into the app’s core UI system — with buttons, forms, navigation, and icons designed for simplicity, consistency, and accessibility across every touchpoint.
Logo & UI Elements
Typography
Typography
Color Palette
Color Palette
Iconography
With the visual system in place, we moved into high-fidelity design to translate the brand into a polished, intuitive user experience
The final UI screens showcase a clear, polished experience ready for users.
Final UI Designs
High-Fi Wireframes
These high-fidelity screens translate our design system into a clear, cohesive user experience across all key touchpoints.
Hi-Fi Wireframes
With the visual experience refined, we focused on delivering core features that bring real value to users and help Finsight stand out in the crowded financial space.
User Testing & Outcomes
We tested the high-fidelity prototype with real users to validate the design, uncover pain points, and ensure the experience met user needs.
Testing Setup:
5 participants, ages 25–40
Remote unmoderated usability tests
Key tasks: onboarding, setting a budget, making a payment
Key Outcomes:
90% completed onboarding without confusion
80% set a budget in under 2 minutes
100% found the dashboard clear and easy to navigate
User Quotes:
“I love how calm and uncluttered this feels.”
“Setting a budget was so much easier than in Mint.”
“The large amount of bright colors felt a bit intense.”
Final Thoughts
Finsight was an opportunity to design a product that helps users feel more confident and in control of their finances. Through research, testing, and iteration, I focused on creating a clean, intuitive experience that balances usability with trust. This project strengthened my skills in designing clear data visualizations, crafting user-centered flows, and addressing the unique challenges of financial products. I’m excited to apply these insights to future projects that aim to improve people’s everyday lives.
Takeaways & Next Steps
Reflecting on user feedback and outcomes, we identified key learnings and opportunities to improve the Finsight experience.
Key Takeaways:
Users appreciated the clean, uncluttered interface
Smart budgeting and payment flows were intuitive and easy to complete
Bright color use needs refinement to feel calmer and less intense
Next Steps:
Refine color palette for better visual balance
Explore dark mode for accessibility and preference
Conduct additional usability testing with a larger, more diverse user group
