Magicfin
·Collaborative Finance
Magicfin
A financial management dashboard for tracking balances across currencies, monitoring transactions, and staying on top of market movements.
ROLE
Product Designer
TIMELINE
1 Month
TEAM
1 Designer, 1 Engineer
PLATFORM
Web
TOOLS & TECHNOLOGIES
Overview
Magicfin is a web-based financial management dashboard built for business owners and finance-minded users who manage money across multiple currencies. I was the sole designer on the project, working directly with one engineer to ship a complete experience, from authentication to the transaction and analytics views, in a single month.
Key Metrics
Faster daily financial check-in
Usability score in testing
Replaces 4+ browser tabs in daily workflow
Less context-switching between apps
The Problem
Business owners tracking finances across multiple currencies had no single place to see the full picture. Their daily routine involved:
Opening 4+ browser tabs every morning to check TRY, USD, EUR, and GBP balances separately
No clear way to tell at a glance which company transactions were active versus pending
Exporting to spreadsheets just to review gross volume trends over different timeframes
Research & Discovery
Burak K.
Istanbul · RetailCo
I'm constantly switching tabs to check what my USD balance looks like against my TL. I just want one screen.
Ayşe T.
Ankara · LogiTech
The gross volume report is the first thing I look at every morning. Getting it in one click would save me 20 minutes.
Can Y.
Izmir · GrowthCo
I have 4-5 companies that pay me and tracking which ones are active vs pending is a mess.
PAIN POINTS
Multi-app juggling
84%
Manual reconciliation
71%
Transaction visibility
63%
USER GOALS
Unified currency overview
Real-time transaction status
Downloadable volume reports
KEY INSIGHTS
check financial data every morning
tabs open during daily check-in on avg.
of weekly follow-up on pending transactions
Hears from colleague
Visits landing page
Reads feature list
Creates account
Verifies email
Sets up profile
Connects currencies
Imports transactions
Sets time range
Checks daily balance
Reviews transactions
Views volume chart
Downloads report
Shares with accountant
Compares periods
ONBOARD · USER THINKING
"Why is connecting my USD wallet taking so many steps? My team's hitting errors on the EUR setup."
DESIGN OPPORTUNITY
Simplify currency connection: the biggest friction point. A guided flow with inline error recovery.
SATISFACTION SCORE
From Research to Interface
Information Architecture
Mapped user flows and content hierarchy before drawing a single pixel. Kept the navigation flat to match research findings.
Lo-fi Wireframes
Sketched layout options in FigJam to align on structure with the engineer before committing to visual design.
High-fidelity Design
Refined with brand colors, spacing system, and a component library built in Figma and handed off directly to the engineer.
KEY DESIGN DECISIONS
Why a unified view instead of separate pages?
Research showed users spent most time context-switching. A single dashboard eliminates navigation fatigue for the daily check-in.
Why sidebar navigation over top tabs?
Sidebar scales better to future features and mirrors the mental model from existing financial tools users already knew.
Why show total balance before individual currencies?
Users want to know their aggregate position first. Individual currency drill-down is secondary to the morning overview.
Why cards over a table-based layout?
Cards provide better visual hierarchy for sparse data and scan more naturally at a glance on wider screens.
Design Solution
I designed a unified dashboard that consolidates multi-currency balances, transaction activity, volume trends, and market news into a single, scannable interface.
1. Insight Dashboard
A single view combining total balance, transaction list, gross volume chart, and market news. Configurable time ranges let users spot trends without leaving the main screen.
2. Multi-Currency Wallet
Simultaneous balance cards for TRY, USD, EUR, and GBP. The "Switch between wallet" interaction lets users flip currency contexts without navigating away.
3. Transaction Status View
A company-level transaction list with clear Active and Pending status indicators, sortable by date. Replaces the need for separate spreadsheet tracking.
DESIGN SYSTEM
Component Library
NAVIGATION
BALANCE CARD
Total balance
$54.523,40
US Dollar
$40.484,20
Euro
€45.678,90
Pound
£38.250,75
PERIOD SELECTOR
TRANSACTION TABLE
Silverstone Emporium
March 1, 2024
Phoenix's Pizzeria
September 1, 2024
The Cozy Corner
January 1, 2024
Demi's Boutique
April 1, 2024
GROSS VOLUME CHART
BUTTONS & INPUTS
Key Features
Insight Dashboard
A single command center showing total balance, transaction list, gross volume chart, and market news. Configurable 7-day, 30-day, and 2-month timeframes to scan performance at a glance.
Multi-Currency Wallet
Track TRY, USD, EUR, and GBP balances simultaneously. The "Switch between wallet" interaction lets users flip between currency views without leaving the main dashboard.
Clean Authentication
A distraction-free login experience designed to get users to their financial data as fast as possible. The soft gradient background and centered layout keep focus on the form.
Outcomes & Impact
Shipping a full product in a month meant every decision had to count. Here's what landed:
Streamlined Daily Routine
Users reported spending significantly less time switching between apps to understand their financial position. The morning check-in went from multiple tabs to a single dashboard view.
Clearer Currency Visibility
The side-by-side currency card layout made it immediately clear where money was held across wallets, something previously only visible by opening each account separately.
Full Product in One Month
Tight collaboration with a single engineer meant making every design decision count. We shipped authentication, dashboard, transaction view, and report download in a single sprint.
Key Learnings
Localization lives in the details
Currency formatting turned out to be surprisingly loaded. Early mockups used dot notation for thousands, but Turkish users read commas differently than Western European ones. A small detail that surfaced quickly and shaped the final number display.
Front-load structure, defer polish
Working with one engineer in a compressed timeline taught me to make structural decisions early and defer surface polish. Knowing what the engineer could build confidently in a day changed how I scoped each design pass.
Subtraction is the hardest design work
Financial dashboards pull toward "more is more" — there's always another metric worth showing. The hardest work wasn't deciding what to add. It was defending what to leave out.
NEXT PROJECT
Outlinx
Simplifying outlet operations for teams