Integrated Systems
Collaborating with PM and Eng stakeholders to integrate the same headless CMS into both Figma and front end workflows during a deliverables-based fixed engagement.
Overview
Puzzle is an accounting software, designed for tracking with ambitious founders. Its competitors are QBP/NetSuite.

Innovations in using AI in various ways, preparing financial docs for taxes and meetings, and doing both Cash and Accrual Basis accounting simultaneously set Puzzle apart from the incumbents.

To fill a gap, they brought me in on a fixed engagement to help build core accounting product deliverables and define new patterns to be deployed across the product.
"You have been an amazing asset to the team over the past month and we are all impressed with not only your design capabilities, but also your drive and eagerness to learn."
Marissa Mata, Recruiting Lead at Puzzle
The problem
The design, deploy, and iterate experimentation workflow was slowed by needing copy changes. Loathe to design with Lorem Ipsum, designers want to use real copy, then developers need to implement something, and then marketing, product, and content folks need to jam on finalized text, and then dev folks need to iterate on it... there’s a lot of lag time that could be design out of the system.
The solution
One of the core accounting PMs, Eitan, kicked off an initiative to build out a headless CMS that would allow finalized and experimental content to live in one place, then flow through to both Figma and the custom front end code, saving everyone time and freeing up resources to devote to build quality and ux.
"You have been so clutch."
Eitan Itzkowitz, Group Product Manager at Puzzle
My part to play
My primary reason for being at Puzzle was to help design new patterns and features. I worked on a configurable help text pattern to be deployed across the core product, interaction and UI patterns for an new settings capability rollout, and a core accounting feature around treasury account reconciliation workflows.
A screenshot from Figma shows three sections containing different Help Text deliverables: a dev-ready interactable component, a dev-ready flat view with every component configuration (link, no link, expanded, collapsed, etc) for three levels of urgency, and a view of the component with margin notes describing how to use it and the rationale behind each part of the design pattern.
This is a screenshot of one of my component deliverables. I included a section with the interactable component, a section with all of the interaction states on view, and a notated version showing design rationale. The intention here is to show the scope of the deliverable, not a readable screengrab of text.
In addition to all of that, I helped Eitan integrate a headless CMS system. On that initiative, I designed v1 content models to fulfill Figma design needs, worked with a Senior Software Engineer, Brendan, to integrate frontend needs into v2+ content models, injected content style guidelines into the CMS documentation, tested different Figma flowthrough plugins, and created training materials.
A screengrab of a Slack message from Eitan that says, "This is going to be so useful."
Eitan was (rightfully) excited about the new system.
Content model overview
The headless CMS platform I was provided with was Contentful. In Contentful, you can set up a content model, then many instances (they call them content entries) of that content model for different uses.


For example, I made a content model for Help Text and three sample independent instances to illustrate how the content can change with the click of a button.
This Figma screenshot shows the RealContent plugin with three available content entries for the Help Text content model.
Changing content entries is easy with the RealContent plugin. Here, we see three sample entries for a linked content model.
Building v1
Since I’d built the Help Text component, I was very familiar with the intention behind each of its parts.
Margin notes on an early version of the Help Text component illustrate the way we thought about the purpose of each part of it.
In designing the Help Text component, we thought about the purpose for each part of it.
But I won’t be the only one ever to create content entries.

To preserve the integrity of the component down the line, I designed the content entry creation experience to help them understand the intent behind each part.
A text input field is labeled English (United States). 0/256 characters. The help text below the field reads: "Primary buttons are usually an affirmative, echoing the verb used in the header."
One example of an entry field for the Help Text content model. By describing what the Primary button's text is for, it will be easier to nudge content editors later on toward consistent tone and intent.
I created fields for every part of the Help Text component, including buttons and links.
Building v2
Once I had the content model complete for the Figma flowthrough, one of our Senior Software Engineers got involved. His code could use additional fields in the content entry to streamline the build process even further.
A screenshot of a Slack interaction: Brendan: @Max Blum is the intent of the icon button for the icon to always be a gear icon? Or is the gear icon a placeholder for a larger list of icons? Max Blum: Gear's a placeholder Thumbs up react. Max Blum: a good default though, since the icon button will often link to a settings page Thumbs up react
We videochatted and defined/refined things a-synch on Slack.
Together we added things that would affect the frontend behavior, like urgency and whether the paragraph text can expand, link URL, and more. It was a collaborative process where we were both able to push back, compromise, and define what we needed.
The content model for Help Text includes urgency level, header text, paragraph text, external link text, external link URL, expandable paragraph text? (a boolean), button 1, 2, and 3, collapsed label, and expanded label.
The list expanded beyond just the parts of the component to include some dev-specific entries than can fuel code choices.
By using Slack to provide a-synch status reports, we could free up the PM for decision-making and roadmapping. I made sure to keep Eitan updated as the project moved forward.
A screenshot from a mid-process Slack message updates Eitan on changes and how they work. It reads: Contentful updates for HelpText: External Link URL field, Expandable subheader boolean, Header text. Would you like to XYZ? == content entry where expands = false, Urgency dropdown (xyz=default(grey), Enlightenment = high (yellow), Text = urgent (red))
Along the way, I provided updates on both new features and how to use them. Some of these bullet points reference previous conversations we had, which allows for more shorthand than I'd use for official documentation.
Training material
I tried two different plugins to import content to Figma. I emailed with the developer of the first and helped him make a few key changes, but I ultimately found a different plugin called RealContent. To speed up the learning process, I created a how-to video so that designers after me could get up to speed faster and integrate Contentful and RealContent into their workflows.

One fun part, for me, was velocity. On the morning I found RealContent, I got a license key purchased, integrated it with our content models, and created the training video before lunchtime.
A screenshot from Slack: Eitan: WOAH This is amazing How did you figure this out so quick
Reactions like this make my day because I know I've helped provided value at velocity.
You can check out the training video below. It's simple, but gets the job done.
Wrap up
The deliverables-based fixed engagement with Puzzle was a great time. The team was super organized, high performing, flexible, and high velocity. I'm glad I was able to hop in, learn a ton about accounting really quickly, and make an impact by crafting features they needed designed quickly.

I also really enjoy building and tuning systems, so it was a joy to build the headless CMS content models in Contentful, figure out how to flow them through to the Figma files using RealContent, and work with Brendan to tune the content models for his frontend needs.

And it was nice knowing designers and devs can save build time and give product, marketing, and content teams peace of mind that there's a single source of truth for content. Wins all around!

To get started with Puzzle, visit them on the web at puzzle.io
This is a decorative blue and purple squiggle.