tplogo-white-50px
  • Home
  • About
  • Leadership
  • Contact
  • CV
✕
  • Home
  • About
  • Leadership
  • Contact
  • CV

    RISE: A Unified Design System

    This case study outlines how I secured investment, aligned teams, and launched Rise - a unified design system that supports over 20 brands and 18 products across Web, iOS, and Android.
    • Android
    • iOS
    • Web
    Skip to outcomes

    Overview

    As Head of Product Design, I led the creation of Rise, a unified design system aimed at improving collaboration, reducing inefficiencies, and delivering a cohesive user experience across all touchpoints. This effort was not just about building UI components but about transforming workflows, ensuring design consistency, and embedding a scalable design language that enhanced usability and accessibility. By unifying patterns and interactions across multiple brands and platforms, we aim to create a shared language between design and engineering—giving teams a common foundation to work more efficiently, build faster, and deliver a seamless, intuitive experience for users.

    My Role

    • Strategic Leadership & Vision

    • Securing Investment & Building a Business Case

    • Managing External Partnerships

    • Cross-Functional Orchestration

    • Delivery & Adoption Strategy

    • SLT Management

    Teams

    • Product Design
    • Product
    • Engineering
    • Brand & Creative
    • Marketing
    • Legal

    Year

    2023 - Ongoing

    The Problems

    As NewDay grew, inconsistencies in design and development became more pronounced. More recently, the company was transitioning to a PaaS business model, which introduced the need for a multi-tenancy product portfolio. To support this shift, we required a design system that could scale while maintaining both structure and flexibility. However, without a unified system, each product team built and maintained components differently, leading to challenges such as:

    1. Duplication of work

    Designers unknowingly recreated patterns that already existed elsewhere in the organisation.

    2. Technical inefficiencies

    Engineers spent time maintaining multiple variations of the same or similar components.

    3. QA bottlenecks

    QA teams had to validate multiple versions of the same UI elements, adding to testing complexity.

    4. Slow onboarding for new clients

    Customising the UI for new clients was taking weeks to release and lacked flexibility.

    5. Multi-brand complexity

    The design system needed to cater for 20 brands, ensuring unique branding while maintaining consistency across iOS, Android, and Web.

    6. No structural balance

    The system needed to avoid becoming an unmanageable overhead of bespoke components while still providing flexibility.

    7. Slow client customisations

    Clients needed the ability to re-brand the PaaS solution while maintaining system integrity.

    8. No cohesive UX

    Users faced inconsistent UI elements, interactions, and branding across their credit journey, causing confusion and friction.

    Inconsistencies across the product portfolio
    This snapshot highlights inconsistencies in core UI elements—headers, icons, buttons, and colour usage—across numerous products. With over 20 brands and 18 products in play, the absence of shared standards led to duplicated work, fragmented experiences, and design drift across teams.

    Our Vision & Mission

    To ensure the success of Rise, I worked closely with my team and product, brand, marketing and engineering leaders to assess the current landscape, align on shared objectives, and define a structured approach. Together, we crafted a shared vision and a mission that addressed immediate challenges while setting the foundation for a scalable and adaptable design system.

    The Vision

    A unified design system that enables teams to create seamless, accessible, and high-quality experiences for our users, while maintaining brand flexibility.

    The Mission

    To create a system that’s as collaborative as it is scalable—bridging design and engineering, reducing rework, and giving teams the clarity, structure, and flexibility to ship better products, together.

    Securing Investment

    Prior to RISE, I attempted multiple approaches to establishing a design system internally, but each failed due to competing priorities and resource constraints. Initially, I introduced a 'side-of-desk' approach, where teams worked on the system in their downtime, but this lacked dedicated focus. I then introduced SME champions across product teams to drive consistency, but without clear governance, it failed to gain traction. A dedicated task force was formed just before onboarding a new client, but increasing demands on product teams prevented meaningful progress. Recognising the need for external resource to drive momentum beyond internal constraints, I built a business case to justify investment in working with an external agency, demonstrating the payback period and tangible business and user benefits, focusing on two key areas:

    Cost Savings

    By reducing redundant work, we could save significant design and engineering hours.

    Formula: Cost Savings = Total Time Saved (hours) × Avg. Hourly Rate (£)

    Example Calculation:

    • If the average salary of a designer/engineer is £80,000 and they work 1,600 hours/year, their hourly rate is:

      £80,000 ÷ 1,600 = £50/hour

    • With 1,188 hours saved per quarter:

      1,188 × £50 = £59,400 per quarter

    • Annually, this results in £237,600 in savings.

    Sprint Efficiency

    I also calculated how reducing inefficiencies could improve sprint velocity.

    Formula: Sprints Saved = Total Time Saved (hours) ÷ Sprint Length (hours)

    Example Calculation:

    • If a sprint consists of 80 hours per person and we have 33 people:

      80 × 33 = 2,640 hours per sprint

    • With 1,188 hours saved per quarter:

      1,188 ÷ 2,640 = 0.45 sprints saved per quarter

    • Annually, this translates to 1.8 sprints saved per year, per team.

    Total Organisational Impact

    Using the example calculations above, when scaled, the impact grows significantly.

    Assumptions:

    • 18 product areas
    • 3 squads per area = 54 squads
    • 6 people per squad
    • 1 sprint = 480 hours

    Annual Time Savings:

    • 1.8 sprints × 54 squads = 97.2 sprints
    • 97.2 × 480 = 46,656 hours saved

    Estimated Cost Savings:

    • £50/hour × 46,656 hours = £2.3M annually

    Headcount Equivalence:

    • 46,656 ÷ 1,600 = 29 FTEs worth of time saved

    Discovery

    After a successful business case pitch to the CEO, I had secured investment to engage with an external agency. The agency provided the expertise to conduct research, discovery, perform audits, and define the technical and design requirements necessary for a scalable system foundation.

    I managed the engagement with the external agency, ensuring alignment with our vision and ensuring collaboration with the right people at the right time. 

    During discovery, the aim was to assess the current landscape and identify the foundational elements needed to support a cross-platform design system. Our activities focused on uncovering inefficiencies, aligning tools and processes, and setting the groundwork for delivery. 

    UI Audit

    Held multiple workshops to evaluate existing design inconsistencies, duplicated patterns, and interaction gaps across platforms (Web, iOS, Android). Identify overlapping or divergent UI components, styling, and behaviors. A reduced snapshot of the output above. 

    Tooling Requirements

    We identified and adopted a suite of tools to support our goals —Supernova for documentation and automation, Figma for managing design components, Storybook for coded components, and Token Studio for design token management across brands.

    Exploring Workflows

    We mapped how components were designed, handed off, and implemented across teams, uncovering bottlenecks and inefficiencies along the way. From there, we reimagined a more streamlined, collaborative workflow and mapped it using a new JIRA structure.

    Stakeholder Interviews

    We interviewed product owners, engineers, designers, and brand representatives to uncover workflow inefficiencies, inconsistent patterns, and pain points. These conversations helped surface real-world challenges and informed early priorities for the system. 

    We spend too much time duplicating effort across teams—every squad solves the same problem slightly differently, and it's costing us delivery speed.

    Product Owners

    Every project ends up rebuilding the same components with minor differences. There’s no single source of truth or consistency in how things are built.

    Engineering

    I constantly have to recreate buttons, modals, or icons because I’m not sure if what already exists is correct, up-to-date, or even being used anywhere.

    Product Design

    Our digital experiences don’t reflect our brand consistently. The colours and typography work in print, but they’re not accessible or scalable across digital products.

    Brand & Creative

    UI Framework Exploration

    Web - While the initial expectation was to build bespoke components, we explored the trade-offs and quickly recognised the greater benefits of using an off-the-shelf UI framework. We conducted a comparative analysis of Chakra UI and Tailwind, evaluating scalability, performance, ease of integration, and long-term maintainability. The strong documentation, active communities, and regular updates offered by established frameworks made them a compelling choice. Ultimately, we aligned on Chakra UI as it reduced team overheads and supported faster delivery without compromising quality or flexibility.

    Mobile - To ensure seamless integration with platform-specific guidelines and reduce overhead with mobile, we made the decision to adopt native iOS (Human Interface Guidelines) and Android (Material Design) components where applicable. This decision was informed by early stakeholder interviews and the UI audit, which revealed platform-level inconsistencies and usability challenges that native components could address effectively.

    Strategic Refinement: Preparing for Delivery

    Following the completion of the external agency's work, I started transitioning Rise into its next phase. I began putting in place key initiatives and frameworks to support the shift from discovery to delivery. Having validated the opportunity and early impact of RISE, I secured approval to hire a dedicated product designer to support its continued growth and implementation.

    With an incredibly talented new hire in place (Mike Simpson), we began shaping the delivery strategy into a practical execution plan:

    Phased Rollout Approach

    The rollout of components was to be split into two phases: Dependencies and Feature-based. Dependencies encompassed the core foundational elements that everything else would be built upon. Once these were in place, we could begin to develop fully-fledged features. This structured approach allowed us to align effectively with product teams' roadmaps without disrupting business-as-usual activities.

    Design System Roadmap

    A structured roadmap was created that aligned with the Dependencies and Features plan. This roadmap provided a clear view of what would be delivered, when, and how it aligned with product and engineering roadmaps. It ensured smooth coordination across teams and allowed product managers to anticipate and prepare for upcoming changes.

    JIRA Board & Agile Framework

    I created a new JIRA board and began breaking everything down using the Jobs-To-Be-Done (JTBD) framework. These were translated into EPICs on the board, with each EPIC refined into key stories that would be played in sprints. It was important to treat Rise as a product, adopting agile methodologies, including two-week sprints, a backlog, and weekly ceremonies to track progress and maintain alignment.

    Visual Identity & Branding

    A comprehensive visual identity and branding framework was created to support the system's credibility among product teams. By treating Rise as a standalone product, this strengthened its perceived value, ensuring it was recognised as an essential, long-term investment rather than just another internal initiative.

    Objectives and Key Results (OKRs)

    With a clear understanding of inefficiencies, I established measurable OKRs to guide decision-making as we moved through the phased approach. These objectives ensured our efforts were aligned with business goals and provided a framework to measure success post-launch.

    Building Rise

    With a lengthy backlog and clear roadmap in place, we moved into delivery. This phase focused on operationalising the system—translating our design principles, token structures, and early strategy into tangible outputs. Our goal was to build phase 1 dependency components that would scale reliably across platforms, integrate cleanly into product workflows, and reflect the system's visual and functional standards. What followed was a phase of continuous execution, refinement, and implementation.

    Design Tokens

    A robust set of values that formed the connective tissue between design and engineering. Applied consistently across Web, iOS, and Android, these tokens enabled us to drive visual alignment, support modular design, and adapt effortlessly to brand needs. They made updates easier to manage and helped ensure a cohesive experience—regardless of platform or team.

    Foundational UI Principles

    These were the visual building blocks of Rise. From colour ramp systems and typography to iconography, grid layouts and accessibility, we established a core set of standards that grounded every decision. They weren’t just rules—they were guidance designed to support consistent, inclusive, and flexible design across all platforms.

    Token Naming Convention

    We introduced a structured naming system that made communication between design and engineering seamless. By using a shared, predictable language across disciplines.

    Documentation

    We created clear, accessible guidance within Supernova so anyone—designer, engineer, or product manager—could find what they needed quickly. Our documentation was more than static pages; it was a living resource designed to onboard teams, explain patterns, and encourage best practices.

    Theme Kits

    To support over 20 brands, we developed flexible token sets that could be easily adapted. These theme kits gave teams the ability to apply brand-specific styles without needing to rebuild or rewrite components—speeding up client onboarding and reinforcing consistency.

    Dawn and Dusk Modes

    Rise supported both light and dark themes out of the box, which we branded as Dawn and Dusk. This wasn't just about aesthetics—it ensured accessibility, gave teams flexibility, and reinforced brand experience across different environments.

    Automated Token Pipelines

    To reduce engineering overhead and speed up delivery, we built automated pipelines that pushed token updates directly to GitHub. This meant developers always had access to the latest styles.

    Core Dependency Components

    We began by building the components that everything else would rely on: buttons, dropdowns, icons, and form fields. These weren’t just UI elements—they were the foundation of scalable, maintainable interfaces used by every team.

    Implementation & Promoting Adoption

    To maintain momentum and prevent delays, we adopted an iterative delivery approach—while building new components and updating the token library, we actively pushed these updates into product teams for implementation. This approach allowed us to effectively 'build the car while driving,' ensuring a continuous stream of improvements without disrupting product development.

    To ensure adoption momentum, I drove the implementation of:

    Onboarding Workshops

    Hands-on workshops tailored for designers, engineers, and product managers. These sessions provided practical guidance on integrating Rise into workflows, covered best practices for using design tokens, and introduced strategies for scaling the system across multiple brands. The workshops included interactive exercises, live demonstrations, and Q&A sessions.

    Design System Council

    A cross-functional council consisting of product designers, engineers, and brand representatives was established to advocate for the design system. This group play a pivotal role in driving alignment, governance, gathering feedback, and ensuring system-wide adoption.

    Overcoming Roadblocks

    Establishing a new product is never easy, teams encountered several challenges along the way that required solutions:

    Framework Divisions

    Some engineers preferred Chakra-UI, while others advocated for Tailwind. We addressed these disagreements through discussions, workshops, and POC implementations to determine the best approach for scalability and maintainability. Ultimately after a long list of pro's and cons we agreed on Chakra-UI. 

    Version Control

    Managing updates consistently across Figma, documentation, and code presented a challenge. After a short spike, we decided upon Supernova’s built-in version control for documentation, adopted Figma branching for controlled component updates, and centralised code updates in GitHub, ensuring all product teams pulled the latest design tokens and components from a single source.

    Framework Compatibility

    Some of our web products were built in Angular, while Rise was to be built using Chakra-UI, a React-based framework. Since React does not integrate seamlessly with Angular, we prioritised compatibility by first rolling out Rise to products already using React. We then collaborated with engineering teams to incrementally migrate older Angular-based products to React, implementing the transition page by page to minimise disruption.

    Web Accessibility

    While collaborating with the brand team, it became clear that many brand palettes and assets—particularly across our six internal brands—had been designed primarily for print, leading to issues when translated to digital. We worked together to define accessible digital colour ramps, select web-safe fonts, and craft scalable SVG versions of brand logos to ensure digital readiness.

    Outcomes

    Over the first three months since the initial roll-out in June 2024, we observed significant improvements. With the completion of the roll-out aiming for the end of Q2 2025, these were promising results. 

    43%
    reduction in design related accessibility defects

    16%
    increase in squad sprint velocities

    32%
    adoption of Rise in web & mobile products

    £800k
    in annual efficiency
    savings

    3342
    design tokens meticulously crafted

    20
    brands fully accessible with digital theme kits

    4.7k
    button instances being used across teams

    800+
    component insertions into Figma files

    Additional Benefits:

    Theme Switching in Figma & Code – Designers can now design once and export brand variations instantly and  Engineers can switch between themes seamlessly in code using Storybook.

    Conclusion

    Rise is already changing how NewDay approaches product delivery. It's addressing real pain points—fragmented design, duplicated work, and inconsistent user experiences—by introducing structure, shared standards, and clarity across teams. It’s not just about components; it's about enabling teams to move faster, collaborate more effectively, and make better decisions. Rise is becoming a practical, everyday tool that drives better outcomes for both the business and our users.

    © 2025 Tony Palmer. All rights reserved.