Wahi
 

logo 1.png
Brookfield-logo.png

MY ROLE

Product Designer

OVERVIEW

Wahi is a Digital Real Estate Company that focuses on creating an End-to-End Platform experience for homebuyers.

For this client, I worked on both desktop and mobile designs for a multitude of features such as: a 'Search & Browse' map page, individual home listing pages, a 'Financial & Mortgage calculator', a marketing site, and the brand's Design System.

Check out their site, Wahi.com, or read more about my responsibilities and view some of my work below:

DESIGN SYSTEM

First, I was tasked to build and update their design system to unify the design rules, patterns, themes, and components for the Wahi brand. This includes, but is not limited to, components such as:

​Global Component Library

  • Typekit outlining the brand typeface(s) with more than 15 font styles and weights across both desktop and mobile platforms.

  • Colorkit outlining use cases such as primary, interactive, system, hover & active states, and more.

  • Grid systems for Desktop, Mobile, and Tablet detailing the margins and gutters for each device.

  • Primary, secondary, and tertiary buttons as well as text links, all with designs for their default, hover, active, and focus states.

  • Inputs such as search bars, free text, dropdowns, date pickers, and price inputs, all with their respective default, hover, active/selected, filled, and error states.

Product Library

  • Listing Cards detailing the image aspect ratio, usage rules either on its own or in a row/column, and multiple designs for the various states.

  • Map designs and map pins showcasing transition effects and use cases for the different pin designs.

  • Chat page designs: chat bubbles, unread chat indicators, messages sent by another party versus messages sent by me, as well as designs for various states.

Marketing Site Library

  • Testimonial cards highlighting real user reviews, as well as stress tests for various lengths of feedback.

  • Main CTA newsletter card prompting users to sign up for both desktop and mobile platforms.

  • FAQ Accordion showcasing both a default and expanded view as well as stress tests for lengths of text.

  • Table of Contents with stress tests and different layouts depending on the number of items.

Search & Browse Listings Map

  • Designed iterations of the Search & Browse Map page to showcase properties within a given radius and to guide home buyers when searching for dream homes. Streamlined and scaled this search process for Mobile. 

  • Included multiple states such as Default, Search Typeahead, Loading, Active/Sold listings, and Cluster.

  • Designed Filter selections for users to customize search preferences when browsing for properties.

Property Listing Page

  • Aided in the design of individual property listing pages to help new and existing home buyers gain valuable insight on properties easily. 

  • Included features such as School Zones, Purchase History, Save listing and more.

Financial Mortgage Calculator

  • Designed the Mortgage/Budget Calculator for users to easily estimate their monthly mortgage payments, closing costs, and monthly expenses.

Chat Page

  • Designed the realtor chat experience for users to communicate with Wahi experts.

Profile Settings

  • Designed the Profile Settings page for users to customize notification, alert, and other settings.

  • Included states such as Read/Default, Edit, and Changes Saved screens.

Email Screen

  • Designed an email screen to notify users of updates on their saved properties.

MARKETING SITE

  • Aided in the design of the homepage site including hero, banners, media text, testimonials, featured articles, and CTA newsletter, navigation bar, and header/footer

  • Designed the 'Contact Us' page filled with contact information as well as a form for users to fill in requests.

  • Scaled the FAQ section to draw user attention to valuable insights only, and grouped large amounts of information in a coherent manner.

  • Created a Search Results page with states for empty/null results, suggestions, and other features.

  • Helped design the About Us page highlighting the company's core values, leadership team, career opportunities, and company news.