Sometimes my favourite part of a design is all the thought and preparation that goes into the process behind it. It can be a grueling and daunting task with any project when you have to portray a lot of information in a clean and easy-to-navigate way, but when the people using your product are over-joyed by its simplicity, that’s when you know all the thinking and hard work paid off.

While working under contract at Engine Advertising Inc. the team was asked to create a 55” multi-touch display that would be populated with all of the client’s community material. This material includes home renderings, floor plans, site plans and amentities map. Customers in their Sales Centre would be able to use these touch screens to browse through all of this content and send any content they may be interested in to their email.

I started out by laying out some basic wireframes to Illustrate how we would organize and display data.

The Home screen gave users the option to view new homes, view inventory homes and view inventory lots. In the instance they chose to view new homes (‘Browse Homes’), we categorized the homes by lot size and type on the next screen. Excluding the option to view townhomes (we’ll get to that later), all other options would bring the user to a list screen. Once a user selects a home from this list, they’re brought to the screen below.

At this screen the user is viewing a specific home model. Here the user has the option to click on a set of buttons under the render or swipe left/right directly on the render to view the home’s elevations. From this screen the user can view the next and previous homes without having to go back to the previous list screen. The client requested a full-screen option that would enlarge the floor plan. With the floor plan’s current size, it wasn’t necessary — but this feature was useful when viewing the townhomes so we left it on for this view as well. The footer allows the user to quickly go back, jump to the site plan or amenities map, or go to the home screen.

As mentioned earlier, the townhome section to this multi-touch display was a little unique from the other categories. The client wanted users to be able to browse these homes by models as well as by block; so we added an extra step that would ask the user if they wanted to browse by block or browse by model.

The view for townhomes is a little different from viewing all other home types. The client wanted the user to be able to clearly see what is to the right and left of the home they were interested in. The top portion shows the entire block and users are able to select individual homes within this image. The one problem with this route was that now we weren’t showing a large render of the selected home. This forced us to make the floor plan area smaller and include a closer crop of the selected home’s render. Now that the floor plan is smaller, the full-screen button became helpful for some user’s who may have difficulty with viewing details at this size.

The client was excited for what we had built for them. It was when we put this application in the hands of real users that we knew we had built a product that was refined and extremely user friendly.