Toast Mockup

About the Project

Buying a home is a time-consuming and sometimes challenging process. Toast helps users quickly browse listings, get mortgage info, and connect with real estate agents. Our goal is to help support those new to real estate during the buying process.Users need a way to quickly search and filter properties, save results, calculate mortgage rates and payments and connect with real estate professionals.I was responsible for UX/UI design including:

Tools used: Sketch, Invision, Lucid Chart, Principle

Competitive Research

We took a look at three competitors to better understand the market and determine how to set our product apart.


Redfin logo

Key Takeaways:

  1. Design uses a bold primary color, but tends to be more reserved.
  2. Properties only include those for sale.
  3. Provides market insights on other local property offers and sales.


Trulia logo

Key Takeaways:

  1. Playful design choices differentiate from competitors.
  2. Properties include those for sale and for rent.
  3. Showcases map data about schools, traffic, shops, etc.


Compass logo

Key Takeaways:

  1. Design aesthetic is minimalist.
  2. Properties include those for sale and for rent.
  3. Partnerships with developers on select new construction projects

User Personas

We used our competitive research to develop our user personas: Jose is a first-time home buyer and Rochelle is looking for a ‘home away from home’.

User Persona
User Persona

Site Map

Jose and Rochelle need an app that will help them find the right properties quickly and provide comprehensive information when they need it.

Our personas need to accomplish 3 key tasks:

  1. Sign up for an account
  2. Set up filters and save preferences
  3. Search for properties and save favorites
Site Map

Wireframes & Protoypes

We used our site map to start quickly developing lo, mid-fidelity wireframes and prototypes.

Lo-fidelity Wireframes

Tools used: paper & pencil, Keynote

Lo-fidelity Wireframes

Mid-fidelity Wireframes

Tools used: Sketch, Keynote

Mid-fidelity Wireframes

Visual Design Concept

Before developing our hi-fidelity mockups, we defined the visual design approach with color, type, and imagery.

Mood Board

Mood Board: fresh, clean, new, healthy, balanced, bright

Color Palette

Color Palette: We selected a palette that offers a vibrant primary color, complimentary secondary color, with contrasting bold colors and tints.

Custom Icons

Custom icons: Custom icons were created to supplement those available in the SF Symbols kit. Each icon is simple and intended to be legible at a small scale.

Selected Images

Selected images: fresh, approachable, bright, legible, clean


Typography: Lato has a fresh, approachable appearance that compliments our intended aesthetic.

Logo Studies

Logo design: We studied a range of options for the brand logo and determined that an open, lighter-feeling design compliments the app’s aesthetic and overall approach.

Hi-Fidelity Mockups

After defining our visual approach, we transformed our wireframes into hi-fidelity mockups for a range of breakpoints.

Hi-fidelity Mockups
Responsive Mockups

Breakpoints & Grids: mobile (345px), tablet (768px), desktop (1440px)

Responsive Mockups

Property Search: mobile, tablet, desktop

Responsive Mockups

Sign Up: mobile, tablet, desktop

Responsive Mockups

Filters: mobile, tablet, desktop

UI Style Guide

We developed a color palette, typography selection, brand logo and iconography.

Style Guide


We animated a few screens to show proposed interactions for menu navigation, searching properties, and quickly viewing property info.


Navigation menu


Search: Map to List


Property Quick View

Final Mockups

With our responsive web app defined ready for hand off, we developed final mockups to showcase the UI.

Final Mockup
Final Mockup
Final Mockup

Final Prototype

Final Prototype

Main Takeaways

We began by researching the competition and developing user personas and site maps that help guide a series of wireframes and prototypes. Based on our visual design concept, we created hi-fidelity mockups at a range of breakpoints. We designed a brand logo and icons and selected a color palette, typography and imagery that are included in the style guide. We further refined the UI in through a series of animations and final mockups. The current product has been developed as a result of the UX/UI design process.