FIGURE CREATION TOOL • MASTERYPREP
What if designers only had to do half the job?
An in-house graphing tool: content developers own the data, design owns the style.
Overview
I saw that our figure process couldn't keep up with AI-speed content. Leadership and I both wanted an in-house graphing tool, so I built it and shipped it into the authoring platform. Content developers now plot and export their own figures as SVGs, and design gets them already accurate, so we spend our time on style, not rebuilding data. I built it with Claude Code and keep shipping it as a contributing engineer on the repo.
IMPACT
Cut figure time by two-thirds
math & science figures, tracked in our KPI sheet
TIMELINE
8 weeks to deploy
MasteryPrep
USERS
8 content developers
who asked for the tool
ROLE
Sole designer & builder
prototyped and shipped in code
The Challenge
Two jobs on every figure.
Students learn to read graphs from the figures we put in front of them. That's why our figures had to be exact twice: the data, because it's math, and the style, because every state and product has its own rules. Students should practice on the same kind of figure they'll see on the real test.
So designers did both jobs, by hand, on every math and science figure. When AI sped up content development, figure requests went up and design became the bottleneck. AI couldn't do either job well enough to trust. How might we take the data job off the designer's plate, so design can focus on making figures students can read?
Approach
I scoped the work around real figures, not hypotheticals. I built the first version against a real set of biology figures, so every setting came from something I'd had to redo by hand: axis increments, stroke and tick styles, point shapes, rotated axis titles. Here's how the work was scoped.
01 Discovery
I noticed the problem while designing an asset in Illustrator. I was spending more time building the graph than designing the figure. Our design KPI sheet confirmed it: it tracked how long every figure request and design task took, and it showed how much of our time figure requests were eating.
What design receives. A data table and a reference chart for each series.
Pasted into Illustrator, no edits. "Day" plots as its own line, the axis shows six decimal places, and every series turns gray.
What I heard from content developers
None of these were big asks. They were small changes stuck in a design queue. I wanted to give content developers control of the small stuff while keeping design’s standards built in. Quotes paraphrased from messages and conversations with content developers.
“Sorry to bother you, but can you change one data point?”
Small edits felt like a burden, because they knew how long figures take.
“I wish I knew what was accessible and what wasn’t.”
They wanted to be on the same page as design without needing a meeting.
“Can you make this point a triangle and that one a square?”
Precise requests had to go through design one at a time.
“Can you change the y-axis to count by 10s?”
Even a one-number change to the scale meant waiting on design.
02 Rule Out
I mapped every option on two axes: how much design impact it had, and how much effort each figure would still take. AI generation was fastest on paper, but it couldn't get the math or the state styles right reliably, so every figure would still need a full check. The in-house graphing tool was the only option that split the two jobs cleanly: content developers own the data, and design owns the style. It also won the business case. Our instructional data was living inside third-party tools, and leadership wanted that dependency gone.
03 Build
I built a live, interactive prototype in a playground repo for the figure creation tool. Testing it on real data let me make sure the math read accurately. A live prototype also gave leadership an early look at what the tool could do. Here's what I built, and the choices that made it work.
22 figure types
Every content developer works across different kinds of figures, so the tool had to cover the ones we actually make. I audited our image asset hub and built in the figure types design had already created in Illustrator.
The audit also showed where handoffs broke down, so I set clear rules for what content developers call out before a figure goes to design.
Every figure exports as an SVG, so design can open it in Illustrator and restyle the vectors. The trade-off: figures don’t leave the tool publish-ready. Every state and product has its own style rules, so I kept the export editable instead of locking in a finished PNG. Building our style into the tool is how I’m closing that gap.
Design got its autonomy back, and content developers got control over how their work reaches us. The data arrives exactly as they entered it, with nothing lost in the handoff.
Data in, figure out
Why reinvent the wheel? Content developers already keep their data in CSVs and spreadsheets, so I built the tool around that. Every figure that takes data can import a CSV or take a paste straight from Excel or Sheets.
That gave content developers full control of their data inside the platform, and room to play with data points and see the finished figure before it ever reached design.
It also gave them organization they never had. Each figure keeps its own data, so they can reopen it, tweak it and pick up where they left off.
Design can adjust it too, without asking for the data again.
04 Accessibility
A figure only works if every student can read it, so accessibility is a major part of the design, not a final check. Our goal is WCAG 2.2 AA. These are the four standards every figure meets before it ships.
Not color-only
Hatch, fill and outlines,
so data reads without color. WCAG 1.4.1, 1.4.11
Readable text
One size for every label,
4.5:1 contrast, spell-checked. WCAG 1.4.3, 1.4.5
One labeled image
SVG with a title and description,
read aloud as one image.
WCAG 1.1.1, 4.1.2
Alt text first
Written from the finished figure,
required before publish.
WCAG 1.1.1
05 Shipped
I shipped this tool to cut the time designers spend on data-heavy math and science figures, so we can put that time into other design initiatives. It's live in the authoring platform and still growing, with fixes coming in as tickets from the content developers who use it.
Figure time cut by two-thirds.
Tracked in our design team's KPI sheet, the average figure went from about 1 hr 20 min to under 30 min.
Design is back to designing
✓
No more rebuilding data by hand in Illustrator. Figures show up plotted and accurate, so design spends its time on style.
Shaped by the people who use it
✓
8 content developers use it in the authoring platform. Their tickets decide what gets fixed next.
06 Systems
Shipping the tool did more than speed up figures. It gave me leads. Our authoring platform already powers strong products, and this one project showed where shared standards could make it even easier to build on: naming conventions so figures are easy to find, standardized templates and style rules our tools build from, and WCAG guidelines built in from the start.
When the recipe is bottled and every ingredient makes sense, everyone can build toward it. The roadmap below shows where those leads have taken the work so far, and where they go next.
Reflection
When AI entered our workflow, designers and content developers all wondered what it meant for our work. Nobody wanted to fall behind, so we practiced with it to keep up. AI does take on part of our jobs, the heavy lifting, and it makes us faster. But this project showed me it isn’t the answer to every problem. It couldn’t get our math or our styles right, and it keeps raising how much we produce.
So I built a tool that takes the heavy lifting without taking the judgment: content developers own the data, and design owns the style. Human design principles matter more now, not less. AI is still learning how each organization works, so my job is to keep our standards built in as the tools get faster.