Prototype

Prototype

go to the Figma prototype

ICONS

COMPONENTS

TYPOGRAPHY

COLORS

White

#FFFFFF

Light Grey

#D1D1D1

Dark Grey

#4F4F4F

Black

#000000

Kinetic Blue

#0C21FF

H1

Bricolage Grotesque 600 40

H2

Bricolage Grotesque 600 32

H3

Bricolage Grotesque 600 28

H4

Bricolage Grotesque 600 24

H5

Bricolage Grotesque 500 18

P1

Helvetica Neue 500 24

P2

Helvetica Neue 500 20

P3

Helvetica Neue 400 16

Captions

Helvetica Neue 500 16

Buttons

Helvetica Neue 700 18

KINETIC BLUE CATCHES YOUR EYE

WITH A ZING!

NEUTRALS ALLOW PROPERTIES

TO SHINE

THE SWOOPS AND SWERVES OF

Bricolage Grotesque

CONTRAST KINETIC’S LINES

BUTTON

BUTTON

BUTTON

BUTTON

BUTTON

BUTTON

BUTTON

BUTTONS

BARS

city, ZIP, neighborhood...

Current Location

Previous Searches

02109

Boston, MA

Beacon Hill

Boston, MA

Wellesley, MA

Filter

Sort

CARDS

SAVED SEARCH

PROPERTY CARD

Ski Cabin

$ 750,000

$ 900,000

4+ beds

4.5+ baths

ME, NH, VT

438 Seems Rd

Windsor, VT 05039

2

days on market

3

beds

2.5

baths

2,591

sq ft

$ 839,000

8 / 9

UI ELEMENTS ARE MINIMAL

SO YOU CAN FOCUS ON

WHAT’S IMPORTANT

DESIGNED FOR GLANCING

WHEN YOU’RE ON THE GO

more details in our Style Guide

Style Guide

Style Guide

Design Strategy

Design

01

INITIAL DESIGNS

APPROACH

Mobile first with a responsive future

INITIAL STAGES REVEALED

HOW MUCH INFORMATION

MUST BE DISPLAYED

ORGANIZATION + RELEVANCE

ARE KEY FOR EFFICIENCY

“As a user, I want to create a profile

containing all my property criteria,

so that I am recommended results

most relevant to me.”

“As a user, I want to be able to save or

mark properties I am interested in,

so that I can easily revisit them.”

“As a user, I want to see how well

a property meets my criteria

or compares to other properties,

so that I can refine my options.”

USER STORIES

LOW FIDELITY

Focus on core information and actions

Mobile devices account for over 60% of global internet traffic 1

Responsive design adapts to every situation

1 Desktop vs Mobile vs Tablet Market Share Worldwide 2011 - 2024, STATCOUNTER, March 2025

02

03

SUBSEQUENT DESIGNS

RESPONSIVE DESIGNS

+ MOCKUPS

SAVED SEARCH CARDS

DETAILED SEARCHES

ALERTS

PROPERTY CARDS

FILTER & SORT

TOGGLE VIEWS

Custom titles

Relevant details at a glance

Complete all, or a select few

Never miss an opportunity

Informative + scannable

Only what you need

Different perspectives help

ADAPTS TO

WHEREVER YOU GO

meet

Rashida

Rashida

IN 3 WORDS

WORK

GOALS

Family

Multitasker

Tech-savvy

IT Consultant

Invest in property

Make the right decisions quickly

Financial security for her family

EFFICIENCY

CONVENIENCE

INFORMATION

Rashida has limited free time

Rashida is frequently on the move

Rashida wants what’s best for her family

ABOUT

NEEDS

I’ve been considering

buying property for a while,

and am looking for a tool

that can help me find

what I’m looking for, quickly!

HOW MIGHT WE ADDRESS

RASHIDA’S NEEDS?

Design Goals

MINIMAL

The design should take a backseat to property information

SCANNABLE

The design should be easily digestible at a glance

FOCUSED

The design should let properties be the focus

For real estate newcomers,

finding the right investment

property is inefficient and

lacking guidance

THE CHALLENGE

Design a responsive web app

that efficiently guides users

to the right investment property

THE OPPORTUNITY

STEP 1

Real Estate Investment

RESPONSIVE WEB APP

UI DESIGN

ASSETS

  • OPPORTUNITY AWAITS YOU

  • OPPORTUNITY AWAITS YOU

Real Estate Investment

RESPONSIVE WEB APP

UI DESIGN

ASSETS

  • OPPORTUNITY AWAITS YOU

STEP 1

THE OPPORTUNITY

Design a

responsive web app

that efficiently guides

users to the right

investment property

THE CHALLENGE

For real estate

newcomers,

finding the right

investment

property is inefficient

and lacking guidance

SCANNABLE

The design should be

easily digestible at a glance

MINIMAL

The design should take a

backseat to

property information

FOCUSED

The design should let

properties be the focus

Design Goals

HOW MIGHT WE ADDRESS

RASHIDA’S NEEDS?

EFFICIENCY

CONVENIENCE

INFORMATION

Rashida has limited free time

Rashida is frequently on the move

Rashida wants what’s best for

her family

NEEDS

I’ve been considering

buying property for a while,

and am looking for a tool

that can help me find

what I’m looking for, quickly!

IN 3 WORDS

WORK

GOALS

Family

Multitasker

Tech-savvy

IT Consultant

Invest in property

Make good decisions quickly

Financial security for her family

ABOUT

Rashida

Rashida

meet

INITIAL DESIGNS

01

Design

Strategy

Design

INITIAL STAGES REVEALED

HOW MUCH INFORMATION

MUST BE DISPLAYED

“As a user, I want to create

a profile containing all of

my property criteria, so that

I'm recommended results

most relevant to me.”

“As a user, I want to be able to

save or mark properties

I'm interested in, so that I can

easily revisit them.”

“As a user, I want to see how

well a property meets

my criteria or compares to

other properties, so that I can

refine my options.”

USER STORIES

APPROACH

Mobile first with

a responsive future

Focus on core information & actions

Mobile devices account for over

60% of global internet traffic 1

Responsive design adapts to

every situation

1 Desktop vs Mobile vs Tablet Market Share

Worldwide 2011 - 2024, STATCOUNTER, March 2025

SUBSEQUENT DESIGNS

02

LOW FIDELITY

ORGANIZATION + RELEVANCE

ARE KEY FOR EFFICIENCY

SAVED

SEARCH

CARDS

Custom titles


Relevant details

at a glance

DETAILED

SEARCHES

Complete all,

or a select few

ALERTS

Never miss

an opportunity

PROPERTY CARDS

Informative + scannable

FILTER & SORT

Only what you need

TOGGLE VIEWS

Different

perspectives

help