High Pines

case study

UI/UXVisual designBranding

High Pines is a real estate agency specializing in cabins, log homes, and lakefront properties nestled within the picturesque landscapes of Wisconsin. It draws aesthetic inspiration from the serene depths of the woods and the warmth of fireside conversations.

A timber cabin with a shingled roof looking out over a Wisconsin lake at golden hour, framed by autumn pines.

Problem

While many real estate websites opt for calm, clean, and reassuring designs, exuding professionalism and hospitality, this approach doesn't always align with the unique charm of selling cabins and log homes.

Solution

Creating a website for a mock real estate agency set in a state surrounded by nature — stylistically pleasing, evoking the serene essence of a walk in the woods.

Overview

Overview of the finished product: the High Pines desktop homepage in a browser window, surrounded by a ring of mobile screens, over a silhouette of Wisconsin reading "Forget the map, follow your compass".

Wireframes

I developed wireframes for the five key pages integral to the buying process. Prioritizing ample space for captivating photographs, the focus was on constructing a cozy and engaging structure around these visuals.

Greyscale wireframes for five pages: homepage, active listings, listing detail, about us and contact us.

Branding and UI Kit

Branding and UI kit: the High Pines Realty logo and compass mark, the Ysabeau Office type scale, a chevron colour palette from deep forest green to cream with hex values, and button, icon and form states.

Final Design

Final design, homepage: the orange navigation bar, a dusk photograph of a lit cabin captioned "where nature meets home", the "unlock the outdoors" introduction and a six-card grid of latest listings.
Final design, continued: the active listings page with filters and property cards, and the about us page. Final design, continued: the contact us page with agent details and an enquiry form.