Heuristic analysis FigJam widget

Summary

I built a FigJam widget to help Paylocity's UX designers and researchers conduct heuristic audits of user flows in a structured way. The widget is used to facilitate collaboration in workshops and collate data from evals so it can be processed.

Skills

90% me, 10% Cursor

Year

2025

Summary

I built a FigJam widget to help Paylocity's UX team run heuristic evaluations on user flows using our internal UI principles and pitfalls framework. The widget helps teams collaborate in workshops and gather feedback in a way that's easy to process later.

What the widget does

The widget works like a smart sticky note. Workshop participants can use it to mark up screens and flows based on how they measure up to Paylocity's UI principles and pitfalls framework. Users pick the right pitfall, add their thoughts, suggest a fix, and rate how bad the issue is.

When the team finishes their review, the widget can gather all feedback from across the FigJam board and sum it up for use in FigJam or for export to CSV.

Design details

Step-by-step workflow

The widget guides users through three clear steps: first they pick a principle, then they choose a specific pitfall, and finally they add their notes. I tucked away extra info about each principle and pitfall behind tooltips since this becomes less needed as users get to know the framework.

Step 1 of the heuristic widget showing principle selection — Step 1: Users select which design principle the issue relates to.

Step 2 of the heuristic widget showing pitfall selection — Step 2: Users select the specific pitfall they're seeing.

Adding context

In step three, users can describe the issue, suggest a fix, and rank how big a problem it is.

Step 3 of the heuristic widget showing context and rating — Step 3: Users add context about the issue, suggest a fix, and rate how bad it is.

The collapsed heuristic widget — The widget can also be collapsed to save space on screens with lots of issues.

Version 2 features

In the second version, I added key features that made the widget much more useful.

Page-wide summary view

The widget can switch to a summary mode that scans the whole FigJam board for other instances of itself and groups all their data. Users can filter this view to focus on just the worst issues.

The widget in summary mode — The widget can generate an aggregated summary of all the data on the page.

Auto-generated tables

The widget can build a FigJam table that lists all the feedback in one place. This is handy because tables can show all the notes and details that won't fit in the widget itself. I made sure the widget respects FigJam section containers—if widgets are inside sections, they'll be grouped that way in the table too, letting teams sort feedback by user flow or any other grouping.

The table can be exported to CSV using FigJam's built-in tools.

The FigJam table that the widget generates — The widget can generate a table with a summary of all the data on the page.

The widget in action

Paylocity's recruiting product team put the widget to work in a real UI review workshop. Here are some shots from their session:

Conclusion

This widget has changed how Paylocity teams review designs. What used to take hours of messy sticky notes and lost feedback now happens in a smooth, structured way. Teams finish reviews faster and, more importantly, actually use the feedback to make products better.

Building it taught me a lot about the FigJam plugin API and its limits. I had to find clever ways to handle data between widget instances and get them to "talk" to each other. But seeing teams adopt the tool so quickly and use it in ways I hadn't even thought of has been the best reward and sparked ideas for new features I'm excited to build next.

Previous project Next project