With momentum building and product communication ready for an overhaul, I aligned the housing startup’s visual design system with its product values and vision.
Product offerings included 2 to 5 bedroom homes ranging in price from $440,000 to $800,000.
Packaged deliverables included a web refresh and robust set of product guides.
One of the first things I did was to drill down on the design system. The logo and primary dark brown and orange colors were part of an original branding exercise. Beyond that, colors, iconography, general design principles, or typography hadn’t been developed. I chose Avenir for its contemporary take on geometric modernism, mirroring the design style of the homes. For the printed brochure, and graphic asset production generally, I created dark and light schemes, and expanded a set of colors and tints that could work for earthtone-heavy building and site based diagrams, as well as brighter diagrams.
At the heart of the need for framing communication was the product decision tree. One of the most challenging things about productizing higher end housing is offering enough choice to meet customer needs, while curating choice enough to keep it simple for both customers as well as supply side logistics.
The company had intuitively and incrementally expanded the product offering to include two basic styles, a range of bedroom options, two separate configurations within one of the architectural styles, two major fit and finish price points, and colorways for both exterior and interior options, that varied based on the level of fit and finish. However, these variables were mostly not dependent on each other, and the total number of permutations was quite high, leading to a bit of a learning curve and confusion. I conceptualized this linear roadmap breaking down and compartmentalizing what options were available.
The interior design colorways had been named “dark”, “light”, and “pop”. It didn’t end up making the cut within the scope of what I was working on, but because of the netzero focus of the company, I was excited about connecting ideas about three corresponding california landscapes to the design schemas.
The basic architectural styles had been aptly titled Series A and Series B in a nod to silicon valley. Series A was a modern two story farmhouse, while Series B was a mid century one story with sweeping butterfly roofs.
The two brochures, much like the product lines, roughly mirrored each other in format and layout.
I worked through a few different iterations to arrive at the right graphic for the spread summarizing the company’s innovation principles. As a drawing type, an exploded axonometric made sense – parts coming together conceptually aligned with the idea of the house being designed and assembled like a machine. The trick was balancing the amount of detail and choosing which lines to foreground.
I established a hierarchy of a “big idea” represented by a pithy question or statement, dark “explainer” boxes that spoke directly to the reader with a marketing pitch followed by specifics of what value was offered, and finally, “caption” text that functioned as nitty-gritty detail and labels.
The distinction between an “open” and “compact” home within the Series A only was one of the most difficult to effectively communicate. The point was that the open option had a double height living room and loft, and felt a little grander, whereas the “compact” option maximized square footage available for living space, and carried an extra bedroom. I came up with the equal length line optical illusion to represent this – implying both the commonality and difference between the two options.
Design communication can be most effective when you are able to show the same idea in a few different ways. I came up with this concept for a “table of contents” for all of the product models. Customers could see the options available, and how they related to each other in terms of size, number of bedrooms, and configuration.
The diagrams also showed a simple idea about a typical urban lot and setback as a common reference point for scale.
One of the first questions and the hardest to answer about any big ticket item, especially when it comes to prefab homes, is “how much will it cost”. It’s helpful to be able to place a stake in the sand and give some concrete information off the bat. The company worked hard to be able to do this. They key for communication was to hit all of the important notes and a general statement about scope, without going in to too much detail and the many caveats and contingencies that could possibly affect the outcome.
The floorplan is one of the most important tools for shopping around for homes, whether from a prefab company or from a condo listing. Each page within the floorplan section functioned like a product page, packing quite a bit of information in to a minimalist layout. I replaced words wherever possible with graphics and icons to really foreground simplicity. A few of the devices used were the shadow contours of the 2D floorplans, which subtly implied the geometric volume of the space, and the icon-based header, which allowed at-a-glance comparison between models.
The floorplans jump out in to the foreground as the first layer to be read, with the subtle shadows and elevations beyond, and the keyed labels offering more information about the space.
Garages and accessory buildings were succinctly shown at the same scale, and in a layout that matched the product pages.
Another major question the company had to specifically address with every new customer interaction was whether the product would fit well on a customer’s property. The site page functioned as a visual aid for this conversation, showing a small, medium, and large lot, sample garage configurations, and an explanation of the basics of how the foundation worked.
The third leg of the product triangle aside from “what’s included” and “how much will it cost” is “when will I get it”. I created this summary graphic that lined up the phases the company defined for its customer relationship.
This graphic matched a larger graphic that showed the same phases with more detail about exactly what to expect during each phase. Consistent graphic cues help to roadmap expectations.
Aside from product literature, I also worked on a plan for a web refresh based on a fundamental recognition from the company’s early experience with not only sales but crucially, ongoing customer relationships.
The web presence for an extremely high value product like homes needed to rely less on generating a large volume of leads. Rather, the website needed to clearly explain the company’s core values and operating principles in a way that could serve as a landmark for the entire customer relationship.
The concept was a series of scroll-anchored screens on a simple landing page that hit on really big, simple ideas that were core to the mission. This was the brand. The gray screens in the concept map above represent key expandable information that anticipated major areas of interest that were not directly relevant to the set of ideas making up the brand identity. The product pages contained much the same information as the brochures, presented with a matching UI to the main sequence of the landing page. For customers looking to cut to the chase, calls to action would be placed in multiple places leading to an “action page” where next steps would be explained.
I mapped out a hierarchy of copy that I used to workshop with the team. The roadmap connected the topics expressed in each part of the mockup with language that conveyed the big ideas, as well as a cascading set of talking points that were expressed within each section.
The mockups of the design reflected the same hierarchy.
Summary screens for the Series A and Series B product pages were akin to the strategy used in the product brochures.
In addition to collateral materials for print and web, I undertook a number of brick-and-mortar collateral items as they were needed.