Adam Clayton Butler

DMB: A Passion for Great Places

Responsive website

A portfolio for one of the most innovative real estate developers in the country

DMB Associates has been crafting residential communities and commercial developments for over 30 years. And these ventures are anything but ordinary. DMB was the mastermind behind some of the most esteemed communities in the western United States, from Scottsdale’s DC Ranch and Silverleaf to Kaua‘i’s breathtaking Kukui‘ula. Having recently been rebranded by another agency, DMB needed to carry over their updated brand to the web. My role as lead designer on this long-awaited redesign was to work directly with DMB to tell their story, through the lens of their communities, in an engaging, clear and interactive way.

dmbinc.com

Strategy + high-fidelity wireframes

There were two main business objectives of the redesign: First, tell the story of DMB’s communities. Second, communicate DMB’s brand pillars and benefits for prospective business. The client already had a vast library of media, so I chose to utilize it to build large, immersive layouts. I created this set of wireframes in about a week, to represent different layout variations and establish a content strategy for the site. Using a modular design approach, certain content types are fed into applicable areas of the site via categories and tags. After I presented the wireframes to DMB’s internal marketing team, they remarked that it was “the most impressive wireframe presentation” they had ever seen.

Telling the story of DMB’s 30-year legacy

DMB had recently been rebranded by a different agency. Truth be told, some decisions were made that were rather unfortunate; specifically concerning the choice of typography and color palette. Having to work with less-than-ideal brand guidelines, I knew I had to focus on content, layout and user experience to make the site shine. In the end, I managed to combine aspects of the rebrand with new design elements to create a smart web presence for DMB. The goal of these pages was to communicate brand pillars and DMB’s unique approach to real estate development.

A modular portfolio for communities

Community pages were the most content and image heavy pages in the site. This makes sense, since community development is what DMB does. Through asking the right questions at the beginning of the project, it became clear that the internal marketing team at DMB required the ability to manage content and media for communities over time. To solve for this, I designed each content module on community pages to be added or removed at will, without breaking the page layout. This approach allowed community pages to be relatively unique, but share the same code base.

Interactions

The design called for long, scrolling pages with a lot of content. To keep the viewing experience simple and engaging, I developed simple & interesting interactions on the site by using in-page, fixed navigation patterns, jQuery sliders and popover modals to present content in different ways.

Press informs the brand story

A huge part of the content strategy involved designing a way to add news releases and blog articles to the site. In addition to achieving this, I devised a system for routing articles categorized & tagged in certain ways to appropriate sections of the website, effectively enhancing the brand experience through applicable press & media.

Designed for all devices

In the kickoff meeting for the project, DMB informed us that a common use of the website involved executives showing DMB’s communities to prospective builders through the use of iPads—an important part of the sales process. Because of this use-case—along with the obvious increase in mobile usage globally—it was important that the website be responsive. As image-heavy as the site turned out to be, careful attention was paid from the beginning to make sure the website delivered the same experience no matter the device. My colleague, Andrew Sapiens, was responsible for the development of the site. He and I worked closely from the beginning to ensure that the proposed design solutions made sense from a development perspective.

Top