Plans Pro by CBRE
Screenshot of CBRE’s Plans Pro GUI elements.
Company
CBRE Build, CBRE
Product Background
Plans Pro is a tool used space planners to quickly create accurate, custom 2D floorplans which can easily convert into 3D walkthroughs.
Goals
1) Enable our team to onboard new clients.
2) Improve upon the MVP and Launch V1 of the product.
Role
Product design, research, testing
Goal 1: Enable Onboarding of New Clients
Using Interviews and Flows to Understand The Current Process
Plans Pro was a complicated beast that had been developed over 3 years with many different engineers’ and designers’ hands all over it. Through interviews with current and previous team members I was able to create a flow of the current process.
It took over 60 hours, 6 tools and the help of an engineer to complete the onboarding of a new client.
My goal would be to avoid the need to use an engineer for onboarding and to reduce the number of hours needed to complete the process.
Designing a New Onboarding Flow
My solution to improve the onboarding process was to create a new set of forms that would enable our team to onboard new clients without leaving Plans Pro and without having to use an engineer. Through the interviews I was able to identify key objects and map these to their attributes and relationships to each other. This resulted in three distinct forms where an onboarder could create furniture units, room types/subtypes, and define styles.
My next step was to create content docs illustrating where data would be sourced from and what functionality needed to exist.
After interviews, I used a content document to confirm functionality/feasibility with engineers and the PM. The document was very useful for engineers, especially those who were new to the team, to quickly understand where data would be pulled from for various fields.
Once I verified the new, proposed flow, I worked closely with engineering to design a UI that could be quickly implemented using existing components.
Using the content doc from the previous example, I created a mid-fidelity UI test by literally replacing the words on the first screen with actual UI components. I used this prototype with the production team to ensure usability as well as to verify with the UI engineer that the proposed design was easily implementable.
Screenshot of Sketch showing stages and screens of the existing onboarding flow.
Completed designs for new onboarding forms.
Training The Production Team
After the design had been built I did a thorough QA and then produced training documentation illustrating how to complete the new onboarding process. I then held training sessions with our product team and the production team where participants onboarded their own test clients.
In-person training session where participants learned how to on-board new clients from scratch.
Training docs for the new onboarding process.
Results!
Enabled the production team to be able to upload a custom 3D solution without engaging an engineer saving time on many fronts!
Onboarding time reduced from 60h to 20h
Goal 2: Improve the MVP and Launch V1 of the product
The Existing Product
It takes a lot of work to launch a product. The existing version of Plans Pro was built as an MVP. It was a powerful tool, but had some critical UI/UX issues.
The product before UI/UX improvements.
• Difficult to find certain information or actions due to low contrast UI and unintuitive UX.
• Hidden features only accessible by keyboard.
• Limited feature set was not useful for space planners.
• Washed out UI did not reflect CBRE brand.
Process
Research
We employed interviews and usability testing to identify the problem areas listed above.
Usability Audit
A separate usability audit highlighted usability/accessibility issues based on best practices.
Prioritization
V1 features and improvements workshop.
Testing
A/B testing and flow testing using prototypes were used for every new and changed feature to ensure high usability.
Specs, Handoff, QA
Once validated, designs would be spec’d out and handed off to engineers via zeplin. Once built, I would step back in to do QA.
Screenshot of some of the specs provided to engineering.
One of the recommendations from the usability audit was to place related actions and content closer together - Fitt’s Law.
During a follow up workshop we prioritized the results of the audit.
We used A/B testing often with remote participants to test changes to the UI. Here, we are looking at 3 different mental models for the new toolbar.
Plans Pro Launches!
Image of Plans Pro at launch
Improved UI included:
Header and main menu update and new toolbar to improve navigation, access to tools, and overall UX.
Updated right hand detail panel for improved readability and UX - includes furniture, room, stats.
New comments, measure, export features based on user needs.
New system responses for improved UX.
Cohesive branding to unify Plans Pro with other CBRE products.
Ongoing Monitoring
In product, your work doesn’t end at launch. Post-launch we continued to monitor the usage of new and updated features in the months after their release resulting in further investigations if necessary. To help our team make use of usage metrics, I created a flowchart titled “Continuous UX Plan” to help us interpret and take action on collected metrics.
Continuous UX plan
Example from Oct 2019 presentation of most and least used features. Often used features could be presumed valuable to our users. For poorly used features, I would work with our PM and Customer Success person to investigate the reason for poor usage.