Finio - UI/UX Case Study

Wireframes

Low-fidelity wireframes showing structure, layout, and information hierarchy
before adding visual design. Created in Figma after user flow mapping.
01 - Information Architecture
App Sitemap
Overall structure of Finio. Every screen and its relationship to navigation.
✦ Finio App
Onboarding
Splash / Welcome
Set Income
Budget Setup
Goal Prompt
🏠 Dashboard
Balance Card
AI Insight Strip
Quick Actions
Budget Rings
Recent Transactions
📋 Transactions
All Transactions
Category Filter
Search
Add Expense
📊 Budget
Overview
By Category
50/30/20 Rule
Edit Limits
🎯 Goals
Goal List
Goal Detail
Add Goal
Milestones
✨ AI Chat
Chat Interface
Prompt Chips
Insights Cards
👤 Profile
Account Info
Linked Accounts
Preferences
Export Data
02 - User Flow
Primary User Flow
Task: New user discovering they're over-budget and setting a corrective goal.
App Open
First launch
→
Onboarding
Set income & budget
→
Dashboard
View balance & AI insight
→
⚠ Over budget?
Yes →
View Budget
See which category
→
AI Advice
Get specific tip
→
Set Goal
Create savings goal
→
✓ Retained
Motivated to track
03 - Lo-Fi Wireframes
All 7 Screens - Lo-Fidelity
Grey-box wireframes showing layout structure before visual design was applied.
① Onboarding
Welcome + preview card + CTA
② Dashboard
Balance + AI strip + budget rings
③ Transactions
Search + filter chips + list
④ Budget Planner
Overview + category bars
⑤ Goals
Goal cards + progress + milestones
⑥ AI Assistant
Chat UI + prompts + insights
⑦ Profile
Avatar + settings + toggles