top of page

Building an Enterprise Design System for a Next-Generation Insurance Platform

Project Overview

When I joined WR Berkley, the organization was in the early stages of building a new, unified platform for insurance agents and insured users. Historically, each business segment operated on its own set of tools; fragmented, inconsistent, and often requiring manual intervention from support teams. The vision for the new was to create a single enterprise experience where users could independently quote, service, and maintain their accounts.

​

A core part of my contribution centered around building, refining, and institutionalizing the platform’s Design System.

My Contributions

  • Partner with designers, developers and product leads

  • Build and refine a comprehensive design system using Figma.

  • Document components in ZeroHeight for cross‑team accessibility.

  • Define usage guidelines, accessibility notes, interaction behaviors, and component states.

  • Support adoption through knowledge‑sharing sessions and design‑dev alignment.

​

This work became foundational to elevating the platform from a collection of one‑off solutions to a scalable, enterprise product.

ChatGPT Image Nov 13, 2025, 04_28_53 PM.png
Figma Dev Mode_edited_edited.png
zeroheight_logo_before_after_edited.png

The Challenge

As product teams began designing new features for the platform, it became clear that to deliver an enterprise‑level experience, we needed a single source of truth.

​

  • Different teams were interpreting UI patterns in different ways.

  • Existing designs lacked visual and behavioral consistency.

  • Developers were translating Figma files into code with varying levels of accuracy.

  • Without a shared component library, both design and development cycles were slowing down.

​​

Building the Design System

Step 1

Our first step was to audit existing designs across all product teams. This helped us establish an initial roadmap for the design system.

 

We collected:

  • Common UI patterns

  • Inconsistently styled components

  • Duplicated or conflicting elements

  • Gaps where components were needed but not yet defined​

DesignSystem1.PNG
arrow_edited.jpg
DesignSystem3.PNG

Step 2: Component Creation & Refinement

Working in Figma, we created reusable tokens, components, and variants that aligned with the overarching brand and product direction. Collaborating closely with engineering to ensure that each component was feasible, scalable, and optimized for development.

 

This included:

  • Buttons, inputs, form elements

  • Table styles and data visualization components

  • Navigation patterns

  • Page layouts and grid structures​

Step 3: Centralized Documentation

arrow.jpg

For many team members, this became their first introduction to a structured design system. To make this discoverable across teams, we used ZeroHeight to documented each component with:

​

  • Visual examples

  • Interaction rules

  • Accessibility guidelines

  • Do/Don't usage patterns​

​

Creating Consistency

DesignSystem2.PNG

Overview

 

The Date Picker component allows users to select a single date or a range of dates from a calendar interface. It supports month and year navigation, dropdown selectors, and visual selection states. This component is optimized for web-based enterprise applications where clarity, accuracy, and accessibility are critical.

​

This component is commonly used for:

  • Quoting workflows

  • Policy effective dates

  • Claims and reporting filters

  • Scheduling and service requests​​

Variants

​
Single Date Picker

  • Allows the user to select one individual date.

  • Used for: Start dates, effective dates, due dates

  • Displays one calendar

​

Date Range Picker

  • Allows the user to select a start and end date.

  • Used for: Reporting periods, booking windows, policy durations

  • Displays a visual range highlight

​

Dropdown Date Picker

  • Allows month and year to be selected using dropdowns.

  • Supports faster navigation across years

  • Ideal for historical data selection

Interactions & Behavior

​
Opening the Date Picker

  • Opens on input field focus or click

  • Positioned relative to the triggering input

  • Closes on:

    • Outside click

    • Date selection (single variant)

    • Escape key

​

Date Selection

  • Single variant: One date is selected at a time

  • Range variant:

    • First click sets start date

    • Second click sets end date

    • Range is visually highlighted

​

Navigation

  • Arrow buttons navigate by month

  • Dropdowns allow direct selection of:

    • Month

    • Year

Impact

Consistency:

A unified look & feel across all products and business segments.

​

Efficiency:

Designers created flows faster, using pre‑built, aligned components.

 

Scalability:

Features could be added while maintaining platform cohesion.

Developer confidence:

Improved collaboration and reduced back‑and‑forth

.

Enterprise maturity:

The platform evolved from a segmented collection of tools into a cohesive enterprise solution.

Strengthening Collaboration with Development

"Design System 101"  Workshops

To help developers feel confident navigating and implementing the system, we created and led a series of internal workshops. These sessions significantly improved communication and reduced friction during handoff.

 

Focus:

  • Understanding the design system and how to use it

  • How Figma’s Dev Mode works

  • Inspecting components, reading properties, and exporting assets

  • Best practices for giving and receiving design feedback

​

Outcome

Developers began using Dev Mode independently and more frequently, which:

  • Cut down on misinterpretations of design intention

  • Improved the accuracy and speed of implementation

  • Reduced the need for iterative rework

  • Strengthened the shared language between design and engineering

bottom of page