GRAIN GROUP
Overview
Grain Group is a New York digital agency. They handle marketing strategy, digital media, analytics, CRM, and e-commerce storefronts. Clients range from CPG brands to luxury and wellness companies. The site had to showcase all those services plus a wall of client case studies without feeling like a firehose. Hard part: each service has its own copy and specs, each case study has different KPIs. The design had to work for all of them.
Problem
Four service buckets. Each with different messaging, deliverables, and technical requirements. They all needed clean, scannable pages. Then the client work — each campaign measures success differently. One case study might have a single KPI. Another might have five. Same template had to hold both.
Content team was still writing while I was designing. Waiting for final copy wasn’t an option.
Process
Grain already had a strong brand system. No need to build a full UI kit. I focused on the structure. Started with grayscale wireframes for the homepage. Tried a few layout directions. Gave the team something to react to fast without getting into visual polish. Once the direction stuck, I moved to high-fidelity. Content team shared outlines of each section before copy was final. That let me design the framework while they wrote. We ran in parallel instead of waiting on each other.
Solution
The capability pages share the same skeleton — overview, what we deliver, how we work. But the actual content is different for each service. Shopify page talks storefront optimization. Programmatic & CTV page talks omnichannel strategy and premium TV buying. The trick was making sections modular so they snap together regardless of what goes inside them. Cards were the workhorse — they stretch or shrink based on content volume.
The case study pages were the trickiest part. Some clients measure ROAS. Some measure CPL, view-through rates, or revenue growth. I built a KPI card system that handles 1 to 5 metrics in a responsive grid. One KPI anchors the space. Five KPIs distribute evenly. The layout holds either way.
While the high-fidelity mockups were being reviewed, I built animation prototypes in Figma to show micro-interactions and page transitions. That doubled as spec for the dev team. Assets were prepped and organized before they started building.
I also directed the hero motion graphic. The original was a static slide from a PowerPoint deck. I rebuilt the assets in Affinity so the animator had clean, layered files to work with. Then we dialed in the timing and motion together.
Results
Hard numbers live with Grain’s analytics team, but the design side delivered:
- A modular component library. Content editors can reconfigure pages without calling a designer.
- A case study layout that works with 1 KPI or 5 without breaking.
- A parallel workflow that cut timeline compared to doing design and content sequentially.
- A Figma prototype that became the single reference point for dev handoff.
Learnings
Starting wireframes while content was still being written kept momentum going. Not rebuilding the brand from scratch meant I could focus energy where it actually mattered. Cards were the right call for wildly varying content. If I did it again, I’d audit the content extremes earlier. If I’d known the shortest and longest pages up front, I would have saved some iteration on the capability templates. I’d also start the animation prototype sooner — developers could have used that extra lead time.
Overview
TB12 sells supplements. Grain Group handles their email marketing. My job was designing the monthly email batch — around 15 emails each month — and turning them into Klaviyo templates ready to send.
Problem
Fifteen emails a month. Each one had to feel fresh while still reading as TB12. Same brand, different treatments — otherwise subscribers tune out. On top of that, I pulled hero sections from the emails and adapted them for social media posts. The templating had its own headaches. Klaviyo’s drag-and-drop builder covers a lot, but when it didn’t, I had to hand-code custom HTML templates.
Process
Worked in Figma alongside Grain’s design team. We’d plan the month’s batch together, then I’d design and build each email. The HTML and CSS I already knew from front-end work came in clutch for the custom templates — Klaviyo’s builder has limits, and knowing how to work around them made the difference between a template that works and one that breaks in some email client. I also handled the SMS side through Attentive. First time using an SMS CRM platform. Same TB12 messaging, tighter format.
Solution
Delivered a monthly batch of 15 Klaviyo-ready email templates. Each month’s set had its own visual treatment so the brand felt alive, not templated. When Klaviyo’s builder couldn’t handle the layout we needed, I coded it by hand. The email hero sections doubled as social media assets. One design, two channels.
Results
Consistent monthly output. TB12’s email program kept running on schedule without the brand going stale. The SMS channel was new for me — walked away knowing Attentive and how SMS marketing fits into the broader CRM picture.
Learnings
This project taught me how email marketing actually works — not just the design side, but the flows, the templating, the platform quirks. Klaviyo’s drag-and-drop is fine until it isn’t, and knowing HTML/CSS meant I never hit a wall I couldn’t get past. The SMS piece was a bonus — always good to walk out of a project with a new platform under your belt.