Building Cohesion: Scaling the Ultimate Loyalty Reward Platform
CONTEXT
Establishing a Single Source of Truth
As a UX Designer at Loylogic, I had the opportunity to work on Ultimate Reward Store, a leading, fast-growing loyalty rewards platform serving over 10 million users.
This case study explores my contribution to building a comprehensive design system from scratch, creating a shared language between design and engineering to ensure visual consistency, team efficiency, and future scalability across teams and platforms.
Duration: Mar 2023 - Dec 2024
Team: 2 Product Managers, 7 Engineers, 1 Sr. UX Design Consultant, and Me
Responsibility: User Research, Interaction Design, Visual Design, Motion Design, Documentation
Tools Used: Figma, Miro, Jira, Confluence, Hotjar, Microsoft Suite
THE PROBLEM
Product Fragmentation & Unsustainable Scaling
The Ultimate Reward Store was growing rapidly, but the absence of a unified design language made each product and platform evolve independently. This fragmentation directly resulted in inconsistent visual language and fragmented components across the ecosystem.
Without a single source of truth, design and engineering teams were trapped in a cycle of redundancy and technical debt, spending significant time recreating patterns and resolving inconsistencies instead of focusing on innovation. This severely slowed down delivery, complicated handoffs, and fundamentally limited our ability to efficiently scale the product with new features.
THE SOLUTION
A Unified System for Velocity & Cohesion
We delivered a comprehensive, modular design system that now serves as the single, scalable source of truth for the Ultimate Reward Store. Built using the Atomic Design methodology, the system directly addresses product fragmentation, boosting team efficiency and feature stability.
Core Strategic Assets
Component Library: The digital toolkit of 50+ reusable UI elements to eliminate design redundancy.
Style Guide (Foundations): A formalized definition of the core aesthetic properties, such as color palettes, typography, spacing, and iconography, via design tokens to ensure visual consistency.
Content Guide: Guidelines defining the platform's voice, tone, and specific rules for microcopy, e.g., button labels, error messages, and reward descriptions to ensure clear user communication.
Comprehensive Documentation: A central hub housing all rules, principles, usage examples and do's & don'ts to ensure self-service and system maintenance.
RESEARCH & INSIGHTS
Defining the Strategic Imperatives
Goal: Define the Scope of Fragmentation and Prioritize Strategic Needs
The objective of this phase was to move beyond anecdotal problems and clearly define the necessary scope and constraints for a robust, future-proof design system.
Methodology: Strategic Needs Assessment
I conducted research to understand the friction points hindering growth and scalability:
Stakeholder Interviews: I held deep-dive sessions with product managers and engineering leads to map their daily pain points, such as development bottlenecks, slower feature speed, and integration challenges, directly to the need for standardization.
Competitive Analysis: I studied best-in-class loyalty platforms to set a high bar for usability and visual design, ensuring the new system would be modern, intuitive, and competitive.
Architectural Gap Analysis: I identified fundamental missing architectural elements, such as a standardized color scale, typographic hierarchy, and structured spacing rules, based on strategic requirements for supporting multiple campaigns or themes.
Key Insights: Establishing the Core Problem
Speed is Paramount: Stakeholders confirmed that the lack of reusable components meant engineers were consistently slowed down by redundant code creation, delaying critical feature releases. The system needed to prioritize velocity.
Flexibility is Essential: The business strategy required support for flexible theming, e.g., dark mode and branded campaign palettes, which mandated the use of a robust token system.
Consistency is Trust: Visual drift contributed to a fragmented user experience, eroding user trust in the rewarding mechanism.
IDEADTION & PROCESS
Architecting the Foundation
Goal: Establish the Core Visual and Technical Architecture of the System
The objective was to translate the strategic requirements into highly flexible yet strictly governed design variables, establishing the single source of truth for all visual properties.
Methodology: Implementing Design Tokens
The central pillar of our foundation was the implementation of design tokens. We translated the product's visual language into named variables that link design properties directly to their corresponding code values.
Core Foundational Elements
Color System: Defined a robust, semantic color palette, mapping colors based on usage and context, e.g., "color-background-primary" and "color-text-link," rather than aesthetic values. This ensures global brand changes are instant and systematic.
Typography Scale: Established a fixed, limited typographic hierarchy, defining a concise set of styles, heading-1 and functional-body-default, built to be responsive across both web and mobile platforms.
Spacing and Layout: Implemented a consistent 8-point grid system for all padding, margins, and component sizing, creating a predictable visual rhythm and solving layout inconsistencies.
Key Outcome: Enabling System Scalability
By formalizing the foundations with design tokens, we created an abstraction layer. This strategy allows any major global aesthetic change to be executed once at the token level, which is critical for meeting high-speed development needs and and allows the system to evolve without costly, large-scale code refactoring.
DESIGN EXECUTION
Building the System Assets
Goal: Create the Comprehensive, Reusable Component Library and Documentation Framework
This phase focused on the meticulous creation of reusable UI elements, eliminating interface fragmentation by providing a standardized toolkit built directly upon the design tokens.
Methodology: Systematic Component Construction
We built the assets using an approach rooted in modularity and ease of maintenance:
Atomic Structure & Variants: Components were built using the Atomic Design methodology, progressing from the smallest elements, i.e., atoms such as icons and buttons, to complex arrangements, i.e., molecules such as navigation headers and reward cards. Every component was engineered using Figma Variants to handle all functional states, e.g., hover, disabled, active, and property permutations. which drastically cut down on design time and ensured a single component could handle numerous use cases.
Systematic Constraint: Each component, color, spacing, and typography was strictly constrained by the design tokens. This enforced immediate visual consistency and prevented designers from accidentally introducing new, off-brand values, thereby eliminating visual drift and technical debt before it could start.
Platform-Agnostic Design: The components were designed with a focus on their functional behavior and necessary structure, rather than specific platform code. This ensured the resulting library provided a truly unified user experience across both the web and mobile applications.
Key Outcome: A Complete, Actionable Toolkit
The product teams gained access to the full, standardized component library. This asset immediately empowered designers to focus on user flow and problem-solving, rather than the aesthetic details of individual elements, leading to faster prototyping and a higher quality baseline for all new features.
Foundations
Atoms
Molecules
Product guidelines
TESTING & VALIDATION
Ensuring Adoption & Feasibility
Goal: Validate the System's Practical Usability and Measure Its Impact on Team Velocity
This phase ensured the newly built system wasn't just visually coherent, but was also easy for its primary users, designers and developer, to implement and maintain. We treated the design system itself as a product, testing its user experience, validating the entire team's workflow.
Methodology: Targeted Validation & Pilot Programs
Developer Feasibility Test (Handoff Validation): We launched a small pilot feature build using only the new design system. We tracked key metrics, including the design-to-development handoff time and the number of clarifying questions exchanged between teams. This test directly verified the clarity of our design tokens and documentation, proving the system was technically viable and efficient.
Designer Usability Test (Adoption Check): Existing screens were rebuilt by various designers using the new Component Library. This exercise confirmed the library's robustness, revealed any confusing component naming or missing variants, and helped confirm that the new system was intuitive enough to minimize onboarding time for the entire team.
End-User Validation (Impact Check): Although the system is an internal tool, its success is measured by the end-user experience. We conducted qualitative reviews, and supported A/B tests on key features to ensure the new, standardized components resulted in a measurable decrease in user hesitation and better conversion rates, confirming that visual cohesion directly improved user confidence.
Key Outcome: A Trusted, Stable Asset
The validation process provided crucial data that allowed for necessary final refinements before the system's official rollout. By proving the system's efficiency gains and documenting the clarity of the handoff process, the system successfully transitioned from a design project into a trusted, stable foundational asset that the entire product organization could rely on.
FINAL OUTCOME & IMPACT
Quantifying Cohesion & Velocity Gains
The implementation of the new design system for the Ultimate Reward Store successfully solved the critical problems of fragmentation and inefficiency. By establishing a unified design and engineering language, the project delivered immediate, measurable benefits for both the internal teams and the user experience.
UI Consistency
40%
Handoff Efficiency
30%
Prototyping Speed
3x
Technical Debt
Significantly Reduced
The Ultimate Design System successfully transitioned the product development team from a state of reactive fragmentation to one of proactive, scalable efficiency, setting a foundation for sustainable growth for the 10 million-plus user base.
REFLECTION & LEARNINGS
Learnings on Organizational Change & System Governance
This project was fundamentally an organizational change management project, not just a visual challenge.
Collaboration is the True Scaling Factor: The most critical success factor was the early, continuous involvement of engineering leads. It ensured that the design tokens and component architecture were technically feasible and optimized for code implementation.
Documentation is Governance: Clear Do's and Don'ts and formalized contribution guidelines created a governance model that now empowers team members to use the system independently, preventing system drift and reducing the burden on core contributors.
A System is a Living Product: The work does not end at launch. The design system must be treated as a product itself, constantly requiring maintenance, feedback, and iterative updates. The focus must now shift to listening to the users of the system (the internal product teams) and evolving the components and documentation to meet their changing needs.
