Designing a mortgage experience for first-time home buyers
Role
UX/UI Designer
Timeline
August – September 2024 (2 months)
Platform
Responsive Website
Deliverables
IA, Wireframes, UI Design, Component System, Style Guide
Context
Open Key Mortgage had no existing website, so I was responsible for building the entire experience from scratch — defining core content, planning the IA, and designing the UI system.
The goal was to create a simple, trustworthy experience that supports first-time home buyers.
Pain point
Navigating mortgages is overwhelming without guidance or structure.
First-time buyers struggle to:
Understand mortgage basics
Compare and evaluate loan options
Calculate monthly payments
Learn unfamiliar financial terms
Know where to begin in the home-buying process
Without clear organization, users lack a cohesive way to learn, explore, and make informed decisions.
How might we provide step-by-step learning
for first-time home buyers?
Research & Insights
Since the company had no previous site, I began with a broad exploration of mortgage industry patterns. I analyzed leading mortgage websites such as Rocket Mortgage, Better.com, Zillow Home Loans.
I identified three key opportunities:
1
Step-by-step home-buying guides support first-time buyers
2
Users frequently turn to mortgage calculators to compare scenarios.
3
Educational hubs significantly improve trust and time-on-site
Defining the Information Architecture
Using insights from competitive research and user needs, I structured a complete IA covering everything a new mortgage user needs. This IA became the foundation for all subsequent design work.
Wireframes
I created wireframes to validate layout, navigation, and content hierarchy. The wireframes ensured the structure was intuitive before moving into UI design.
Solution
Designing a Guided Mortgage Experience
The final solution brings together step-by-step learning, intuitive calculators, and a clear educational structure — helping first-time buyers navigate their mortgage journey with confidence.
Outcome
10,000+
Visitors in the first month after launch
45%
Mortgage calculator usage of total page interactions
The project resulted in:
A complete 0→1 mortgage website built from scratch
Reached over 12,000+ visitors in the first month after launch
Mortgage calculator usage grew steadily, accounting for 45% of total page interactions
Component System & Style Guide
To guarantee consistency across all pages, I built a comprehensive design system.
Takeaways
What I Learned Through This 0→1 Build
Building a financial website from scratch challenged me to think deeply about:
How users learn when a topic is complex
How to structure information to reduce cognitive load
How to design components that work across hundreds of articles
This project strengthened my ability to design clear, trustworthy financial experiences, which directly supports my long-term goal of designing in fintech and digital identity spaces.
