Home
Get in touch
Mortgage Comparison Tool
10-Hour Design Challenge
Role
Product Designer
Timeline
10 Hours
Tools
Figjam (ideation), Figma (design), Gemini (copy)

by Miles Mitchell

Contents
Overview
The Challenge
Design an app for home buyers to compare services like mortgages, surveys, and estate agents.
The Constraint
I had 10 hours to complete this task with no access to real users or existing data.
The Pivot
I focused on the mortgage flow, as it required the most complex data input and presented the highest cognitive load for users. I came to the conclusion that if this flow was optimized, the other simpler flows could adopt the same efficient design patterns.
The Solution
A Frictionless Mortgage Flow
I prioritized speed and clarity to keep the user engaged during the data entry process.
Simple navigational start
The home screen allows the user to quickly select their desired service from distinct categories, providing a clear entry point into the specific comparison flow.
Visibility of system status
A persistent progress bar indicates the user’s location within the step flow, reducing cognitive load and managing user expectations.
Ungated information
The "Skip for now" option and the checkbox to opt-out of contact are critical features that allow low-commitment exploration, solving the pain point of gated results.
The Results
I designed the results page to answer the user's primary concern: "Can I afford this?"

My Process
1
Exploring the problem space

2
Refining the scope

3
Designing the solution


Discovery
Exploring the Problem Space
With a 10-hour timeline and no access to real users, I needed to rapidly define the problem space. I relied on secondary research — competitive analysis — to understand user expectations.
Competitive Analysis
To empathize with the user, I simulated the journey of comparing services myself. I documented features, data intake patterns, and user flows across several major competitor apps to identify where the current experience breaks down.

Findings
My analysis revealed four consistent themes that drove my design strategy.
1
High commitment to view results
Majority of products had their results gated on the condition that a user entered personal identifying information.
Opportunity: Make entering contact information optional and allow user to opt out of being contacted
2
Transparency and education
Most sites did not make an effort to explain home-buying complexities or why they were asking for certain data and how it affected the returned results.
Opportunity: Integrate contextual information in the data intake process and returned results that assist user comprehension around the home-buying process.
3
Standard entry points
Naturally, home-buying services are linked to the overall area in which users are looking to buy a home and their budget. These were always the first questions asked.
Strategy: Don't reinvent the wheel — follow the Mental Model and start where users expect to start.
4
Data intake is a heavy
Although they varied in the amount of data required, all services needed information from the user before they could return relevant results.
Strategy: Adopt the step flow of competitors in the data intake process to decrease cognitive load and break the process into chunks.
Problem Statement
As someone who is planning on buying a home, I want to compare home-buying services such as mortgages, inspections, and real-estate agents, so that I can find the most reliable providers within my budget.
Protopersona
To keep my design empathetic without access to user interviews, I utilized my research to create "Felix" — a protopersona representing the first-time buyer.
Who is Felix?
Felix is planning on buying a home but has never been through the process (or at least not recently). Because of this, he likely does not have "preferred" service vendors yet.
What are Felix's needs?
His goal: Felix needs to find the best providers for services associated with buying a home (e.g. mortgages, surveys, and estate agents.)
The following needs are critical to his goal:
1
Affordability: finding services within their budget
2
Reliability: finding services that are backed by good reviews
3
Transparency: simple, accessible info about home-buying concepts
Refining the Scope
After defining a user and synthesizing my research, I faced a critical constraint.
The Issue
There was a substantial difference in the data needed for mortgages, real estate agents, and home inspectors. Designing all of them within the challenge timeframe, would likely come at the cost of less effective solutions.
My Decision
I chose to focus on the Mortgage flow only.
My Rationale
  • This allowed me to tackle the most complex scenario and demonstrate all the steps a user would need to take.
  • If this flow was optimized, the other, simpler flows (for agents or inspectors) could adopt the same efficient design patterns.
  • This pivot kept the established user needs intact
Problem Statement 2.0
Based on this updated focus, I established a new problem statement.
As someone who is planning on buying a home, I want to freely compare mortgages personalized to me in a centralized location with low commitment, so that I can find offers according to my budget without feeling pressured to reach out before I’m ready.
Designing the Solution
With the scope refined to the Mortgage flow, I began to explore how the user would navigate the experience and accomplish their goal.

User Task Flow
I mapped a simple "Happy Path" to ensure the sequence of entering data made sense, plotting the absolutely fundamental user task flow to ensure a logical progression from start to finish.
Mapping the progression from initiating a search to contacting a lender.
Wireframes
I converted these steps into low-fidelity digital wireframes to blueprint the screen layout and information hierarchy — especially iterating on the "Results Card" which was structurally the most complex but also the most critical to the flow. With affordability being a major user need, I sought to ensure the monthly payment remained a focal point, while keeping other controls accessible.
Low-fidelity exploration of the data intake and results display.
The Prototype
With Felix's task flow mapped out and the blueprints designed, I began building the screens, utilizing Figma’s Simple Design System to shorten build time.
The complete "Happy Path" — from the frictionless data entry to the ungated results dashboard.
Validation and Retrospective
In a real-world product environment, I would move my prototype into a validation phase to test my core assumptions, measure the ability of the design to meet critical user needs, and inform the next set of iterations.

1
Validating my "Ungated" Hypothesis
My biggest design risk was removing the email capture during data entry.
  • Question: Does removing this "gate" actually lead to more leads?
  • The Test: A/B Test the "Skip for now" feature.
  • Success Metric: Measure the conversion rate on the results screen vs dropoff on a mandatory email entry screen. If the ungated version drives more total applications than the pre-approvals collected in the gated experience, the hypothesis is validated.
2
Efficiency vs User Comprehension
I utilized tooltips to explain complex terms like "APR" to keep the UI clean, but this risks users missing the information entirely.
The Question: Does exposing educational content directly on the screen improve comprehension, or do the added elements distract users from the task?
The Test: Preference test "Tooltips" vs "Exposed Helper Info"
Resources Used
In a time-constrained setting, I strategically leveraged these resources so that I could focus on the core solution:
  • AI Assistant (Gemini): Without time to acquire subject-matter knowledge, I used AI to validate UX copy and ensure the language I used was industry-standard. I also leveraged it to generate realistic numerical examples for the results page.
  • Component Library (Figma’s Simple Design System): I utilized this library to streamline the design phase. This allowed me to avoid "recreating the wheel" (e.g. buttons, form inputs, etc.) and enabled me to focus on designing the solution.
Thanks for Looking 👀

👋 Thanks for looking! Let's Connect
Made in a lot of places, but most recently Denver, CO 🌄


Made with