EADP Experience Design UI Component Library

When I came onboard to the EA Digital Platform team, there were no UI artifacts. No library, no design system, no standardized components. One of my early tasks was to create some base components that all the designers could use for their mockups. After settling on a design system based on Material UI, I went about creating these components, first in Adobe XD, and then more recently in Figma when I moved the team to that tool.

 
 

Approach

I began by researching what existed in the EADP apps already. Turns out, it was pretty much anarchy. I counted at least 4 different shades of blue used for “submit” buttons, no consistent way primary action buttons were displayed versus secondary, no consistency in padding, text sizing, heading usage, or pretty much anything else. I came up with a set of rules to apply across the component system.

  • One open-sourced, non-proprietary font family. The sites were using a form of an internally developed font. I switched everything to Open Sans.

  • Rule of eight: all paddings and margins, and (most) font sizes, would be using 8px as their base

  • Strict adherence to WCAG accessibility standards, especially when it comes to color contrast. That meant a minimum of a 4.5:1 contrast ratio (AA standard), and wherever possible, a 7:1 contrast ratio (AAA standard).

  • Avoidance of bespoke iconography. Every app wanted their own icon, and we had no dedicated graphics team. We had a license to Font Awesome, which came with hundreds of icons at all sorts of shapes and weights.

  • Standardization of heights, widths, and position on pages for buttons, text fields, and other form elements

  • Standardization of the use of overlays, alerts, and system messaging

 
 

Artifacts

Results

This standardization, once fully implemented for the various EADP properties, quite literally doubled the team’s output. Learning the system meant not having to draw visual elements from scratch each time (or copy them from some old non-standard file), and got our team out of the business of bespoke iconography. With this implementation, we were able to greatly expand the number of product teams we supported, going from 1 to 7 in a matter of months.