How this was built
What this project was built to prove, which decisions were mine and where AI sped up production, how that maps to the role, and what I’d do differently with a real client.
What this was built to prove
I built Birchway because the job I’m applying for is mostly invisible when it’s done well. Taking an approved creative and making it run correctly everywhere, on time, with nothing off-brand or off-spec, doesn’t show up in a portfolio of finished ads. So I made the production the deliverable: the spec sheet, the checklist, the file system and the board, with the creative as the thing they act on.
The split, plainly. The decisions a production role is judged on were mine: what each format needs, which specs apply, what the QA checklist tests, and how files are named, filed and tracked. I researched in Canva, refined vectors in Illustrator and prototyped layout and motion in Figma. Claude Design generated concept routes from my direction, and Claude Code did the production build from my specs: it rendered the creatives as code, packaged the HTML5 banner and built this site. None of it was hand-built frame by frame, and the animated banner is a hand-off HTML package standing in for an Adobe Animate export, not an Animate file.
The decision I’d defend is asking for a QA checklist that measures rather than asserts. It would have been easy to fill a checklist with green ticks. Instead it reads the rendered creative back from the page: canvas size, how far the logo sits from each edge, the colours actually drawn, and contrast computed with the WCAG formula. The seeded first draft fails on its own evidence, with the logo 4 px from the edge and the CTA at 1.78:1, and the same checks pass v2. Eyeballed, that CTA might have gone through: cream type on Pear Gold looks warm and readable until you measure it.
My work
- Creative direction
- What the campaign says, how each size crops the artwork, and what changes per platform: no button on DOOH, a one-line headline on the leaderboard. Every AI output was accepted or sent back against this.
- Spec research
- Real IAB display units, the 150 KB display weight limit, the 30 second and 3 loop animation caps, Meta’s 250 px Story safe zones, and a 5% title-safe margin for screens.
- QA criteria
- Which checks exist, their thresholds (clearspace at half the mark height, 4.5:1 for CTA text), which ones block sign-off, and the requirement to show measured values instead of ticks.
- Asset management
- The folder structure, the six-segment naming convention and the versioning rules that keep a superseded file from being trafficked.
- Workflow and prioritisation
- The board stages, the review work-in-progress limit, the priority order and the seven-step process from brief to delivery.
- Design tool work
- Research and size presets in Canva, vector refinement in Illustrator, and layout and motion prototyping in Figma. Details in the tools list.
- Review and sign-off
- Reviewing each output against the brief before it shipped and sending it back when it missed, including the brand direction B file, a menu bug and a round of creative revisions.
Where AI did the work
Claude Design produced concept routes and the brand direction B file. Claude Code produced the code: the adapted layouts, the HTML5 banner package, the QA measurement logic, the corrections to direction B and this site. Both worked from my direction, specs and criteria, and nothing went live without my review.
The strategy and copy and search chapters were drafted with Claude Code from the brief and checked against it. Their research is a plan with the tools that would run it, not completed research, and their forecast uses placeholder rates, both labelled where they appear.
The role, mapped to this project
Each responsibility and key qualification in a Creative Production Specialist posting, where it shows in this case study, and my part in it.
| Responsibility | Where it shows | My part |
|---|---|---|
| Creative reviews | Brand direction B | Set the rules incoming files are judged against (safe zones, minimum type size, contrast, colour roles) and decided which corrections to accept. |
| Design builds | Adaptation gallery | Defined what changes per size and platform, from crop and headline breaks to dropping the CTA on DOOH, and directed the v1 to v2 revision. |
| Digital asset management | Asset management | Designed the folder structure, naming convention and versioning rules. |
| Workload management | Workload board | Set the stages, priorities, due dates and the review limit, and made the prioritisation call for the week. |
| Quality control and timely delivery | Creative QA | Wrote the checklist criteria and pass thresholds, and framed the brief around a deadline window with revision rounds. |
| Collaboration and execution | Process flow | Mapped who owns each step from account brief to platform delivery, and where stakeholder feedback lands. |
| Adobe Creative Suite and Figma | Tools list | Illustrator for vector refinement, Figma for layout and motion prototyping. |
| HTML, CSS, JavaScript and Adobe Animate | Animated HTML5 banner | Specified the animation beats and the IAB weight and loop limits. The hand-off package itself was coded with Claude Code. |
| Accessibility and image optimisation | Creative QA and the contrast table | Set WCAG 2.1 AA with measured contrast as the bar, and the 150 KB display weight limit. |
| Project management tools (JIRA) | Workload board | Modelled the board on issue-tracker workflow: stages, priorities, due dates and a work-in-progress limit. |
Contrast on this site, measured
Every text and background pairing the site uses, in both the light and dark themes, computed when this page loads. The same list runs as a build script (npm run audit:contrast) that fails if any pair drops below AA.
| Pairing | Light | Dark | Needs | Result |
|---|---|---|---|---|
| Body text on paper | 14.13:1 | 14.97:1 | 4.5:1 | Pass |
| Body text on card | 16.38:1 | 13.67:1 | 4.5:1 | Pass |
| Secondary text on paper | 6.71:1 | 8.22:1 | 4.5:1 | Pass |
| Secondary text on card | 7.78:1 | 7.51:1 | 4.5:1 | Pass |
| Secondary text on wash | 6.15:1 | 6.75:1 | 4.5:1 | Pass |
| Links and accents on paper | 8.79:1 | 9.57:1 | 4.5:1 | Pass |
| Links and accents on card | 10.20:1 | 8.74:1 | 4.5:1 | Pass |
| Spec labels on paper | 5.63:1 | 8.95:1 | 4.5:1 | Pass |
| Spec labels on card | 6.53:1 | 8.17:1 | 4.5:1 | Pass |
| Primary button label | 8.97:1 | 9.29:1 | 4.5:1 | Pass |
| Primary button, hover | 11.19:1 | 11.31:1 | 4.5:1 | Pass |
| Urgent and flag text on card | 7.82:1 | 7.26:1 | 4.5:1 | Pass |
| Pass badge | 7.49:1 | 8.56:1 | 4.5:1 | Pass |
| Fail badge | 7.33:1 | 9.29:1 | 4.5:1 | Pass |
| Failed check row text | 7.18:1 | 8.01:1 | 4.5:1 | Pass |
| Placeholder badge | 7.41:1 | 9.42:1 | 4.5:1 | Pass |
| Footer headings | 9.05:1 | 9.05:1 | 4.5:1 | Pass |
| Footer links and statement | 11.19:1 | 11.19:1 | 4.5:1 | Pass |
| Footer secondary text | 7.12:1 | 7.12:1 | 4.5:1 | Pass |
| Focus ring on paper | 5.63:1 | 8.95:1 | 3:1 (UI) | Pass |
| Focus ring on card | 6.53:1 | 8.17:1 | 3:1 (UI) | Pass |
| Focus ring in menu and footer | 9.05:1 | 9.05:1 | 3:1 (UI) | Pass |
| Form control border on card | 7.78:1 | 7.51:1 | 3:1 (UI) | Pass |
Birchway Market is a fictional brand, and every figure here is illustrative unless it says it was measured. No client names, retailer branding, logos or trademarks appear in this project.