Heron Design System

An initiative to adapt legacy pages to conform to the new design system.

Problem statement

Introduction

My job was to audit the site and implement the design system where it was missing.

I inspected the pages, collected my notes or colors and typography. I created a legend of existing colors corresponding with the Heron design system update needed.

Problem statement

Introduction

My job was to audit the site and implement the design system where it was missing.

I inspected the pages, collected my notes or colors and typography. I created a legend of existing colors corresponding with the Heron design system update needed.

Problem statement

Introduction

My job was to audit the site and implement the design system where it was missing.

I inspected the pages, collected my notes or colors and typography. I created a legend of existing colors corresponding with the Heron design system update needed.

Designing full components

Understanding the need

I experimented with the existing page, and tried out all of the possibilities as a user. I took screenshots of these to capture everything (drop downs, buttons, calendar picker etc).

Building a component

After I understood all the possible permutations, I created a full component using Heron design system principles.

Designing full components

Understanding the need

I experimented with the existing page, and tried out all of the possibilities as a user. I took screenshots of these to capture everything (drop downs, buttons, calendar picker etc).

Building a component

After I understood all the possible permutations, I created a full component using Heron design system principles.

Designing full components

Understanding the need

I experimented with the existing page, and tried out all of the possibilities as a user. I took screenshots of these to capture everything (drop downs, buttons, calendar picker etc).

Building a component

After I understood all the possible permutations, I created a full component using Heron design system principles.

Developer Handoff

Linear Tickets

I created implementation tickets for our front end UI engineers. I included figma designs for further instruction on the more complex design system translations.

Support Throughout

I checked in throughout development and audited the work that was in staging, as per the engineers request. I was the design support point person from development to production.

Developer Handoff

Linear Tickets

I created implementation tickets for our front end UI engineers. I included figma designs for further instruction on the more complex design system translations.

Support Throughout

I checked in throughout development and audited the work that was in staging, as per the engineers request. I was the design support point person from development to production.

Developer Handoff

Linear Tickets

I created implementation tickets for our front end UI engineers. I included figma designs for further instruction on the more complex design system translations.

Support Throughout

I checked in throughout development and audited the work that was in staging, as per the engineers request. I was the design support point person from development to production.

Tickets accompanied by specific designs

Implementation

I created implementation tickets for our front end UI engineers. I included figma designs for further instruction on the more complex design system translations.

Implementation

I checked in throughout development and audited the work that was in staging, as per the engineers request. I was the design support point person from development to production.

Mary Daftarian

Heron DS