Raffle Landing Page Design System
We were faced with the scalability issue: all client campaigns relied on just two hardcoded templates. Every time marketing needed changes, developers had to step in, which caused delays and friction. At the same time, clients were asking for more customization, pushing the marketing team to be more flexible, while the product team needed a faster way to launch campaigns.
See the full case studyThis landing page showcases both the system and design work I created.
We start to design a modular landing page system, built in reusable blocks, that gave marketing and production teams more control and also making development easier to maintain and scale.
Approach
The first step was to review old landing pages to identify any common trends and to gather insight into which layouts performed the best. Close collaboration with marketing and production was necessary to understand what kind of content is most often requested, what kind of content the clients are using least, and where the content could improve.
From there, I worked with engineering to identify common friction points during the build and align on a shared components system. Developers wanted to use ShadCN and Tailwind so I designed reusable blocks in Figma and set up a token-based system for spacing, colors, and typography to keep everything consistent and align with development. We launched it step by step, testing each block in real campaigns and using feedback to keep improving as we went.
Predefined, themeable blocks
For flexibility and consistency, instead of starting with one of two predefined templates, pages are built using predefined blocks. This gave both production and marketing teams a lot more freedom to mix and match layouts without breaking design rules or needing help from developers. Each component was powered by variables, which made it super easy to tweak colors, spacing, or text styles across campaigns. We included key blocks like Hero, CTA, Price Grid, Extra Prizes, Winners, Image Galleries, Checkout Modules, and more—everything needed to build a full, flexible landing page.
Outcome & Impact
What's Next
Integrate performance analytics into blocks for data-driven A/B testing.
Extend the system with new layout options based on campaign insights.
Document usage and train internal teams for full adoption.