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.
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.
As a user on the Nav Bar I want to see a…
Series of links connecting me to each section of the microsite — including but not limited to 3D Tour, Interior, Exterior, Location, and Broker
Redman Realty Group’s logo and brand color
As a user on the Footer I want to see…
The address and phone number for Redman Realty Group
A link connecting me back to Redman Realty’s main website
As a user on the Hero section I want to see a…
Large photo that will give a strong visual of what the listing looks like
Chart breaking out important details of the listing, including price, size, lake frontage, bedrooms, bathrooms, etc.
Section with space to include a paragraph description of the listing
As a user on the Video section I want to see a…
Large box containing either a 3D Tour or Video Tour of the property
As a user on the Interior section I want to see a…
Gallery of photos from the interior of the listing
Floorplan of the listing
Breakdown of all the features I can expect to find in the interior of the listing
As a user on the Exterior section I want to see a…
Gallery of photos from the exterior of the listing
Breakdown of all the features I can expect to find on the exterior of the listing
As a user on the Location section I want to see a…
Large map that pinpoints exactly where the listing is located
Chart with space for the address, city, zip, and county of the listing, as well as the lake and lake chain the house is built on
As a user on the Broker section I want to see a…
Large photo of the broker in charge of managing the listing
Breakout of the contact information of the broker, including phone number, email address, and website link
Space for a short bio paragraph about the broker
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.
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.
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.