Citi Mortgage Calculator Redesign

UI/UX DESIGN | DESIGN SYSTEM | RESEARCH

A significant tool for Citi to acquire new users. It also is the most interactive page when users enter into Citi Mortgage first time.




Overview

πŸ‘€οΈ Target User
AHome-buying and refinancing users who wanna learn about mortgage numbers



πŸ“„οΈ Delivery
UI/UX Design, Design System

❓️Context
Calculator is a citical tool to aquire new users. The PV of calculator pages around 1k/day in 2021.


πŸ‘§οΈ My role
Lead UI/UX Designer




Problem Statement

How to provide a tool for Citi Mortgage customers to play numbers quickly and easily?



Goals

1.Let user get quick and easy numbers

2.Provide scan ability to help user catch information



Final Design

CM (a design consultancy) created the calculator with lack of humanity, but I optimized appealing and provided efficient way to help user get information.


Problem Define


1.Outdated design

2.Uncleared information hierarchy

3.Flat visual - too much gray

Research

I started to learn competitors of current marketing from 2 sides:

1. Features

2. Designs


For features, it was hard to say which one is better since features related to their business and services.




Let's move on to design part.




Key Takeaways




Proposals




Usability Testing

πŸ–₯ Desktop version:

4 Internal users

7 External users by Research Team

πŸ“± Mobile version:

4 External users by Research Team






Final Design




Design System