KLIRRA–

Fictitious bank – KLIRRA

Client

UI – Design

Duration

1 week

Field of study

KLIRRA:

Redesigning Mortgage Calculations for Young Adults

I designed a UI project that simplifies mortgage calculators, making them more accessible and engaging for young adults navigating homeownership. I also explored how the experience would look if one of Sweden's biggest housing market websites “Hemnet.se” included a mortgage calculator.

Traditional Mortgage Calculators Overwhelm Young Adults

Problem:

Mortgage calculators often fail to meet the needs of young adults. Many find them difficult to use due to complex terminology, an excessive number of questions, and explanations that are unclear or irrelevant to their situation.

How can I design a mortgage calculator that is clear, concise, and user-friendly for young adults?

Research:

Young Adults Value Simplicity, Relevance, and Clear Explanations

Through interviews and user feedback, I identified key needs:

Quick answers: Users want to know what type of property their savings can afford without lengthy processes.
Simple structure: Fewer, more targeted questions prevent frustration.
Plain language: Accessible explanations empower users unfamiliar with financial jargon.

These insights informed my approach to exclude unnecessary questions and focus on actionable results.

1. I conducted desktop research to examine how other Swedish banks design their mortgage calculators.
2. Articles reveal that young adults often struggle to understand the topic.
3. I created a design system using hemnet.se colors and theme

Design Process:

User-Centered Approach for Intuitive Mortgage Calculations

Visual Style:

Inspired by Hemnet’s color palette, I emphasized clarity in layout and typography.
Used the Inter sans-serif font for its readability and modern appeal, ensuring accessibility for young users.

Wireframing & Prototyping:

Created simple wireframes on paper, later brought to life in Figma.
Designed an interactive experience: Users answer questions on the left while seeing blurred, evolving content on the right. This provides a sense of progression, revealing the final estimate after all questions are completed.

Feedback:

Refining Usability and Clarity Based on User Insights

Feedback provided actionable insights:

Alignment Issues: Early versions had misaligned elements, now corrected for a more polished look.
Color Confusion: Purple initially caused misunderstandings and was refined for clarity.
Readability Improvements: Adjusted font sizes to meet web accessibility standards.

One young adult commented:
"This is so easy to understand, and I love that I can see what’s next (loan amount and monthly cost). It makes answering these questions feel purposeful."

4. I sketched wireframes on paper to quickly move towards a finished prototype, as time was a major constraint.
5. Feedback indicated that the alignment was not neat in this area.
6. Feedback indicated that the alignment was not neat in this area.
7. Feedback revealed confusion about what the purple color represented.
8. Feedback indicated that the text was unclear and needed to be larger, increasing from 9px to 12px.

Results:

A Simplified, Engaging Tool for Mortgage Calculation

The redesigned calculator empowers young adults to:

Understand affordability: See property price ranges based on savings.
Make decisions confidently: Access clear and actionable financial information.
Engage quickly: Avoid frustration with unnecessary questions or complex terms.

Reflection and Lessons Learned:

Growth as a UI Designer: Mastering Figma and Process Efficiency

This project significantly advanced my skills in UI design and Figma:

Auto Layout: Streamlined design consistency, saving time on revisions.
Component Creation: Improved efficiency for updates and iterations.
Design Foundations: Learned the value of getting alignment, spacing, and structure right from the start.

These lessons are now integral to how I approach future design challenges.

Team

Solo

Other Projects