A UX Solution for a Commercial Real Estate Stacking Plan Feature
Overview
DealIQ is an enterprise productivity tool developed by CBRE. It helps commercial real estate brokers create leads and manage deals faster and more efficiently.
Users have to manage properties and spaces for their clients, and needed a way to visualize them with a combination of data and visual design.
Problem Statement
Brokers were using a variety of tools to create visual representations of a commercial properties. They often would use spreadsheets, or desktop publishing applications, or even sketching. They also had to share these in a variety of ways.
The biggest pain point was the amount of redundant data-entry this required, and the risk of errors and data being lost in translation.
Users and Audience
The intended user for this feature is the commercial real estate broker for CBRE who wants to track the lifecycle of their deals. They are building strong relationships with landlords and property managers, and adding value for their clients.
Roles and Responsibilities
Research for this feature was completed through a support team aggregating feature requests from users.
My role was UX Designer. I was to create a concept from the basic feature request, and ideate on it until it was ready to hand to our development team.
Scope and Constraints
This was a new feature for an existing web app.
We had limited access to actual landlords and brokers to discover their pain points.
We referenced existing models of stack plans as a starting point, which were mostly built with spreadsheets, desktop publishing and drawing apps, and another application for managing commercial real estate.
We defined maximum viable product to be completed by the third quarter of the year.
We had to fit a column for filtering and sorting display data, as well as providing a viewable area for the stack plan, displaying the most important data for each space.
Some buildings would have more floors than others, and the assumption was made that it would be best to display all of the floors of a building without the user having to scroll, pan, or zoom out. We had to consider how to display a building with more than 40 floors, and the difference in the UI with a building displaying fewer than three floors.
We also had to consider how the feature would scale to mobile without loss of usability.
Process and my work
The initial UI for this feature was started by doing a competitive analysis, along with looking at the existing tools brokers were using to customize a stack plan.
I started by mapping out the steps in a diagram.
From these maps simple hand-drawn wireframes were made for user interviews.
The usability testing revealed some excellent insight into how brokers would use this feature, and challenged some of our assumptions about what they would or would not find useful or intuitive.
After the first user interviews about hand-drawn sketched UI were completed, mockups were made.
The first color set was meant to provide sufficient contrast for the different lease expiration dates. After further user interviews, we found that a balanced color gradient was more intuitive.
From that feedback I designed a high-fidelity mockup, which was reviewed by the Agile team.
Outcomes and Lessons
Testers reviewing our initial wireframes indicated that they preferred a logical view of a building with more meta-data per floor. The earlier designs had relative proportions of each floor and the spaces on each floor. These designs would only display the meta-data the space could provide.
Adjustments were made with the way spaces were filtered and displayed, and the amount of data visible at different zoom levels.
The UI organization within CBRE decided that the scope of this feature could be scaled to other applications, so further research and development is being done at this time.
