Kasa

Work

About

CV

Property page

First time home-buying for millennial city dwellers

View final designs

overview

My role: UI Designer

Secondary research, Moodboards, Style Guide, Responsive web designs

The team

UI designer, and UI mentor

Project timeline

8 weeks

Background

This is my capstone project for my UI Design specialization at CareerFoundry. As someone interested in all forms of investing, I set out to find what blocks millennials from purchasing homes during the COVID-19 pandemic.

Problem

Millennials prefer a refined interface design and realtor availability that are not standard practice for previous generations.

background

“>”>Millennials dominate the buying market

The COVID-19 pandemic has affected every industry, and real estate is no exception. Even as unemployment remains high, lower interest rates and working from home protocols contribute to many ending their leases and buying homes. Millennials dominate the buying market, making up the fastest growing segment of buyers today, according to a recent National Association of Realtors report. In typical fashion, millennials rely on the internet to look for homes, find multiple mortgage quotes, and communicate with realtors.

Challenge

Tailoring the home-buying experience for millennials

The goal of this UI project is to design a home-buying experience tailored to millennials looking to buy homes in the city for the first time.

The question that guided my designs was

How might we create an experience useful to first time millennial home buyers?

outcome

A progressive web app

The outcome of this effort is a progressive web app, Kasa, which is a real estate app catered to millennial users who are buying a home for the first time.

Research

Millennials rely on the internet to learn about buying their first home

of older millennials found their home through a mobile app

of millennial home buyers live in the city

of buyers hire a real estate agent during the buying process

Note: In this project, millennials are defined as those born between 1981 and 1996

information architecture

User flows that optimize for efficiency

User flows were made with the target population in mind. Allowing for saving properties was essential, since millennials do most of their home buying research online. Based on this flow, I designed the relevant screens. Before jumping into the design, I developed a moodboard to guide the look and feel of the platform.

moodboard

Designing for the modern city dwellers

Urban exodus, who?

Many speculate that domestic migration patterns in the U.S. point to an urban exodus. Although real estate trends can indicate this phenomenon in the short term, it may be short lived. Lower rates of city dwellers is caused by factors including higher death rates and lower birthrates caused by the global pandemic.

Rationale

For this reason, my target user group is millennials who are looking to buy their first home in the city. Based on this, I created a moobodard that was minimalist, bold, and approachable.

Using strong colors paired with the Helvetica typeface makes the product feel approachable yet exciting, two qualities which are important when house-hunting.

The color pairings are meant to be fun, invigorating, and aspirational, yet maintain a modern sophistication.

Design Process

Lowering barrier to entry during onboarding

Onboarding experience goals

Low barrier to start searching for homes
Collects essential information
Sets user expectations

How are these goals achieved?

Short, two-question survey
Cuts down questions to the most important information
Questions let users know how they can filter homes on the platform

Separating the property list and map views

Trying to do too much in one screen

Initially, users could view properties by moving a map across the screen and watching the horizontal property list populate by area.

This option included map information, but also specifics on the properties themselves. Because the nature of the information is very different visually, I decided to de-clutter the page and separate the property list and map into separate pages.

Not only that, but horizontal scrolling is not standard and can be hard to read compared to vertical scrolling.

Adding key information and correcting hierarchy issues in the property page

Using type size and white space to address hierarchy issues

Early versions of the property page lacked navigation and key information like number of bedrooms and square feet
Adding top navigation helps users refine home searches from the property page and gives the ability to go back to the list or map view
Incorporating a type scale added hierarchy for the property page. It also affected the white space balance and draws attention to the most important property information

Helping users find the right agent quickly

The three question agent survey gives users a list of agents that match their needs

My research uncovered first time home-buyers’ need for agents, as they play an educational role in the home buying process.

The goal with the agent list page is to allow users to quickly glance at their potential matches and learn more about them by clicking on their card.

Small adjustments were made to the visual design to encourage users to click and learn more:

Adding star ratings helped create credibility for agents
Using drop shadows help users understand they can click on the agent cards

outcome: style guide

Defining the design specifications

More style guide elements

outcome: High fidelity mockups

Final designs

Home screen

The starting point of the Kasa experience

Searching for the right fit

After a two question onboarding, users can go straight into looking at properties

Filters and maps help users narrow down their choices and save properties with a tap.

Diving into the home details

Home buyers can dive into the specs of the homes they’re interested in

If that’s not enough, talking with an agent can give them more details on specifics like the neighborhood and financing process.

Find an agent

Users are encouraged to partner with agents in their area to get the most out of their experience

More work

Atomic Invest

UX/UI design

Pelotea

UX/UI Design