truelayer.com
Overview
Over the past year, I took full ownership and responsibility as Team Lead and Product Designer for the complete redesign and architectural overhaul of truelayer.com.
I spearheaded the initiative from inception to execution, building the business case, managing key cross-functional stakeholders, establishing foundational design systems, and enabling the engineering team to build a high-performing, scalable web platform across global markets.
Role & key responsibilities
Leadership & enablement: Led and unblocked the engineering team throughout the project lifecycle, defining technical requirements, component standards, and delivery phases.
Design systems & foundations: Authored new design foundations, base components, layout systems, and a flexible CMS component library.
Page & navigation infrastructure: Re-architected site navigation, page templates, and content structures to support multi-region scaling.
Stakeholder management & buy-in: Pitched the initial business case to leadership, aligning marketing, talent, web engineering, and product teams around strategic goals and operational cost savings.
Business case & key challenges
CMS end-of-life & framework lock-in: The legacy site relied on Gatsby v4 coupled with GraphQL via Storyblok. Storyblok’s deprecation of GraphQL support made ongoing component development impossible, necessitating a complete rewrite to a REST API architecture (Next.js).
Unupgradable infrastructure & security risks: Conflicting library dependencies blocked upgrades from Gatsby v4 to v5, introducing technical debt and security vulnerabilities.
Design & systemic bottlenecks: The Vanilla Extract styling library was tightly coupled across every legacy component, restricting creative flexibility, lacking centralised button/column systems, and blocking design updates.
25-minute build times: Massive codebase bloat resulted in minimum 25-minute build previews per release, hindering marketing agility.
Operational expense: The existing Storyblok setup was over-provisioned, driving unnecessary SaaS plan costs.
Category | Legacy stack | New stack | Impact / Role |
|---|---|---|---|
Framework | Gatsby v4 | Next.js | Shifted from GraphQL to Storyblok REST API; introduced SSG/ISR capabilities. |
Language | TypeScript | TypeScript | Maintained strong end-to-end type safety across components and content models. |
UI Primitives | Custom / Coupled | Radix UI | Built accessible, unstyled core primitives into reusable base components. |
Styling | Vanilla Extract | SCSS | Decoupled styling logic to allow modular design system flexibility. |
CMS | Storyblok (GraphQL) | Storyblok (REST API) | Consolidated space structures, cleaned obsolete schemas, and lowered operational plan costs. |
Animation | Motion ( | Motion ( | Designed performant visual transitions and landing page animations. |
CI/CD & Testing | CircleCI + Storybook | CircleCI + Storybook | Storybook implementation for isolated component development and QA. |
Timeline & strategy
Below is a link to the timeline I created on Figjam. This was a rough simplified version of a complicated project with multiple stakeholders and continuous work on the existing website.
Design
Design system & base components
To replace legacy styling constraints, I created a scalable design system foundation in Figma anchored on accessible Radix UI primitives and custom SCSS. I established standardised typography tokens, responsive grid engines, and modular base components like unified button variants and container layouts. This decoupled component logic from restrictive styling libraries, giving our engineering team clean, reusable building blocks and complete creative flexibility.
CMS components & architecture
I restructured our Storyblok component architecture by deprecating over 20 legacy, single-use blocks in favor of flexible, modular components. I designed high-impact marketing blocks—including Bento Grid Stats (BentoGridStats), Bento Grid Cards (BentoGridCards), video-enabled hero sections, and interactive accordions—built to work seamlessly across global product pages. This modular system drastically simplified content creation for marketing while keeping page performance high.
Below are some sections of the website, showing different levels of CMS com[ponent complexity, and structure. I find websites are better view in action so check out truelayer.com
Mobile responsivity was also a given and considered in every step, below are just a couple of examples of the layout changes. Nothing to drastic as simplicity is key when designing for multiple screen sizes.
Navigation & page infrastructure
To support multi-region scaling and streamline site architecture, I redesigned the global navigation infrastructure, including header menus, categorised drop-downs, and localised footers. I consolidated a sprawling set of bespoke page layouts into two master templates (templateGenericPage and templateArticlePage). This structured framework provided a consistent user experience and enabled rapid deployment of new product and industry pages across more than 10 international markets.
Development
During the development phase, I worked side-by-side with our frontend engineers to bridge design and code, establishing a synchronised workflow where design deliverables directly unblocked engineering milestones.
Base component library co-development: To build our foundational design system, I collaborated closely with developers during the setup of the Radix UI primitives and SCSS architecture. I provided precise Figma specs, token mappings, and layout rules for core UI elements (buttons, inputs, column systems, grid engines). I actively reviewed early Storybook implementations to resolve edge cases, refine interactive states, and ensure full accessibility compliance before higher-level components were built.
Modular headless CMS integration (Storyblok): Once base primitives were established, I led the schema and visual design for our new Storyblok component library. I worked with engineers to translate complex layouts into flexible content blocks—such as Bento Grid Stats (
BentoGridStats), Bento Grid Cards (BentoGridCards), hero containers, and interactive accordions. We aligned field types, responsive behavior, and fallback options in Storyblok to give content editors high design flexibility while maintaining structural integrity in Next.js.Parallel Page Assembly & Validation: Rather than waiting for the entire component library to be finished, I designed and assembled page layouts in parallel as engineers shipped new frontend components. As developers pushed new CMS blocks to Storybook and Storyblok, I immediately built and stress-tested real marketing and product pages (Payments, Payouts, Bank on File, Industry Hubs). This tight feedback loop allowed us to identify component limitations early, refine CMS schemas in real time, and continuously validate production layouts without delaying the project timeline.
Global scalability, results & impact
The complete architectural overhaul transformed truelayer.com from a rigid, legacy codebase into a high-performance, multi-region web platform. By replacing the legacy Gatsby infrastructure with Next.js, Radix UI, and SCSS, we achieved immediate, measurable improvements in engineering velocity, marketing agility, and global scalability.
25+ Min to Instantaneous Previews: Slashed preview build times from over 25 minutes down to near-instantaneous builds, eliminating deployment bottlenecks and enabling the marketing team to launch campaigns and test iterations without delay.
Multi-Region European Scaling: Architected and deployed localised page frameworks across 10+ core European markets (including the UK, Germany, France, Spain, Italy, Ireland, Sweden, and the Netherlands)ensuring localised product and compliance messaging across all regions.
Operational Expense Reduction: Optimised the Storyblok CMS space configuration and reduced legacy component bloat, successfully enabling a downgrade from the Growth Plus ($320/mo) plan to a streamlined Growth (€91/mo) plan, cutting ongoing SaaS costs while reducing maintenance overhead.
Future-Proof Compliance & Flexibility: Restructured form architectures (
FormHubspotDialog) and base UI primitives to ensure full accessibility compliance and grant complete flexibility for growth tracking, AB testing, and conversion optimisation.