Sergio Thomas-Miles
← Back
Design System LeadIBM ConsultingPrivate Banking

Bank Julius Bär

Building a Design System from the Ground Up

RoleDesign System Lead
ClientBank Julius Bär — Private Banking & Wealth Management
EngagementIBM Consulting
Duration~16 months (12 months alignment + 4 months execution)
DeliverablesToken architecture · Icon library · 30+ web components · Storybook · Governance model
ImpactMandatory standard for all BJB software development — still active 2+ years post-handoff
Storybookfrontify.zafire.sehlat.io

30+

Components in MVP

4 mo

Budget to first migration

2+ yrs

Still live post-handoff

100%

Mandatory — all BJB software

Context & Challenge

Bank Julius Bär is a global private banking group managing hundreds of billions in client assets. Despite its size and digital ambition, its internal IT landscape had grown organically into a siloed, inconsistent environment.

When IBM brought me in as a Design System specialist:

  • Multiple frontend frameworks running in parallel (Angular, React, custom builders) — no shared baseline
  • Each product team operated independently — no shared component library or UI language
  • Every application looked and behaved differently — maintenance expensive, onboarding took months
  • Internal design team (CCX) had grown from 3 to 15–20 people but equated design systems with a well-organised Figma library — unaware of the engineering and governance dimensions

Mandate: transform a vague internal wish for ‘better design’ into a fully operational, organisation-wide design system.

My Role

  • Educating stakeholders — reframing what a design system actually is across design leads, PMs, IT directors
  • Stakeholder alignment & internal sales — building a coalition from the ground up
  • Foundations architecture — token system (primitive + semantic), typography, spacing, colour, icon library
  • Component design — 30+ production-ready web components, full token compliance, accessibility, interaction states
  • Cross-functional leadership — daily sessions with 5 external FE devs + 1 FE lead + internal Code Excellence team
  • QA & approval — final sign-off on every component before marked Done
  • Governance design — contribution model, review criteria, versioning strategy
  • Adoption & rollout — open-door sessions, developer onboarding, migration support

Phase 1
Education & Alignment
~12 months

  • No budget, no mandate, no cross-team buy-in — all had to be built before a single component could be designed
  • Mapped the landscape: influential FE teams, projects with budget, pain points
  • Bottom-up evangelism: engineers talked to managers, word travelled upward
  • Key alliance: partnered with Code Excellence team (engineering standardisation) — unified design + engineering proposal doubled credibility and halved resistance
  • After ~12 months: secured trust and budget from head of Wealth Management IT

Phase 2
Foundations
Pre-budget

  • Primitive & semantic design tokens — colour, spacing, typography, elevation, motion
  • Typography system, colour palette with semantic roles, spacing scale, icon library
  • Component audit — prioritised list of 30+ components from auditing existing BJB applications
  • All groundwork laid so execution could move at speed once budget arrived

Phase 3
MVP Build
~4 months

  • 30+ production-ready web components in 2–3 intensive weeks
  • 1–2 daily handover sessions per component — design intent aligned before coding began
  • QA: token correctness, Storybook docs, interaction completeness, visual fidelity — final sign-off on every component
  • Web components chosen for framework-agnostic compatibility across BJB's fragmented tech landscape

Phase 4
Launch, Adoption & Governance

  • Reference migration: supported Wealth Management's most-used app as the first adopter
  • Open-door sessions for all FE teams — live demos, installation walkthroughs, Q&A
  • Governance model: contribution process, review criteria, versioning, snowflake distinction
  • Full knowledge transfer and team training before departure

Key Learnings

  1. 1.Design systems are 20% design and 80% change management.
  2. 2.Bottom-up adoption beats top-down mandates.
  3. 3.Alliances are leverage. Partnering with Code Excellence doubled credibility and halved resistance.
  4. 4.Build the foundations before you have permission to build everything else.
  5. 5.Governance is a product. Plan it before launch, not after.