Designing for a platform
Future-proof, responsive, customizable & brandable™
--
Long awaited were the days when we didn’t have to take down the servers to push a design or code update. At BoomTown, part of the journey was reimagining where we could go.
A blank canvas
The current product design was born in 2007. Fast forward to 2011 —and we had found the site to be very outdated. Sure, it went through various tweaks, bug fixes and improvements along the way, but nothing as massive as a redesign. The conversion rates and time on site were very positive. Users were using it, so the big question we asked ourselves was, why a redesign?
We knew we could do better.
Let me expand on that a little — We knew we could make the site better. We could improve upon the user experience, make it more memorable, and easier for us to update. Ultimately, a win for all involved. Right?
We had four distinct goals for the site itself:
- Increase Quality Conversions (get genuinely interested consumers)
- Increase Loyalty (by making the site something people want to use)
- Increase Communication (by making it easy to communicate)
- Increase Traffic (through good content)
Outside of these four distinct goals, we had a few basic requirements that the site had to encompass.
Brandable™
We had several hundred clients running our platform and we genuinely cared about their success. One pain point we needed to address was that the platform looked very “template” based. No user would ever see two sites back to back, however it was important that we handled each site as a unique business with their own branding and people behind the company. We wanted something that allowed for flexibility (now and in the future) and something that was easy to update if they rebranded or just wanted a basic facelift.
Responsive
At that time, we were the first real estate platform looking to design responsively. Creating a 5 page advertising site that is responsive is one thing. Creating hundreds of sites with varying amounts of pages that are constantly being fed live data and thousands of users on the site at any given time is quite another.
Compliance
In real estate (MLS & IDX) there’s this little bit called “being compliant”. Being compliant really makes it hard to plan for. Some MLS boards have to have a logo by every thumbnail — others, on every page or a disclaimer in the footer. There are many different edge cases. The bottom line is: we had to build space throughout the site that could be used to house these things that would keep our clients sites compliant.
Wireframes / Colorblocking
We started brainstorming with sketches and white-boarding. We had long prototyping sessions and came up with a ton of wireframes/sketches. Some patterns became evident in our wireframes: let the user browse, keep them engaged in their session and focus on photos. Photos drive the home searching experience.
From here we began working through general UX flows on whiteboards day after day. Working through general ideas of how areas of the site should look, feel and behave without getting too nitty-gritty into detail. The overall goal was to flesh out important parts of the site and focus on the flow for our users.
The Search Experience
The entire reason people look at real estate is because they’re searching for their dream home. Keeping search as streamlined and intuitive as possible was a huge priority from day one. We worked relentlessly to iterate through different interactions on the search bar until finalizing the one you see now.
One of the biggest lessons we learned early on was that we were trying to cram too much information in a confined area. Yes — giving a lot of options was important, however in such a finite area it needed to be consolidated and simplified.
For the final design, we made the decision to strip the entire bar down to the primary use case for home searches. Back to the basics if you will. Everything was there and easy to use. A giant portion of all searches revolved around a combination of the final option we landed on.
Gallery View
Displaying (for us) and viewing (for the user) was next on our list to improve. Our previous version didn’t have a gallery view — designing one was at the top of our feature list.
We created thumbnails that mirror our previous wins on the search experience and streamlined them as much as possible. We also left white space for compliance that would be flexible if we needed to add in a logo. We made a conscious choice in making the photos as large as possible which led to a more minimal design.
Homepage
The homepage would display the biggest part in our Brandable™ goal. Each homepage needed to be dynamic. It needed to give each site, and client it’s own look and feel because each of our clients are just that — different.
Hero Image
Working through many iterations ultimately led us to a large hero image that would differentiate the sites from each other. This would give clients the freedom to update their sites seasonally or based on a campaign. This also gave way to the user being focused on their primary goal of “searching” and being immersed in the experience of the large photo and search.
The hero image was sized into four different breakpoints to accommodate large, medium, small and extra small devices. This gave us enough flexibility to serve up an image that still gave you the immersive experience that our original concept had.
We set up a photoshop action that would speed up the image processing but in the end there was a lot of manual resizing involved and a huge portion of that came when our provisioning team on-boarded new clients. We also had to retroactively handle them all when we first launched the new platform.
Widget-ized Areas
Since we built the new version on wordpress we tried to keep everything designed for modular content where clients could put in an “about us” blurb, photos of their brokerage, featured listings and other pertinent information in whatever order they chose. The homepage also had several key “portholes” to take users to our other search views. (map & hero)
Logos
A GIANT consideration on the homepage was to take into account the various client logos & branding to make sure we catered the site to make them look as best as possible. Some of our clients had been around since 2006, when retina devices or even “high-res” images on the web weren’t around (more like 150px wide .gif’s that weren’t transparent) which made our job even harder.
In order to make our hero images function and look the way we intended, we had to recreate all of our clients logos. (At that point we had to recreate 500+!) We needed to put our best foot forward for our clients. Designing for retina and the future of the web to propel our clients into the future with us was the best decision we made. We went on to recreate their logos in vector format so they would be infinitely scalable. Then pairing that down to 4 sizes. Two for the homepage and two for the innerpage. Both home and inner would have a@2x version to future proof our clients for retina devices.
Preparing the background images was a manual process which required a lot of design hands on deck. This was the most time intensive part of the project, but yielded one of the biggest results in future-proofing our clients.
Property Details
Secondary to viewing snippets of information within the gallery is seeing the full picture of a property. The transition from browsing to seeing all the information needed to be a seamless experience. A large part of our iterations and user testing came from the preview (gallery tile, map tile or hero view) then would transition you to the full details.
Early designs for this flow led us down a rabbit hole, going from page one to page two. The experience was less than desirable because once you ended up back at the search page and you had to “get in the zone” again.
We chose to use a modal pattern that keeps you in the experience. This also kept your previous results just one click away.
Working on the modal pattern led us down several paths to explore a pinned navigation, in order to keep all the details and actions at your fingertips. This allowed our calls to action (on the right) to be upfront to our users.
The next chunk — the real meat: photos, thumbnails, maps, local pics + any stats that you would need about a property. Again, the images were the focus so we kept the interface and chrome as minimal as possible.
Towards the bottom of the page, all the suggested properties, nearby properties and recently sold would follow. Most of these are generated per client and would be custom.
Calls to Action
Another piece that lives inside of the property details are the calls to action. Important things like favorites, directions, email & setting up a showing request.
Designing for the Details
Making sure the team was on the same page for how sections of the site would function were paramount. The easiest way to illustrate some of these actions were to collaborate on mocks, and make them into a image with their desired executions.
Stats:
Collaboration:
This entire process was the sum of all our parts. We went through a massive collaborative effort to pull this off and my mocks / story represent a small portion of the GIANT undertaking that this project entailed.
Huge shout-outs to Terry Acker, Cooper Bane, Jason Finneyfrock, Jared Smith, Brian Baumgartner, Jake Coogle, Tom DeMille, Micah Martin, Tomas Katysovas, Desiree Smejkal, Kristin Shaffer, the QA team, the Provisioning Team, the Data Team, Engineering team & the rest of the BoomTown team/family for making all of this come to life. It was a hell of a ride and awesome to be a part of and by the way we’re always hiring.
