From the outset it was clear that the quality and lifestyle offered by Calbridge needed to be reflected through photography and videography. Community specific promotions needed to take a back seat leaving the homes to speak for themselves.
There was room for consolidation in the navigation while re-thinking how people browse for homes and communities provided an interesting opportunity to validate hypotheses through user personas.
There were two aspects to laying down a great foundation which would go on to inform the UX/UI. The main consumer product categories were branched off into "Mover Upper," "Down-sizer," "Estate Homebuyer," and "Starter Homebuyer." Naturally, these offered grounds to pursue them as user personas.
The other aspect was a major undertaking and the crux of the entire site: home search. The established user personas were indispensable in shedding light on past and ideal user behaviour. In light of many revelations, the ability to search homes by looking up specific models was discontinued due to a lack of mental cognition off-site from show homes. Searching homes by communities and home type proved to be the dominant user behaviour. These two routes were combined in a modal window that held user attention where tabs provided filtration with a default preference going to communities.
A rudimentary depiction of home search in its initial stages.
Initially, the wireframes started out very bare bones. By the 7th iteration however, they were more visually defined which helped in an easier transition towards the design phase. Working closely at this stage with the Calbridge team forged an extremely collaborative environment in which input and feedback were encouraged.
Style tiles as a method of narrowing down stylistic treatments was utilized for elements like typography, colour, iconography, etc. Calbridge Homes already had very lose brand standards which they felt were quite dated. Amalgamation of the old and new proposals was the key. Below is a result of multiple iterations through collaboration.
The primary color palette was tweaked to adjust the Brown tones so that they would register well on most screens. Pearl Grey and Bronze were added to act as contrasting agents against White and Brown.
Heuristica as a serif type face was assigned to headings and chosen to reflect the traditional undertones of Calbridge. Not only was it a subtle nod to its rich past but it continued to re-affirm a sense of elegance, sophistication and quality that Calbridge products embody.
Muli as a sans-serif type face was assigned to body copy due to its minimal outlook and great legibility. Muli's varying weights paired well against Heuristica's own weighted arsenal creating a combination that contrasted well between pockets of negative separation.
The overall aesthetic for iconography steered towards a minimalist approach that provided a sense of open space. Initially, the presented iconography came off as too complex and needed to be paired back. After going back to the drawing board, a happy medium was reached where the icons were simplified while maintaining their original symbolic intention.
A crucial aspect of the website needed to display home models so it was important to show how they would be visually treated. All existing 3D home models were extracted and placed on a background that stripped away all the distractions leaving the models to shine on a pedestal.
After the style tiles and wireframes had been approved, the project moved towards the creation of high fidelity mock-ups. Video was incorporated on the home page and a section that questioned why choose Calbridge. Textural motion in these sections depicted families in their natural space where an emphasis was placed on showcasing the details of beautiful homes.
Alongside the design phase, full-fledged community and lot maps had to be re-drawn in order to bring forth a fresh aesthetic and a better way to manage lot information through the CMS which had to communicate with Salesforce on the back-end.