RealSpend
Internship
May 2024 - Present
Sole Product Designer
Figma
Note: Due NDA restrictions, I am unable to share specific features or full visuals in this case study.
Overview
RealSpend is a 0->1 AI fintech app that helps users track money, plan ahead, and get smart suggestions through chat.
As the sole UX designer, I shaped the full product experience — from structure and flows to branding and design system.
This case study shares how I built the app’s IA and design system to bring clarity to a fast-evolving product.
Challenge
When I joined, there was no structure, just a list of features and a big vision
Design and development were happening in parallel, but without a clear foundation. I faced two core challenges:
Challenge #1
🗺️ No clear Information Architecture
We didn’t know how users would navigate the app, or even what the main tabs should be. Everything was scattered.
Challenge #2
🎨 No visual system
We had no brand, no components, and no tokens, making it hard to scale or maintain consistency across screens.
Design Goal
My goal was to build an app architecture and design system that felt intuitive for users, yet flexible enough to adapt to shifting features and evolving team priorities.
Where the design journey begins ↓
Information Architecture + Nav Bar
Turning feature chaos into a clear app architecture
01 Align on scope and timeline
I facilitated a workshop with the PM and developers to sort through a large feature list. We grouped them by feasibility and timeline — MVP, Alpha, Beta, and long-term — so the team had a shared understanding of what we were building first.
Screenshot of the workshop I facilitated on figjam
02 Group features by user intent
With MVP features as the foundation, we began grouping them to shape the app’s structure. I organized these features based on a broader user journey in financial decision-making: Understand spending→ Manage finances → Improve behavior → Plan ahead → Keep documents organized
03 Define the app structure
After identifying user intents and mapping features, I synthesized everything into a 5-tab navigation structure:
Finance
Accounts
Transactions
Cashflow
Recurring
Plan
Budget
Goals
Investing
Insights
Trends
Nudges
Smart Actions
Docs
Uploads
Tagging
Search
Assistant
Chat-based interaction
After finalizing the structure, I designed a bottom navigation bar that reflected both user needs and our product identity
Instead of defaulting to a generic layout, I approached nav bar design as a strategic decision — one that shapes how users discover value and form mental models of the app.
01 Mapped feature priorities
I weighed user needs, technical effort, and business direction to decide what should be surfaced first.
02 Studied common patterns
I benchmarked mobile navs from Copilot, Monarch, RocketMoney, Origin and more to learn what users expect and where we could stand out.
03 Defined placement logic
To make navigation effortless, I used a thumb reachability map to guide placement.
Here’s how it turned out ↓
Combining insights from competitor benchmarks, internal priorities, and thumb reachability, I designed a nav bar that’s both familiar and effortless to use.
Design System
Building a design system from the ground up
In a fast-moving startup, I created a design system early on to keep up with constant changes. Here’s how I approached it:
01 Set the Foundation with Tokens
I defined the core building blocks as tokens in Figma: type, color, spacing, and layout. This made it easier to apply consistent styles and scale design decisions across pages.
02 Built a Reusable Component Library
Using the token layer, I constructed flexible components that could be reused across the product.
Screenshot of a portion of the component library in Figma
Outcome
🚀 Outcome #1
60+
reusable components
enabled fast iteration and visual consistency across platforms
🚀 Outcome #2
User task success improved
through clearer navigation and simplified flows
🚀 Outcome #3
30%
faster dev handoff
as engineers built directly from the shared Figma system.
Reflection
In a fast-moving startup, I had to make calls without all the answers, adapt when things shifted overnight, and still bring clarity to the chaos. It was the most intense and unpredictable period I’ve worked in, but it also made me faster, scrappier, and way more confident as a designer who can wear many hats and just figure things out.
Building structure was what kept me sane. Once we nailed down the IA and design system, everything started to make sense — for me, for the devs, even for designers who joined later. Honestly, I didn’t expect to love the process of organizing so much, but there’s something really satisfying about bringing order to the mess and knowing that what you’ve built will keep working even after you step away :)
Meet Our Team
We meet every day, and honestly, ✨ I feel so lucky to work with this team! ✨
More Project
Thanks for scrolling. Let’s build something cool together!
© 2025 Jiayi Huang.