All ProAg work

A design system that gave crop-insurance teams a shared language

I led the design system team and project at ProAg: planning workshops, the Figma library, foundations, documentation and the onboarding that teams adopted.

Role
Design system lead (team and project)
Scope
Planning workshops, Stakeholder interviews, Principles, Foundations, Figma library, Documentation, Onboarding, Governance
Tools
Figma
Illustration of the design system: four principles lead to foundations of color, type and icons, then a component library of buttons, fields, toggles and cards, then the product screens built from them

The problem

The UX strategy pointed to one cohesive experience across ProAg’s tools, and design and development needed a shared foundation to build it on.

How the work ran

  1. Learn the business

    ProAg’s systems, information architecture and teams.

  2. Plan

    Planning workshops and stakeholder interviews.

  3. Pitch options

    Approaches for IT and product management to weigh.

  4. Set principles

    Four principles the system answers to.

  5. Build foundations

    Color, type and icons.

  6. Put it to work

    Figma, documentation, ceremonies and onboarding.

1Learn the business

I studied ProAg’s systems and information architecture, and how its teams work.

2Plan

I ran planning workshops to decide what to tackle first, and interviewed stakeholders about how they work with design.

3Pitch options

I presented different design-system approaches, not a single answer, so IT and product management could weigh expectations and feasibility before committing.

4Set principles

I set four principles the system answers to: purposeful, versatile, compelling and thoughtful.

Four principles for the system.

5Build foundations

The foundations cover color with accessible tints and shades, Proxima Nova in three weights, and icons built on the Carbon set, extended with agriculture-specific ones.

Color, with accessible tints and shades.
Type: Proxima Nova in three weights.
Iconography on the Carbon set.

6Put it to work

I organized ProAg’s Figma instance around the components and created the documentation, ceremonies, templates and onboarding material for people joining. Defining components in shared chunks of information gave design and development one vocabulary, keeping components and products consistent.

Design system library and specsThe library, component specs, the working cadence and code handoff.Password required

Result

ProAg teams came away with one documented system: principles, foundations, a working cadence and onboarding. The quoting concepts were among the first work to apply it.