Redman Realty Group

UX/UI Design

Overview

Redman Realty Group, the largest realty company in Wisconsin’s Northwoods region, hired Sitecast to design and build a reusable microsite template for its many house listings. The microsite would provide the realty group a website to direct interested buyers to that would provide all applicable information about each listing, including images, house features, price, and any other details they wished to share. Redman Realty wanted a flexible design that would allow them to include or exclude any details, allowing it to be reusable for each house listing regardless of how much or little they had to share about each listing. By utilizing a flexible template, Redman Realty could also ensure a consistent look and brand was communicated to their customers, regardless of how many listings they visited.

Problem

The top priority of the project was to create a microsite that would allow Redman Realty Group to have the flexibility to include as many details as they wished (or had available) about each house listing, without compromising the design when more or less information was included. Although the site needed to be one single, long page, it needed to feel like a fully functioning website, including navigation. They wanted to ensure their brand color — a deep burgundy — and logo was incorporated into the design. They also wanted something that felt clean and modern while also harkening back to their Northwoods’ roots.

Solution

The design I created accomplishes everything the client requested. It’s a modular design that is broken out into sections, allowing for ultimate flexibility when it comes to the inclusion or exclusion of information about each listing or even if certain sections aren’t needed for a particular listing (e.g., not all listings will have a 3D Tour, so that section could easily be omitted without destroying the design). I included a floating nav bar that will smooth scroll to the selected section when the user clicks or taps it, allowing for easy navigation around such a long page.

Role

  • Lead UX/UI Designer

Technologies Used

  • Sketch
Desktop and mobile view of Redman Realty Group's landing page

Research

For this project I relied on my project managers at Sitecast to serve as my primary source of information for the design direction of the project. This meant the research I was required to do was quite minimal. They were the point of contact with Redman Realty Group and had collected all relevant information and requirements for the redesign from them.

User Stories

As a user on the Nav Bar I want to see a…

As a user on the Footer I want to see…

As a user on the Hero section I want to see a…

As a user on the Video section I want to see a…

As a user on the Interior section I want to see a…

As a user on the Exterior section I want to see a…

As a user on the Location section I want to see a…

As a user on the Broker section I want to see a…

Website Goal

The goal of Redman Realty Group’s house listing microsite is to provide a single-page destination for interested buyers to visit to see all information about a particular listing, allowing Redman Realty to have a consistent look across all of their house listing sites and bring uniformity across their brand.

Website Breakdown

Wireframes

Wireframes for Redman Realty Group

UX

The entire microsite being one long page, the most important piece to keep in mind for Redman Realty Group’s site was its information architecture. The site needed to flow appropriately and tell a story about the listing with its content. With this in mind, I organized the flow of the sections in a way that presented the most pertinent information first — the high level facts such as price, bedrooms, square footage, etc. as well as the paragraph description of the property. When it came to the interior and exterior information, I purposely reversed the flow of the subsections contained within each, ensuring the ‘Features’ subsection for the interior came immediately before the ‘Features’ subsection for the exterior, so the user could view all features of the entire listing together.

UI

It was requested by the client that I made sure to incorporate a few elements into the design of the site. Namely, I needed to utilize their burgundy red brand color and they wanted a clean, unfussy design. To pop alongside their brand color, I selected a gold accent, as well a as dark grey for body text. For the ‘Interior’ and ‘Exterior’ sections, I used the same background to tie the sections together and provide a sense of continuity since the content within one section is complementary to the other. For this background, I utilized a map of the region with a lightening mask over it creating a subtle pattern — the fact that it is a map is only obvious if the user looks closely at it. To make each listing’s site unique, our development team will be utilizing the mapbox.com API to pull the map of the area directly surrounding the listing’s address.

#413D3D

Grey color swatch

#FFFFFF

Light color swatch

#752929

Blue grey color swatch

#C8AE7F

Turquoise gradient color swatch

MONTSERRAT (LIGHT)

1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

Montserrat (Regular)

1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

MONTSERRAT (BLACK)

1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

Microsite

Hi-fi mockup of the Redman Realty Group site