Mortgage Calculator PLUS
⭐️ 4.2 App Store Rating |1K+ Users | iOS - Android
Company: Digitalchemy LLC
Duration: Approximately 4 Months
Team: PLUS Design Team
My Role: UI / UX Designer
Case Study: Mortgages Made Beautiful (Just Not Necessary)
I led a sleek, modern redesign of mortgage tools… for an audience that wasn’t ready to let go of the old.
Overview
Designing Clarity in a Crowded Market
As an up-and-coming UX designer, I was given the opportunity to lead a 0→1 product: a modern mortgage calculator app for Digitalchemy LLC. The goal? Help everyday users demystify home buying with a clean, intuitive experience.
I dove deep into user research and competitive analysis, collaborating closely with the founder to shape the product vision—from scribbled notebook sketches to interactive Figma prototypes.
The final result was a polished, user-friendly app grounded in clarity and simplicity. But despite the strong UX, the launch proved one hard truth: people weren’t looking to replace the clunky, outdated mortgage tools they already trusted (or Google). The design succeeded. The market? Not so much.
⬆️ Above - Visual of an expensive house I created for the Mortgage PLUS app. Vector illustration.
The Problem
A cluttered field stuck in the past.
Early research uncovered a major issue: the market was drowning in mortgage calculators. Most were outdated relics from the early web—cold, clunky, and confusing.
Here’s what stood out:
❌ No clear affordability guidance
❌ Outdated UI—think Windows XP energy
❌ Confusing flows and data overload
❌ No way to easily reset or start over
❌ Zero joy—just cold, corporate math
The opportunity? Reinvent the experience with clarity, simplicity, and a human touch.
⬆️ Above - Visual of a modest affordable house I created for the Mortgage PLUS app. Vector illustration.
Owning the UX Vision
My core role: designing from scratch, testing every idea, and bringing it all to life.
At Digitalchemy LLC, I led the full end-to-end UX for Mortgage Plus—a sleek new mortgage calculator app aimed at simplifying home affordability. As the sole UX designer on the project, I handled it all:
- Conducted deep research and competitive analysis
- Created user personas and journey flows
- Sketched concepts and built rapid Figma prototypes
- Designed the full UX and visual language
- Crafted custom iconography and animations
- Collaborated with devs to ensure a smooth build
- Delivered detailed specs and assets for launch
From paper sketches to final animations, this was my full-stack design experience—an ambitious product that taught me how to think holistically, move fast, and sweat the details.
⬆️ Above - Visual of an expensive house I created for the Mortgage PLUS app. Vector illustration.
The Work in Action
From coffee stained sketches to final sleek mobile app
This is where we got down to mortgage explaining business—all the research, concepts, early UX flows, and decisions.
⬆️ Above - Before the concepts and user research came one key question:
What actually goes into a mortgage?
Research
Starting with prep, not pixels.
Like any good design journey, it began with groundwork. I downloaded and documented every mortgage-related app I could find across the App Store and Google Play. Then I tackled the endless stream of mortgage calculator websites—cataloging features, visual styles, and user flows.
From there, I built a data table and narrowed it down to the most established tools—based on longevity and user volume.
With the competitive landscape mapped, I shifted focus to the users themselves: people preparing to buy, or already in the process of purchasing, a home.
Research Highlights
Age
First time home buyers are usually in their mid 30s based on national data.
Favorites
To calculate details, many already have their favs apps or websites.
Families
Majority of buyers are those with families or those planning for it.
Stress
Most new buyers are trusted with how difficult mortgage information is.
These are generally people with strong incomes of roughly 70K+
For example, Karl’s Mortgage Calculator app has 1 Million + users
53% of households generally have dual income.
Credit scores, interest rates, and affordability rank as top stress points
Building Personas - Meet The Users
👤 User Persona: Kazuhira “Kazu”
Age: 35
Occupation: Aircraft Systems Engineer
Location: Nagoya, Japan
🧠 Background
Kazu is a dedicated aircraft engineer working for a major aerospace company. Logical, methodical, and deeply analytical—he brings those same qualities home to his personal life. He’s in a stable relationship with plans to start a family soon.
🏡 Goals
- Purchase a first home with his partner in America
- Get a clear, stress-free understanding of what they can realistically afford
- Avoid predatory lending and feel confident about mortgage terms
- Make smart, long-term financial decisions for his future family
😖 Pain Points
- Feels overwhelmed by outdated or overly complex mortgage tools
- Lacks trust in financial calculators with unclear assumptions
- Finds most tools aren’t localized or tailored to non-U.S. users
- Wants something sleek, mobile-friendly, and respectful of his time
🔍 Needs
- An app that offers clear breakdowns of affordability
- A modern UX that guides rather than confuses
- Tools that are transparent and easy to compare
- Support for international users or future planning
👤 User Persona: Jessica
Age: 27
Occupation: Café Manager
Location: Austin, TX
🧠 Background
Jessica recently got promoted to manager at her local café. While she didn’t finish university, she’s proud of the career she’s building through hard work and consistency. She’s currently living with roommates on the edge of the city and dreams of having a place of her own—ideally closer to work and her parents’ home.
🏡 Goals
- Buy her first home in a safe, affordable neighborhood
- Cut down on her stressful morning commute
- Start building long-term financial stability
- Understand how mortgages work and what’s realistic for her income
😖 Pain Points
- Feels intimidated by financial language and mortgage jargon
- Doesn’t know where to start or which numbers truly matter
- Worries she’ll get a bad deal or overcommit financially
- Most tools seem cold, impersonal, or tailored to wealthier buyers
🔍 Needs
- A mortgage calculator that explains things simply
- Support for budget-conscious first-time buyers
- Clear indicators of what’s affordable vs. risky
- A design that feels friendly, modern, and non-judgmental
Exploring UX Concepts
Paper, Pencils & Caffeine-Fueled Clarity
After digging into mortgages, competitors, and user pain points, it was time to bring the vision to life.
With a focus on what truly matters to home buyers, I collaborated closely with the founder and dev team—starting with whiteboard sketches and evolving into early interactive prototypes in Figma.
Final Wireframes
After several iterations and prototype rounds, this layout emerged as the clear winner—proven fast and intuitive during Figma prototype testing.
Next, I shifted focus to mapping the full UX flow, defining how users would navigate and interact with every step of the experience.
Information Architecture
A quick IA map helped bring everything home.
With the core structure locked in, I moved forward designing the full UX flow—while simultaneously exploring visual design directions for the final look and feel.
From Wireframes to Wow
Quick Figma prototypes helped refine the wireframes into a polished, intuitive UX flow.
All that was left? A bold, modern visual style to bring it to life.
Designing the Look
Just A "Few" Concepts
The goal was to elevate the user experience with clean, modern aesthetics that made a strong first impression.
I explored dozens of color palettes—refining, testing, and iterating—until the final visual direction struck the perfect balance of clarity and emotional connection.
Careful Details
Every element was crafted with intention—from precise color hex codes and custom icons to slider styling, animations, and typography. The small things added up to a sleek, modern experience.
Visuals
That make you smile
TPart of the fun was making the various visuals for the modals and screens. Everything made in Adobe Illustrator and then set up for animations. My favorite one is the visual I made for the credit score.
Animations
An opportunity to learn
This was my first mobile project involving custom animations. I created the vector assets in Illustrator, animated them in After Effects, and exported everything as Lottie-ready JSON files—dev-friendly and lightweight.
Modals
Helpful clarity, right when it’s needed
To help users better understand key mortgage terms, we introduced info modals featuring bright, eye-catching animations. These quick helpers offered friendly explanations without disrupting the overall flow.
Final Design ✨
Ready to Shine in Light or Dark
After countless iterations, testing, and refinement, the final product was polished and production-ready—designed for clarity, beauty, and seamless use in both light and dark modes.
App Launcher Icon
I explored multiple design directions before landing on the one that resonated most with users. Below is the evolution of concepts that led to the final icon.
Results
A beautiful tool in a crowded sea.
Despite a fresh design and informative, user-friendly UX, the app struggled to gain traction in a market flooded with long-standing, “good enough” tools—and even Google’s built-in mortgage calculator.
Still, this project was a huge learning milestone for me: I designed an app from the ground up, collaborated across disciplines, and created my first Lottie JSON animations for real-world use.
Sometimes, even the best design can’t outpace market inertia—but it can still level you up as a designer.
Disclaimer:
The work shown here was created during my time at Digitalchemy LLC and is presented solely for personal portfolio use. All visuals reflect my role and contributions, and are shared respectfully to highlight process and craft—not for public or commercial use.
Startup Reflections
Lessons, Lattes & Learning to Think Like a Dev
During my time at Digitalchemy LLC, I grew rapidly as a UX Designer. Collaborating with lead devs taught me to think like an engineer while designing. From Art Director Julia, I learned the power of meticulous visual detail. From Founder Aidan, I absorbed the art of creative exploration and strategic thinking. And Elena? She taught me what real testing looks like.
Every day on that team meant growth, support, and strong-ass coffee.
I still remember sketching animation ideas for the mortgage app by the water in Bellevue—wondering, “How do I make a credit score visually engaging?”
Small moments. Big lessons.
Here’s what teammates had to say…
"...Franz is constantly improving his skills..."
Vladimir — Lead Developer, Digitalchemy LLC
October 10, 2019