CBRE Agile Lease Calculator

A calculator and sales tool for commercial real estate power users.

The ask:

Use the logic in an Excel sheet to build a sales tool for brokers and analysts.

CBRE approached Fuzz with an Excel-based tool to compare the costs of a traditional lease against a flexible office space, like WeWork.

We were instructed to use its underlying financial model to build a responsive web-based calculator tool for brokers to use to help clients understand the financial risks and benefits of each option.

The Excel prototype created by a CBRE analyst.

Though they were happy with the financial modeling and results of the prototype Excel calculator, CBRE wanted a web-based version that could generate a client-friendly output so that a broker would be able to give their clients a simple report comparing a traditional lease to a coworking solution.

Discovery

I worked closely with the product manager on research and discovery, which we broke out into three main tasks.

Problem statement and goals from discovery findings deck.
Stakeholder interview takeaways.
We individually interviewed Fuzz’s operations team about factors they would consider when renting an office before giving them a demo of the Excel tool.
I presented a step-by-step walkthrough of the Excel tool to confirm that we had a complete understanding of its functionality and the relationships between inputs and outputs.
I analyzed several web-based calculator tools in-depth to get a sense of UI trends and how tools approached educating users on their functionality.
I created a user flow, breaking out each step. This flow informed the design process for the first round of wireframe concepts.
  1. Interviews: We led calls with client stakeholders and collaborated on the interview scripts and note-taking. We also interviewed Fuzz’s CEO, operations, and finance teams to learn about factors they consider when renting an office.

  2. Competitive analysis: I looked tools such as mortgage and retirement calculators for UI inspiration, especially on mobile. I also researched different styles of data visualizations.

  3. Current tool evaluation: I closely studied the Excel tool’s interface and functionality, evaluating how inputs affect the output to get a clear sense of the importance of each input and its relationships to other inputs. We put together a presentation of our findings and presented it to the client stakeholders before moving forward with design.

Exploring a range
 of solutions

I created a range of wireframes and low-fidelity prototypes in Sketch, exploring different ways to handle user input and concepts for presenting the results.

I experimented with page structure and placing different levels of emphasis on inputs and outputs, holding a critique session with the Fuzz design team to help narrow in on what was working well.

The design process was greatly assisted by the web engineer, who had used the time during discovery to build a technical prototype that performed the same logic as the Excel sheet in a browser and returned results as a table, giving me a sense of the speed and responsiveness I could expect in the finished product.

After some refinement, I presented three radically different directions to the client, which we cut down to two for further refinement into what would be our first user test.

User testing with
 low-fidelity prototypes

Given the complexity of the tool and its specific audience of CBRE brokers and analysts, we saw early user testing as essential to understanding what to build. We ran the first test with two prototypes.

The first design provided a guided experience through the tool, hiding most of the complexity and mixing the basic inputs with the tool’s outputs. The second version completely separated the inputs and outputs and provided less direction, with no clearly defined steps.

The guided test version (left) mixed inputs and outputs, with all of the advanced settings available in a “customize” view. The freeform version separates inputs and outputs, with all of the outputs available to the user at all times.

We performed remote user testing of both wireframe prototypes with six CBRE brokers. I built the prototypes, wrote the test script with the product manager, and facilitated the testing. Somewhat to my surprise, users overwhelmingly preferred the unguided version and clearly understood how to use it, even in its rough state.

After our first round of interviews, it became clear that we were building a sales tool that brokers would want to use to facilitate a conversation with their clients. This represented a shift from the initial direction of making a calculator tool to help brokers understand the cost differences, changed how I approached the presentation of information going forward, and placed more importance on a feature of the tool to export a simple one-page report that a client could easily understand.

Refining the prototype

After the first test provided us with a clear path forward, I worked to refine the prototype into something more polished and populated it with real data from the Excel tool to provide a realistic sense of the outputs.

The refined prototype expanded conceptually on the freeform direction, moving to a tabbed layout and placing more emphasis on the navigation, which none of the users of the first round interacted with.

By this point, I had a clear sense of what information was most valuable to brokers and their clients, so I added sections in the inputs that display the most important numbers to highlight how they change at different lease terms and company sizes, and give users a sense of what they are able to edit by using the “Edit” link for each type of lease.

We performed the second round of testing with six brokers and analysts, none of whom had participated in the first test. The tests proved that the design worked and provided us with much more granular feedback, which I incorporated into the final wireframes before moving into UI design.

The finished product

I worked with a visual designer on the user interface. She designed the key screens, which I refined and expanded to include all of the inputs and charts. She also designed the tool’s landing page.

I was responsible for the mobile interface design. The tool uses a responsive layout which changes to a single column on mobile devices. When viewing the tool on mobile, it uses a modal interface with inputs and results separated, allowing the user to quickly jump between tweaking numbers and viewing detailed results.

CBRE Agile Lease Calculator. Art direction and icons: Kortni Bottini
On mobile, the interface switches modes between inputs and results, preserving the state of each so the user can quickly swap back and forth.

We worked with a copywriter on the names of the inputs and their helper text, as well as the marketing copy on the landing page.

CBRE is currently testing the tool to gather feedback, and continues to expand on it based on insights they are learning from users.

Role

Senior Product Designer

Tasks

User experience, design research, stakeholder interviews, rapid prototyping, user testing, interface design

Timeline

March – June 2018

Agency

Fuzz

Up next:

Fashion Rental App

iOS app, launched spring 2018