CBRE Calc
A redevelopment of the CALC web application to enhance lease comparison features for small businesses. I was responsible for updating the frontend codebase, implementing schema changes in a migration, and collaborating on UI enhancements with external contributions to open-source software.
SKIP TO
- Keeley Laures — UI Design
- Andrew Grosner — Engineering
- Dan Lehman — Product Management
Background
CALC was a web application build by Fuzz (now MonstarLab) for the commercial real estate titan CBRE that facilitating the comparison between traditional and flexible leasing options for small to medium sized businesses. CALC used a monte-carlo simulation-based model developed by CBRE that tackled two key challenges in comparing these lease types: the different pricing structures and the impact of headcount uncertainty.
By inputting standard company information such as the current market, headcount, and anticipated lease term, users could model both scenarios, but CBRE and users wanted more from the tool. Specifically, users wanted to compare any number of leases and lease types, something the current implementation would not support.
Engineering Overview
As the frontend engineer for CALC 2.0, I took over the existing frontend codebase and embarked on a comprehensive refactor. Collaborating closely with Andrew working on the backend, I worked to validate and implement the necessary schema and UI changes to support the new multi-lease comparison functionality.
I collaborated with the Component Library team at CBRE to upstream my accessibility updates to new and existing components in their open-source design system Blocks.
Lastly, I also worked to validate and implement a database schema hotfix and updated migration strategy for existing 2-lease comparisons stored with the tool.
Design Collaboration
Simultaneously, I collaborated with the design team to conceptualize and validate new designs for the tool that more deeply incorporated UI animations. The goal was to enhance the user experience and create a visually engaging interface that would captivate and engage users throughout their usage of the tool.
Concepts
We worked with an external visual artist to find a simple and delightful style that fit with our new UI.
Animation Prototype
I then used Lottie to create an interactive version of the animation that I could loop and sequence at will.
Final Result
The result was a elegant, expressive interface that I could not be more proud of. By leveraging my expertise in animation and accessibility in frontend engineering, I helped improved the product's overall quality while adding the multi-lease comparison feature. Unfortunately, CBRE retired Calc in the summer of 2023. In an effort to preserve its glory, I have the frontend hosted below.