Flex Index

Office Benchmarks

Web app for companies to get insight into real estate metrics of their peers that generated $90K ARR.

Productivity

Mid 2024

Flex Index

Role

Product Designer.

Team

Product Manager (CPO), 3 Front-End Engineers, 2 Back-End Engineers, 1 Marketer.

Services

Design strategy, design vision, UI/UX, responsive web design, web app design, design systems.

Duration

Two weeks to design.

Tools

Figma, FigJam, and Linear.

About

Office Benchmarks combines flexible work policy and workplace metrics to enable leaders to accurately assess their investments and policy decisions relative to peers.

I designed the end-to-end experience from uploading office data to getting summary metrics and everything in between.

Objective

We wanted to craft a solution that satisfied our user's needs and business goals, while making implementation as easy as possible. We were able to do that by doing the following:

  • Have the feature live on the Company's profile page, to simplify implementation and increase visibility to potential customers.

  • Use third party tools like AG Grid for the table, Mapbox for checking addresses, and Stripe for checkout.

  • Don't optimize for mobile because over 90% of the users will use desktop for this feature.

Solution

These are the key pages of the final designs.

Summary Metrics

Once a user has uploaded their office data, but has not subscribed, they will get an overview summary and summary of office utilization metrics.

There is a callout to inform and get users to upgrade to office benchmarks.

Desktop and mobile versions of summary metrics. A user who has uploaded their office data, but hasn't paid for office benchmarks.

Office Benchmarks

Once a user has subscribed, they will be able to see how their company compares to their peers. They can filter by their offices, real estate type, office area, and more.

The user no longer has access to the summary metrics design (shown above) because it is now the "You" column in the table. Users expect a table to display this kind of data.

Desktop and mobile versions of office benchmarks. A user who has paid for office benchmarks.

Upload Office Data Step 1

To upload their office data, the user must have a correctly formated CSV. They can download a CSV template to speed up the process. I made sure that we provided a detail example of what the column header names should be, definitions for each one, and an example for each one to help reduce incorrect data.

Additionally, we knew that users would need reassurance that their data was private and would not be shared with anyone, so I designed a banner to call that information out.

Desktop and mobile versions of step 1 of uploading office data.

Upload Office Data Step 2

The user had 2 ways to upload their data, 1) via a CSV and 2) via copying and pasting. The later was a big push by our CPO because he wanted it to be as easy as possible for someone to upload their office data. We later found out that copying and pasting was more of a hassle then just uploading a CSV, especially for companies with lots of offices.

We leveraged AG Grid so we didn't have to design and implement a table UI/UX from scratch. The one thing we did have to customize was the error handling because AG Grid did not support robust error handling that was needed to validate connected cells across columns, e.g. office addresses.

Desktop and mobile versions of step 2 of uploading office data.

Research

We interviewed 8 HR leaders and 6 Real Estate consultants. They are the ones who help execs, e.g. CEOs, make decisions about their company's real estate.

Business Goals

  • Have at least ten companies upload their office data.

  • Get at least one paying customer.

User Needs

  • Have insight into their other company's office investments and utilization.

  • Help make informed decisions for the company's office investments.

  • Be the company’s source of truth for their office data.

Exploration

I tried various layouts and locations. As you can see I explored having Office Benchmarks on a separate page, even though we landed on having it on the company profile page because of a push by the CEO because of visibility and the CPO because it would increase implementation time.

Design explorations.

Impact

A week after launch, the results exceeded our expectations.

20

Companies uploaded office data

9

Paying customers

20M+

Sq ft of office space being managed

Learnings

What Worked

  • The insights dashboard and benchmarks table provided valuable information.

  • It was clear to users what value they were getting by uploading their office data.

  • The overall process of uploading data and getting insights was straightforward.

What Didn't Work

  • Copying and pasting data from a CSV to the table was too cumbersome.

  • Benchmarks living on the company profile made it hard to find and it set the wrong expectations for users