Raffle Landing Page Design System
We were faced with the scalability issue: all client campaigns relied on just two hardcoded templates. Every time production needed changes, developers had to step in, which caused delays and friction. At the same time, clients were asking for more customization, pushing the production team to be more flexible, while the product team needed a faster way to launch campaigns.
Ascend’s raffle campaigns relied on two hardcoded landing-page templates, which made every client customization slow and dependent on engineering. At the same time, clients wanted more flexibility, production needed faster launches, and the product team needed a system that could scale beyond one-off campaign requests. I worked with production and engineering to design a modular, token-based landing-page system using reusable, themeable blocks aligned with ShadCN and Tailwind. The new system gave production more control to assemble and customize campaigns without breaking design consistency, reducing setup time from nearly two weeks to a single day while freeing engineers to focus on system-level improvements instead of one-off page changes.
This landing page showcases both the system and design work I created.
We started designing a modular landing page system, built in reusable blocks, that gave the production team more control while 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 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 production team 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.