CBRE Lease Calculator

Project Overview

CBRE is the largest commercial real estate services company in the world and we collaborated with their Build team on the agile lease calculator. This responsive web tool was initially designed by Fuzz in 2017 with additional features added over the next 2 years. Since then, CBRE developed a design system for use across all Build projects and the purpose of the Calc tool shifted. We were tasked with updating the tool workflow as well as incorporating the Blocks Design System.

CBRE%2BMain.jpg — Calc 1.0

The first version of Calc was designed for a commercial broker to help their client understand the cost/benefit of selecting an agile lease, such as a coworking space, over a traditional commercial lease. The broker would update the variables such as office size, projected growth, and certainty of that growth and the algorithm calculate the average cost per year in their market.

Calc 2.0

For the next iteration of Calc, the goal was to allow for multiple comparisons - this allows the broker to compare multiple standard or flexible leases when they have more specific ideas of pricing and pricing models. Another goal of the update was to increase the usage of the tool by non-CBRE brokers. We wanted to walk new users through the inputs they needed to fill in based on their or their client’s company, so we separated the company details from the lease variables. This also reduced the number of fields the user was seeing at a time.

Updated User Flow

Company Profile

This is the first step in the new multiple comparison update to the CBRE Calc tool. In this flow, the user can set up the company profile that will be used for the leases (both standard and flexible) that they can enter in step 2 and compare in step 3. The combination of user inputs and predictive defaults and progressive disclosure interaction creates a simplified flow for non-expert users.

Final Designs

For the final designs, we brought in animation and illustration to enhance the workflow and branding.

The Team

Visual Designers: Keeley Laures + Claire Jardin Illustrator/Animator: Meeta Panesar Web Developers: Graydon Pleasants Project Manager: Dan Lehman