Calbridge

 Calbridge Homes homepage - mobile

Calbridge Homes homepage - mobile

Calbridge Homes

Deliverable: User Experience, Web Design, Graphic Design

Agency: Reality Engine

Designer: A.Kelle

Year: 2016


Alyssa was working for Reality Engine - a Marketing and Branding agency in Calgary, AB - when Calbridge Homes decided it was time for a website re-design. They worked closely with a Creative Director on the project.

The user experience was a fun task, as the client asked for more 'circular' navigation. We developed a mega-menu and filter system with a wide-range of sorting capability. It was fun, and the client was stoked. 

We started with wireframes and went back and forth a couple times before landing on a direction. Reality Engine had done the most recent update to the Calbridge site, so there was an existing familiarity with the product.

I got to flex my Project Management muscle on this project, working closely with the client to achieve our goal. Run, don't hide, from scope creep. 

In the end we ended up with a site everyone was happy with, and it works well. The site is active, check it out here. 

 

Buy a house online

Homes have become like any other retail product - customizable and available online. This filter runs off a database - I helped design the interface. The design of the tiles mirrors the information available on the 'model' pages. 

 The 'Find a Home' filter. I helped design the interface - with an emphasis on experience and aesthetic. The moving tiles make for a fun experience.

The 'Find a Home' filter. I helped design the interface - with an emphasis on experience and aesthetic. The moving tiles make for a fun experience.

 The tiles sort in response to user input. We organized the options in accordion-style menus - user can sort by price, sq.ft, type, bed, bath, garage and communities.

The tiles sort in response to user input. We organized the options in accordion-style menus - user can sort by price, sq.ft, type, bed, bath, garage and communities.

Navigation: The Mega-Menu

The need to sort through multiple layers of information led to the design of a mega-menu. The mega-menu drops down as the user hover over a secondary menu, and then continues to respond with user selection. In this example, we see the 'homes' menu expanded. The menu responds as the user hovers over each container. 

 A screenshot of the Calbridge Homes 'model' mega-menu.

A screenshot of the Calbridge Homes 'model' mega-menu.

 

The menu expands to contain whatever information it needs to. In the 'Model' menu, the user is presented with a rendering of the house type and a starting price. In the 'Communities' menu, the user is presented with a lengthy community list and area map. The mega-menu design offers great versatility in terms of what it can hold - and it does so without sacrificing the user experience. The way the menu tucks away is great too, as it allows the user to take-in the full page. 

 A screenshot of the Calbridge Homes homepage.

A screenshot of the Calbridge Homes homepage.

 A screenshot of the homepage with the mega-menu expanded.

A screenshot of the homepage with the mega-menu expanded.

 

The Map

When the user searches for a home by community, they're presented with a categorized list of communities as well as an interactive area map. The pins on the map are totally responsive as well - linking the user to homes available in that community. The map also shows up on the 'Showhomes' page.

 

The Assets

The asset management on this project was huge - Calbridge has something like 200 different models to show off. Each home came with a set of floorplans, a handful of renderings and a list of specs. A lot of this work landed on me.

The models all have a unique description, and a set starting price. There was a lot to produce, and we wanted to show it off with consistency and sophistication.

The look and feel of the 'model' page is a reflection of the tiles used in the model filter.