Citi Mortgage

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

Quick Catchup

Go Live ->

Context

Calculator is a critical tool to acquire new users. The PV of calculator pages around 1k/day in 2021.

Target Users

A Home-buying and refinancing users who wanna learn about mortgage numbers

Delivery

UI/UX Design, Design System

My Role

Design Lead

Problem Define

1. Outdated design language
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 see designs in the market!

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

I took the initiative to develop a dedicated design system and guidance for Citi Mortgage, streamlining future adoption. This effort bridged communication gaps between the design and development teams, enhancing collaboration and efficiency.