- October 29th, 2010
- by Galen
- Interface Design
The Best Way to Use It
“From a technical standpoint, Microsoft has never lagged Apple. In many cases, features Apple offered in its Macs were first enjoyed by Windows users. Where Microsoft fell short was in delivering these features in the cleanest way possible. The focus was on functionality, not the best way to use it. I continue to believe that anything you can do on a Mac you can do on a PC, it’s just the manner in which you do it that separates the two.”
Anders, one of our developers, dug up this quote for the Estately team and we liked it so much we put it on the blog.
In many cases, we at Estately strive to be the Apple to the real estate industry’s Microsoft. It means doing hundreds of little things incrementally better and doing a few things monumentally better.
Join the discussion »- May 23rd, 2010
- by Josh
- Interface Design
Bigger is better! Pro Tooltips for the Avid Home Hunter
My first project after the dust settled from walking through the doors of Estately was to redesign and enrich the user experience of the property bubble. The property bubble is a super charged snap shot of information about a house or condominium that is revealed upon “click” of a map marker on the Estately search results map.
Goals for the Redesign.
The Estately team envisioned taking our current map of search results a few steps further, giving users an image carousel to preview while browsing the map in addition to the essential home facts. That’s right…a carousel of images and 30% bigger than the previous thumbnail we were loading in our prior release.
The supporting home details and functionality are there too and not at the expense of the imagery either. The developers did a wonderful job making everything load just as speedy as before. Now users have access to more imagery, highly scannable facts such as price, beds, bath, square feet, days on market and sale status. Top that with functionality to view the full listing, schedule a showing and save/hide the property and you have a hard working area of pixels.
The redesigned property bubble.
var perfection == calculatedGuess + test + userFeedback + iteration
Striving for perfection is a good trait to have but it can also paralyze you too. The team here believes in rapid prototyping and deploying features to users as quickly as possible. This process is not at the expense of design but rather in tandem with development. Honestly, anything can be made to look sweet in Fireworks or Photoshop but until it’s in the browser and being used it’s just a pile of pixels. We’ve already made improvements since the property bubble redesign launched and more are on the way so stay tuned.
Process. Right brained design thinking.
Mapmaking is an ancient art-form that I believe stems from the human desire to understand everything around us. Some maps help you find a home , while others are self portraits .
Self portrait of Paula Scher shows that maps can be metaphors and or literal translations of dimension.
While the map medium has traveled the spectrum from sheepskin to pixels the fundamentals remain consistent, maps can tell the reader something about their origin, destination and the places in-between.
Crystal balls, tarot cards and carousels
Half the time we are engineering, designing and directly caring for our customers to keep the product alive an nurtured. The other half of the day is spent in a smokey room with witch craft and sorcery chants echoing from our think tank chambers.
Seriously, we really care about helping people find homes and think of our end users as the modern day explorers akin to “X”. Part of that love is about rethinking the way people find home online. So, we have to crystal ball it’, dream and take little leaps of calculated guesses when expanding the product feature set. This is where the image carousel came to life. Why not offer users multiple photos at the map level and make this view harder working.
Listening and responding to user feedback
Now we listen and watch our users and we insert our perfection variable from time to time and incrementally improve the feature. Last week Doug and I got an email from a user who loves our site but was frustrated with the new property bubble. My ears perked up and I immediately wanted to understand and correct her pain. Well it turns out that she was confused about how to close the bubble, especially when the “close” button was obscured with other UI elements.
Check out this diagram I sent her back to make sure I understood her problem.
The diagram I sent to the end user.
User feedback is like panning for gold and this was a huge nugget. So, here our close button for the property bubble is hidden underneath the Google Maps UI. Well it just so turns out our current “Hide” button has the same icon as the close button and being located in the lower corner of the bubble it makes perfect sense our user clicked on it hoping to “hide” or close the bubble.
In the short term the fix was easy, swap the “Save” and the “Hide” buttons. This is truly a part of my craft I value deeply. Not every piece of end user feedback is as helpful as the next but having a channel open for the feedback to reach me is invaluable.
In the near future, we will be changing how the “hide” feature works a little more significantly.
Keep on keepn’ on
Design, code, test and listen. Be on the look out for more updates from behind the Estately.com curtain. This first release tackled homes and we have some surprises for the condo hunters out there too, so stay tuned for a follow-up post.
*Also note we are working hard to make sure every listing has images if they are available from the respective MLS.
Simply by swapping the save and hide buttons we were able to reduce confusion. We also demonstated that we respond to the feedback of our users and it takes our product farther! Thank you.
- January 7th, 2009
- by Galen
- Estately, Features, Interface Design
Estately’s Got a Brand New Bag
As you may have already noticed, this week sees the release of our new map and property page interface design! We’ve been hard at work on this interface for the past few weeks, and I think it really paid off. While the physical—well, virtual—act of ripping out and replacing code started just recently, the road to this new interface design really began once ShackPrices transformed to Estately a year and a half ago.
Once the logo had been developed, the task of shifting the look and feel of ShackPrices to Estately was underway. A brand new style framework was created for our supplemental pages, such as the About section, and the rest of Estately’s pages were gradually transitioned to the new framework. With that transition nearly complete, it was time to tackle the heart of Estately: the map page.
The goals for the map transition were fairly clear: adopt the new look and feel of the Estately brand, transition to the new style framework, and simplify the interface.
One of the most striking changes you’ll notice is that the search sidebar has been moved to the right side of the page. This change allowed us to utilize the full height of the browser window, giving us more white-space to work with in the design, and the ability to more clearly separate search filters from search results. Color also plays an important role in the new interface by aiding in this separation as well, with blues for portions of the interface related to your search, and greens for portions related to the properties that match the search. We also decided to simplify the search filter mechanism, giving users one-click access to all of the filtering options we provide.
The second biggest change is to the property pages; gone is the frame that once contained home information, it is now allowed to stretch the full length of the browser window. The various tabs that lined the top of the page are now gone, with only one simple “Return to Map” tab remaining. The other tabs have now been integrated in to the property page, efficiently making use of its newly found page real estate.
A few technical changes also allowed us to streamline our work, among those being the implementation of SASS to programatically generate stylesheets, and HAML to speed up and simplify the process of creating page markup (more information about SASS and HAML here).
As always, we’d absolutely love to hear your feedback on the new layout. You can share your thoughts with us in a few ways: comment on this blog post, send us an email using our contact form, or get in touch with us on Twitter.
Join the discussion »- August 14th, 2008
- by Galen
- Features, Interface Design, New Features, real estate
My Estately — Extreme Makeover!
With our latest release, we are allowing consumers to collaborate with friends and family on their home search; every Estately account now comes with the ability to share saved properties, notes on properties, and saved searches with friends and family members and to solicit feedback from them!
Here are some ways to use My Estately sharing:
1. You and your significant other are looking for a new place. Now, each of you can have your own account while, at the same time, collaborating! Write notes on each others saved properties. See what homes your special someone has been looking at recently.
2. Need some input from your friends or family on your first buy? Invite them to look at your saved properties and leave notes on them.
3. Are you an social networking butterfly? Link to your My Estately page on your website/blog/Facebook/wherever!
So what are we trying to achieve with this release? Simple: share; collaborate. Your quest for a new home doesn’t have to be intimidating, especially when you’ve got your friends and family behind you, providing their thought and insight during your search.
Don’t have an account and want to see the new My Estately in action? Take a look at the Estately team’s pages: Galen, Doug, John, Eric, and, lastely, little ol’ me.
Join the discussion »- June 24th, 2008
- by Galen
- Interface Design, Neighborhoods, New Features
Property Details page: Packed with more detaily goodness
Where the heck did that “Nearby” tab go under Listing Details? I’ll tell you where: on the details page! All the same information is there: nearby schools, transit, parks, and places; however, you can now view where there nearby places are relative to the home you’re looking at right on the neighborhood overview map! If you’re not really in to green grass, trees, and nature, you can quickly hide parks from the neighborhood map by clicking on the parks tab and unchecking “Show Parks on the Neighborhood Map”. You can, of course, do this with the other three nearby categories. As Rachael Ray of Food Network fame would say, “How cool is that?” Unfortunately, no part of this update is “Yum-o!” (Another Rachael Ray saying. Sorry…)
See it in action on a random home in Seattle, Bellevue or Portland. Yes, Hung Far Low is just 1.8 miles, or a brisk 35 minute walk from that Portland home.
Join the discussion »