CBRE Multi-comparison tool
Agency | Fuzz Role | Visual Design Lead Client | CBRE Link | CBRE Calc Comparison
CBRE needed to do a completely overhaul to one of their most widely used online tools.
The goal was to create a tool to compare the cost of different commercial leases including traditional offices and co-working spaces.
The ideal user for this tool included commercial real estate brokers as well as sales associates at co-working spaces like WeWork.
This calculator needed to provide a simple way for clients to view and compare their leasing options as well as act as a sales tool for brokers to illustrate value of co-working spaces.
The visual Vision
When looking to explore how we would redo this experience from a visual perspective, we knew that we wanted to be a lot more bold
and intentional when it came to elements and visuals. We also wanted to leverage the brand in a meaningful way and save certain aspects of it for action and adding friendliness to the page.
The Multi-Comparison WEb Tool
The main format in which this tool is used in on personal desktop computers.
When re-designing this experience, we wanted to focus on the new CBRE branding style as well as the vision that we had set forth to create.
We also wanted to focus on making sure that everything was ADA compliant which meant doing an audit of the brand and adjusting it appropriately to ensure best use.
From an interactive perspective, we wanted to create a paradigm that was both familiar and simple and as a result we focused on displaying progressional steps as well as leveraging
negative space wisely for the main inputs that were to be interacted with by the user.
responsive web | mobile
Through looking at analytics, we found that a growing number of users, above 22%, were starting to take their tool usage to mobile.
As a result, we made sure to re-evaluate some of the interactions to ensure that each experience was mobile-friendly.
Illustrations & Animations
We hired a freelance Illustrator and Animator to assist with completing our visual narrative.
We knew the story we wanted to tell and needed the perfect artist to help us complete the vision.
That’s where we found Meeta and through a couple of months, she was able to help bring the vision to life.
Because the onboarding process in the beginning is a stepped approach, we wanted to tell a visual story that reemphasized the progress that the user was making.
As a result, we created a story that pertained to an individual finding their perfect office space. The user starts off in a city landscape with the first input.
As the user progresses, they zoom in closer to the buildings thus exposing a few details of an office space.
As the user gets closer to completing the onboarding, they finally enter an office space.
Flexible & Standard Lease Icon Sets
The icons are leveraged within the Comparison Table of the Detailed Results page.
The goal of the icons is to show a sense of differentiation between Standard and Flexible lease types while adding warmth to a heavily utility based page.
Component Based Design
From a process perspective, we approached this project as component based design.
Essentially, we designed key pages and fleshed out the rest of the system in components.
This meant that we were able to start dev build a bit sooner while design was still working through things like illustration styles and animations.
We found that by doing this process, not only were we able to ensure that our designs were pixel-perfect from a component level, we were able to make sure that Design,
Dev and QA was speaking the same language and looking for the same thing when it came to each discipline’s role in the project.
Landing Page Entry Point Update
In the previous version, a landing page experience was created as the main entry point into the experience and with the tool update, the landing page was also updated.
The goal of the landing page is to articulate some of the key features of the tool including the bountiful multi-comparison results, ease of use, and tangible report.
The landing page also reflects the new design system that was created for the Multi-Calc tool and was naturally created for optimal desktop and mobile devices.
Printable PDF Report
The final piece to the design puzzle was to create a report that was easy to digest by the user as well as translated well from the experience into print format.
As a result, we found that converting the tabled information into cards to be placed onto a single sheet fit the needs of being concise and descriptive.
UX | Caroline Muelenaer Junior Designer | Claire Jardin Illustrator & Animator | Meeta Panesar Developers | Graydon Pleasants & Andrew Grosner Product Manager | Dan Lehman