Redefining user engagement with a scalable design system, delivering +21.2% conversion rates and -15% bounce rates, while enhancing brand consistency and campaign efficiency.
Principal Designer - Established and implemented the company-wide design system and Developed CRO Landing Page
Dinesh Kumar, Project Manager
Catherine Nguyen, Engineer
Design system, 2 Months
CRO Landing Page, Ongoing
Without a unified design system, landing pages lacked visual harmony, leading to a fragmented user experience and diluted brand identity. Each design effort started from scratch, resulting in mismatched components and inconsistent aesthetics. Above all, establishing a design system was a chance to create a cohesive visual language that reflected the brand’s essence while streamlining the design process.
01.Before & After: Comparison of old vs. new landing page designs.
Outdated design hindered user engagement and conversion
The original landing page lacked visual consistency and struggled to engage users effectively. Without a design system in place, every page was created from scratch, resulting in inefficiencies, inconsistent branding, and poor user experience. Key issues included:
At our company, landing pages are tailored to meet the specific demands of different channels, user needs, and user journeys. When evaluating the performance and design of a landing page targeted at affiliates, PPC campaigns, and digital media, it is essential to analyze how effectively they address the unique goals and behaviors of each audience.
By focusing on these distinct angles, we ensure that every landing page is optimized for engagement, conversion, and user satisfaction across all channels.
01.Landing Page User Journey Map
For the affiliate CRO landing page, the design focused on delivering clear messaging while driving user action. Key messages and CTAs were prioritized visually to ensure maximum engagement. The design system was leveraged to create scalable components, ensuring brand consistency and adaptability across multiple devices.
While simplicity remained at the core, the use of bold visuals (e.g., the Monopoly theme) added a sense of fun and excitement, enhancing user engagement without compromising usability. These elements allowed the page to perform effectively across desktop, tablet, and mobile platforms.
01.Affiliate Page: Monopoly Casino landing page for affiliates
Key Messaging Clarity: Headlines and CTAs are prominent, driving user focus.
Above-the-Fold Optimization: Critical content is visible without scrolling.
Dependency on Visuals: Heavy reliance on game assets may distract some users.
02.Digital Media Page: Virgin Games landing page for digital channels.
Jackpot Highlight: Prominent placement of jackpot numbers grabs attention and builds excitement.
Mini-Reg Form: Compact, above-the-fold registration form simplifies the conversion process.
Animation Dependency: Overuse of animations may slow load times for users with poor internet connections.
01.Design System in Figma: Figma and code implementation examples.
The Challenge
The original process of creating landing pages was inefficient and inconsistent, as each project required components to be built from scratch. Without a centralized design system, key problems included redundant work, inconsistent styling, and lack of scalability. Addressing these challenges required:
Recreating Old Components: Redundant efforts were needed to design and implement components repeatedly for different projects.
Standardizing Use Cases: There was no clear framework for reusability, leading to confusion and inefficiencies in aligning designs with functionality.
For the landing page design system, accessibility was a core priority to ensure compliance with WCAG standards and deliver an inclusive user experience. By integrating accessibility tools and guidelines directly into the design system, each component was optimized for usability and visibility across all user groups.
02Accessibility Training: Internal video on accessibility practices.
Key Elements in Accessibility Optimization
The accessibility optimization focuses on ensuring a seamless user experience by incorporating WCAG-compliant contrast ratios, clear typography hierarchy, and responsive components. These elements work together to enhance readability, usability, and inclusivity across all devices and user groups.
Contrast Ratios:Tested foreground and background combinations with tools like Stark to achieve WCAG AA/AAA compliance for normal and large text.
Typography: Organized headings create a clear information hierarchy, guiding users visually and programmatically for assistive technologies.
03.Contrast & Typography: Improvements in contrast and heading hierarchy.
04.Spacing & Color: Accessibility adjustments for spacing and colors.
Looking towards the future
Building on the progress made with the design system and landing page optimization, the next steps focus on further enhancing usability, scalability, and accessibility to align with evolving user needs. Key areas of improvement include:
• Expand the design system to include more versatile components for varied campaigns.
• Optimize for multilingual support to cater to diverse user bases.
• Small fonts and cluttered layouts made reading difficult
• Long scrolling and excessive text reduced usability.
• Enhance page speed and loading times to improve user retention.
• Implement interactive elements like animations without sacrificing performance.
• Introduce iterative usability testing for all new design components.
• Gather feedback to refine components based on real-world user behavior.
