Sanghoon Hwang | Heights

Overview

Problem

Real estate investment is becoming an increasingly popular method to achieve financial security, and it's filled with excitement and emotions. The objective of this project is to create a responsive web app that provides property buyers with information on properties of interest to facilitate this experience.

Goals

Avoid overloading the users with information.
Craft a design language that aids the separation of features.
Present dense information in a digestible fashion.
Ensure navigation throughout the website is easy to understand.

Purpose

People need a stress-free way to learn about real estate properties, whether they are looking to invest, rent, or buy them. It is essential for making informed decisions on what properties match their needs.

SECTION 1

Wireframes

Low-Fidelity Wireframes

0 weeks into project.

The first steps were to focus on the main parts of the navigation. Although these wireframes are more detailed than the typical first round of wireframes, numerous changes and additions would follow.

A 4-column grid system was established from the beginning to ensure organization of various UI elements. More details on the grid system can be found in the Visual Style Guide section below.

Mid-Fidelity Wireframes

2 weeks into project.

A few key decisions regarding the flow and visual identity were made at this stage.

For example, users are now required to sign in or register for a new account before getting access to Heights' features. This ensures that users are getting the catered recommendations that Heights is looking to establish itself on.

The grid system was tweaked to bring a balance to the vertical spacing between elements. A 16px baseline was implemented, bringing sizing changes to various UI elements and complying to the iOS and Material Design Guidelines.

High-Fidelity Wireframes

9 weeks into project.

The screens below represent the final version of the prototype. Here are some highlights of the major changes made since the mid-fidelity stage:

Figma Config 2022 introduced new design tools, most notably auto layout. This proved an excellent addition that aided with vertical spacing.
Colors and imagery were finalized. For more details, check out the Moodboard section and the Visual Style Guide.
More complex prototyping interactions were implemented and more animations were added.
Standardized the styling of UI elements and Icons.

SECTION 2

Moodboard

This moodboard represents the nature of Heights. This app is divided into two distinct halves: one for users investing in real estate, and one for users looking to rent or buy homes. The goal of this split is to help the users know what their actions are pertained to.

The Rent & Buy section of the app is indicated by the teal hues and imagery of houses, yards, and families. The goal is to invoke endearing feelings in users who are looking to find a new place to call home, perfectly summed up by the tagline "Your next home is waiting."

In contrast, the Invest half of the app is indicated by the purple hues and imagery of buildings and skylines. I am looking to invoke a sense of luxury and growth that resonate with investors.

SECTION 3

Mobile Mockups

SECTION 4

Visual Style Guide

Logo

The Heights logo reflects the double utility of the app. The icon is also designed to be resemble of the shape of a lower case h.

The typeface used for the logo is a slightly modified version of Barlow Black.

Color Palette

Heights' color palette consists of two accent colors, their hover state variants, and various shades of gray with specific use cases.

Each accent color was tested for accessibility using the WCAG color contrast checker. Against a white-05 background, every accent color passes for most use cases at a WCAG AA level (contrast ratio of 3.0:1 or higher).

The accent colors should only be used with their respective topic, specified on the image below. The neutral colors are to be used wherever needed.

Typography

Inter is Height's primary font and used across web, print, promo materials, and social media. The appropriate font weight and size should be used to establish a clear hierarchy between bodies of text.

As mentioned in the logo section of the Visual Style Guide, a modified version of Barlow Black is used for the Heights' logo type.

Iconography

These guidelines ensure that a level of consistency is established across all icons, whether there needs to be new ones designed or more use cases pop up.

‍Design Guidelines

Icons should follow an 8px baseline, and designed in a 24px grid.
Icons should follow an outline style using 2px strokes.
Diagonal strokes should only be rotated in 45 degree increments.
Icons should have rounded corners with a radius of 1px.
Icons acting as buttons, no matter its size, should have an active area of at least 48px.
In general, icons are to consist of a single color at a time. Icons relating to Investing should be Purple-05 (#5D0AFF), turning into Purple-10 (#4900D6) on hover. Icons relating to Renting or Buying should be Teal-05 (#00A3BD), turning into Teal-10 (#008DA3) on hover.
Reuse elements from other icons whenever possible to avoid confusing users. For example, all icons pertaining to bookmarks should implement the standard "Bookmark" icon to indicate actions relating to it.

‍Avoidance Guidelines

Take into account the scale at which icons will be used. They should maintain a strong silhouette.
Avoid use cases for icons deviating from 24px.

Imagery

Due to the nature of real estate and having images of every listing, it is impossible to have total control over the photos on Heights. However, general imagery used throughout the web app or promotion purposes should follow these guidelines.

‍Usage Guidelines

Use the appropriate colors and themes on each respective side of the app.
Highlight both exteriors and interiors for properties.
Images to be used as backgrounds should avoid being too complex and be darkened if there is to be text or buttons over it.
For Rent & Buy, strike a good balance between luxury houses and lower-income houses.

‍Avoidance Guidelines

Do not use images of homes where people are living in them. If the home is furnished, it should seem like a demo setup rather than an actual lived-in space.
Avoid images with logos and other brands on them.

Grid Systems

As stated above, Heights works off a 16px baseline. Appropriately, the margins, gutters, and the number of columns compliment this by being in multiple of 4, which simplifies spacing and leaves less room for mistakes.

Some wireframes for both tablet and desktop breakpoints can be found in Section 6: Responsive Design.

UI Elements

Below is a collection of various UI elements used across the mobile version of the Heights responsive web app.

SECTION 5

Prototype

SECTION 6

Responsive Design

Tablet and Desktop Breakpoints

As Heights is a responsive web app, some vital screens were designed for the tablet and desktop breakpoints to demonstrate how the various UI elements would scale and rearrange. When choosing the breakpoints for these devices, I opted for the smallest possible devices on the market so that I can design for the most constrained screen space.

‍Tablet Breakpoint: 744 px width
‍Desktop Breakpoint: 1280 px width

Landing Page

Listing Page

Search Results

SECTION 7

Conclusion

Retrospective

Working primarily as a UI designer rather than a UX designer was a fun experience that allowed me to focus more on the visual aspects of the app. Still, working around the UX restrictions provided challenges that required creative solutions.

This project allowed me an opportunity to explore the real estate industry, which I was initially unfamiliar with. Plenty of research and competitive analyses were conducted to look for visual and sitemap patterns that ultimately became the foundation for Heights.

While I enjoyed working on Heights, there was a lot of wasted effort. I was indecisive about many facets of the app due to a lack of a definitive sitemap. Unlike Vela, which I worked on earlier in the year, most of the UX research had already been done and defined for me to work off of. Perhaps it was due to this disconnect, but it took me a while before I finalized the sitemap in the middle of developing the UI. In my next project, I'm looking to nail this down from the get-go.