CBRE

header copy.png

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.

 
unnamed.gif
 

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.

moodboard.png
 
unnamed.gif
 

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.

Apple iMac Mockup.jpg
Isometric Web Mockup.png
office1.png
office2.png
 
unnamed.gif
 

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.

CBREMobile.png
office3.png
office4.png
 
unnamed.gif
 

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.

The Story

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.

icons.png
 
office6.png
office8.png
 
unnamed.gif
 

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.

Category Page copy.png
office12.png
 
unnamed.gif
 

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.

Mockup.jpg
 
unnamed.gif
 

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.

357.png

Client Reception

Oh My God... Calc is adorable
— Client

UX | Caroline Muelenaer     Junior Designer | Claire Jardin      Illustrator & Animator | Meeta Panesar      Developers | Graydon Pleasants & Andrew Grosner      Product Manager | Dan Lehman