Technology

The 24-hour website workout

Author
Brian Boero
No.
884
Date
07/23/14

Over the past seven years, 1000watt has worked with countless brokerages, franchisors and real estate tech companies to re-imagine the face and story they present in the digital world.

This takes time. Discovery, strategy, content development, information architecture, wireframing, visuals, copywriting, coding, QA… it’s a process – one we’ve never been very public about. It’s also much more than “designing a website.” We need to create an expression of a brand, account for myriad business rules and keep the strategic objective in mind.

So it was a bit of a high-wire act when last week, at the Inman Connect show, we “made over” a prominent brokerage’s home screen.

In 24 hours.

Concept, design, copywriting and an HTML/CSS prototype.

No cheating.

We were lucky to get a first-rate brokerage to play with us – Willis Allen, a leader in the San Diego market with a 100-year history and a progressive marketing bent. Importantly, the company’s existing website was pretty decent (though they had no mobile web interface, a critical problem). We wanted a challenge to re-think something good, not a slam dunk.

During Inman’s opening general session, Bud Clark (Willis Allen’s managing broker) came on stage with me to take a look at their current site, discuss it a bit and tell the audience to meet us back on stage in 24 hours.

We were off and running.

We had brought Eddie, one of our designers, and Anton, our front-end developer, to the show with us. They joined us in our war room at the Hilton and hunkered down for a long night.

The big picture

We knew we had to nail some of the basics:

The site had to look every bit as good on a handset as it did on the desktop, without penalizing the mobile user by cutting content and features.

The Willis Allen brand and value proposition, which we felt were not being communicated strongly enough on the existing site, had to be front and center. We knew there was no way to truly understand the brand without the sort of discovery we normally do; we simply wanted to offer a potential direction the company might consider working with.

The site needed to reflect best practices, but also go beyond the typical brokerage playbook. Yes, we still believe a search box in the middle of the screen, often with a compelling photo, is a good pattern (consider, for example, why the dishwasher is still almost always next to the sink in kitchen design, no matter what other features and flourishes exist in the space – it’s a user-driven standard).

Beyond that, we wanted to add a couple twists – things Willis Allen could offer users competitors couldn’t or wouldn’t.

Digging in

We started on copy first – something we often do. Marc, Joel and I sat around the Hilton conference table and kicked around a bunch of ideas. What we landed on was something that communicated Willis Allen’s deep ties to San Diego in a way that established a common feeling with the user. We wanted to avoid the usual superlatives – “_______’s luxury leader”, “Service and results since 1914” – and instead provoke a feeling for the place and connect with the aspiration of the user.

Screen Shot 2014-07-23 at 12.15.02 PM

Next, we decided to communicate the company’s 100-year history visually in a way that would be more engaging than words alone. So we had Eddie do some photoshop work on two photos of San Diego, effectively blending together the 1914 cityscape with that of today.

Willis-Allen-photo

Then we decided to do something a little edgy. Without getting into the “Zillow: pro or con?” debate, we thought it would be interesting if a brokerage simply recognized this reality: the large majority of people that come to a brokerage site have, or will, spend time on Zillow too. In a way, we thought, this might actually build trust with users: if a brokerage actually acknowledged their behavior and preferences, a wall comes down.

So here’s what we did – a bit of brokerage lead-gen Jujitsu:

Willis-Allen-Zillow

The idea is that the consumer clearly sees where Zillow’s role ends and the brokerage’s begins, and the brokerage gets a few more showings than it otherwise might. Yes, we know there are wrinkles here (what about visitors coming from Zillow’s mobile app, etc.), but we put it out there because we believe it’s an idea with potential.

Then we wanted to show some properties (this is, after all, a real estate brokerage site) but not in the usual “featured homes”, slide-showy way. This sort of thing usually appears on a brokerage home screen to placate sellers or entice buyers into the property search flow. We thought it would be much stronger to show some of Willis Allen’s listings to communicate an explicit benefit to prospective sellers and call them to action (“Sell your home with Willis Allen”).

Willis Allen does a really nice job merchandising listings; Let’s show that off.

Willis-Allen-MarketingWe close out the page with another brand statement, a visual, and means of contacting the company.

Here’s the prototype, the “after” in this before and after story.

Left on the table

Eddie and Anton stayed up all night. Us old guys stayed up way past our bedtimes. In the morning, Bud and I got back on stage and showed the new prototype to the crowd.

The feedback has been great. We’ve had some interesting debates around it too. But given the 24 hour window, we obviously left some things on the table. The prototype isn’t fully coded, though you can see the responsive affect and some animations. We’d also like to spend more time on copy.

There are a hundred things we’d tweak, but we’re putting it out there.

We gave Willis Allen lots to think about. And, should they decide to run with it, we’ve given them a design, copy and a little code free and clear.

We hope you get something out of this exercise too.