Single Deal Inventory with Filter UX/UI
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.
Deals are the central object in the software, whereby a commercial real estate broker can track a transaction (a lease, sale, or any other revenue activity) in their day-to-day work.
Problem Statement
The first version of Deal IQ had deals listed by predetermined lifecycle stages: Prospecting, Executing and Closed.
We received a feature request from our support team which interacts directly with the users of Deal IQ. The request was for all Deal types to be listed in a single view (a long scrolling view of each Deal object). This allowed for more than three deal lifecycle stages to be added, depending on User preference.
In addition, our Users wanted to be able to save a list of Deals by very specific criteria. This would be an upgrade to the earlier version of the product, where deals were pre-categorized based on initial assumptions about commercial real estate deal stages.
In order to support this, we needed to add an advanced filter and sort function, so that a user could quickly find the deal they needed.
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 transactions.
Traditionally a broker would manage a real estate deal with several pieces of software, combined with hundreds of phone conversations and emails, notes on paper, faxes, and personal conversations.
CBRE determined that the brokers could work much faster if this exchange of information could be contained and managed in a single web app.
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.
In the earlier version of the app, the filter function was contained in a single dropdown control, the width of the longest piece of information in any row.
By consolidating the three primary deal types into a single list, the options available to filter with grew by two or three times. The dropdown control to filter the display of deals was no longer optimal for user experience.
I decided to try to create a tray which would descend from the toolbar at the top of the deal list. When a user clicked on the filter icon, the tray would descend, pushing down the visible deal cards. The tray would be the same width as the entire list, and could vary in height, allowing for more or fewer filter options.
The addition of custom tags was introduced to allow users to create custom categories and lifecycle stages.
The tray format for the filter function also allowed better responsive design to support different screen sizes.
Process and my work
I started by mapping out the steps in lo-fidelity screens and linking interactions with blue lines. These sketches were assembled into simple prototypes which were clickable for usability testing.
After a few rounds of testing and applying feedback, I went to rendering lo-fidelity mockups. I worked with our research team to explore every possible scenario a user might follow to complete the various tasks the feature supports.
Exploring all possible scenarios surfaced problems which were solved in group workshops with both the product manager and developers working on the Scrum team.
The design uses an existing style guide which we created for the web app. There were a few net-new design patterns introduced, including the tray, and the application of a dark theme to give the control a sense of sliding out from behind the primary screen contact. It then appears like a support utility which does not need to be surfaced often.
Outcomes and Lessons
At the time, this feature is still in labs for early adopters to beta-test.
The biggest lesson for myself was how to articulate design decisions to product manager and developers.
