Flex Index

FlexGPT

A.I. powered chat to generate charts from Flex Index's data.

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

FlexGPT allows HR & workplace leaders, workplace consultants, researchers, and reporters to create on-demand visualizations customized to their flexible work policy questions to get insight into policy data and trends.

I designed the end-to-end experience working closely with Engineering to ensure we implemented a high-quality solution that allowed users to try out the product before having to pay.

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:

  • Use a third party tool, Stream, for the base functionality and foundation.

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

Solution

These are a few key screens of the final designs.

Free User

Users can generate 3 charts a month. If they want to generate more they can subscribe to generate an unlimited amount. There is no difference in the experience between free and paid users otherwise.

I designed a callout to grab user's attention to subscribe, which worked well because 36% of users who clicked the subscribe button ended up subscribing.

Desktop and mobile versions of the free user experience.

Paid User

Once a user subscribes they can generate an unlimited amount of charts.

Desktop and mobile versions of the paid user experience.

First Time Experience

We wanted to make sure that the first time users were set up for success. I designed a solution that made it super easy for users to get started and generate their first chart.

The user has 4 options to choose from using popular data points. These options also show the best way to structure a prompt to generate charts accurately.

Desktop and mobile versions of the first time experience.

Flagged Message

Since we knew that generated charts and other answers weren't going to be 100% accurate all the time, we needed a way to allow users to help us fix issues with the A.I. model.

A user would flag a message and have the option to add more details using plain text. We would take that information and re-train our model to prevent it from happening again.

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

Research

We tested an alpha version with 3 HR leaders. The feedback was overwhelmingly positive.

Business Goals

  • Get at least 15 users.

  • Get at least one paying customer.

User Needs

  • Access Flex Index data in an easy way.

  • Get results tailored to their specific situation.

Exploration

I explored different ways to help the user get started for the first time, location of the chat, flagging, saving, and other actions, and ways to get users to upgrade from free to paid.

Design explorations.

Impact

A week after launch, the results exceeded our expectations.

100

Charts generated in the first 24 hours

25

People signed up

5

Paying customers

Learnings

What Worked

  • Users loved how easy it was to get answers.

  • Users found the charts to be a better experience compared to just text.

What Didn't Work

  • Replies from FlexGPT were not 100% reliable.

  • FlexGPT would infer things incorrectly, use wrong data, and sometimes just completely ignore parts of the prompt.