UX Team Lead

A theme layer for Matrix 360 PDF reports

The challenge

Matrix 360 exports reports as PDFs. The export uses jsPDF to snapshot what is in the DOM, so it all happens on the front end. The development team built it quickly with AI help, but with no guard rails.

My job was to review the approach and add a theme layer. Reports needed to follow agreed conventions, not whatever the code produced.

Process

I reviewed the approach with the development team. Then I applied the Storybook component principle to report generation: define it once, then reuse it everywhere.

I added a theme layer. It holds the conventions for the header and logo, the title block, tables, score bars, star rating badge and footer. Reports now pull from the theme instead of styling each part on its own.

I documented the conventions in Confluence. They are also enforced by a skill and by the theme code, so the rules live in both the docs and the code.

I tested the theme on three reports: the change summary, the feature comparison and the product feature breakdown. The gallery shows the feature comparison and the product feature breakdown, before and after.

I also made it possible to demo a sample export from inside Storybook, before the development team gets involved.

Gallery

Results

Reports now follow one set of conventions. The before and after samples share the same header, logo, tables, score display and footer. We can show a sample export from Storybook before asking the development team to build with their code.

Key learnings

A small but mighty consistency win. AI sped up the build, but guard rails kept the result consistent. Writing the conventions down, and enforcing them in the theme and the skill, did that.

Role

UX Team Lead