Tools: Opps gets some App Juice 🧃

[EricZ]

Working with data roll-ups is complicated. Migrating that data from a tool into design software is wrist-breaking data entry.

We decided to leverage AI to pull data directly from our Helio surveys into Figma. We ended up building a tool that will reduce our production time by 75%!

Here is a breakdown of our process, where we failed, and how we eventually solved it.

Check out the tool: UX Metric Card Builder

Step 1: The Design Foundation

We refined the Figma design elements. We ensured the cards were consistent so there was a standardized structure for the data to populate.

Step 2: The Failed “Figma Make” Experiment

We attempted to use Figma Make to generate an environment for editing cards using AI prompts.

Build Attempt 1

Build Attempt 2

• The Hypothesis: We thought we could build the design assets, then upload a screenshot of the survey and allow the AI to populate the fields, update the cards, and let us download as SVGs.
• The Result: Figma Make literally built a standalone “application”. It resembled a one-off file conversion website. Does this workflow really need a new app? (Build Attempt 1)
• The Pivot: We tried to strip it back, but doing so moved us away from the defined patterns the AI needed to function. What started as a five-minute task turned into 30 minutes of reasoning for a result that was unimpressive and unusable. (Build Attempt 2)

Step 3: The Cursor Solution (Success)

At this stage, @ben stepped in using Cursor with Claude Code to generate a solution that added more custom features to the first app approach. The results are significant.

Current Capabilities

We can now enter a Helio survey URL and the tool will:

1. Scrape the data.
2. Populate the cards automatically.
3. Retrieve the specific image tested and place it into the cards.

The Impact

When we build out our concept pages (example here), it typically takes 20-30 minutes to migrate the data and build out the cards. We project this will reduce production time for building graphics for our concept pages by 75%. This is a highly effective tool for anyone adopting Glare to build data cards for presentation decks and other applications!

We are excited to share this. Let us know what you think and if you are interested in experimenting with it!

Tool: UX Metric Card Builder

Example Survey: Helio | B2B: Start Recording Flow Report

[nathaliesmith]

SOOO COOL! @ben @EricZ Great work here! So fun to see these little nuggets come together to push these pieces forward faster.

[Bryan]

Ohhhhh, ahhhhh. I wanna see the goods!

[ben]

The engineer always has to come in clutch

[nathaliesmith]

@ben where did they get that Gif of you??

[ben]

weird, isn’t it?

[EricZ]

Made some key updates today to make this more consistent and useful:

• Pill Sizing - Pills across cards are now 112x38 pixels for consistency

• Standard Card Height - The height is now defined by the number of metrics in the right-hand column, providing better image control when shifting into Figma.

• Font Weights - The title font-weights are not consistent medium sizing across variants.

Bug Fix

• SVG Export - Fixed a bug where the image was not being exported in SVGs.

[nathaliesmith]

Have you been able to see a change in the speed of the output?!

[EricZ]

Timing myself here, it looks like about 10mins of build-out. As I said previously, it was 20-30 minutes, so it’s a 50-66% decrease in build-out time.

[MoData]

@EricZ very cool! appreciate you showing the ‘failed’ experiments too, sounds like this will have a significant impact on the rate of production