The Electronic Immigration System (ELIS) is the case management system utilized by immigration officers for processing immigration benefit applications. ELIS was developed over several years without the involvement of a design team, resulting in inconsistencies in page layouts, UX patterns, and components. As a result, end-users had a frustrating experience, and developers working on the system encountered inefficiencies.
I was one of ten designers on a newly formed team brought in to revamp the system’s UX. However, we faced considerable resistance from developers who did not see the value of implementing our designs. Additionally, senior stakeholders were hesitant to embrace any changes they believed would slow down development.
I spearheaded the creation of a design system named “Beacon.” The design system included a component library in Sketch/Axure for designers and an equivalent library in AngularJS/React for developers. The system also provided detailed documentation outlining the appropriate usage of each component and easy-to-copy code snippets. Every component was 508 compliant and underwent usability testing before being added to Beacon.
Beacon made it easier for developers to implement our designs, and adoption of Beacon started to grow. Users began to share positive feedback about the improved user experience, and as a result senior stakeholders eventually recognized the importance of incorporating design best practices into the development process.
To better understand the existing state, I worked with fellow designers to create an inventory of existing UI elements such as buttons, alerts, typography, and more. This inventory helped us discover several problems.
Because there was no style guide, developers would “eyeball” styles, leading to over 250 variations of similar colors.
“Common sense” patterns like red=error and green=success were not followed.
A lack of documentation meant developers wasted time recreating UI elements that had already been coded.
We needed a way to build consistency across 10 designers and over 20 development teams.
I proposed and led the creation of a design system. I started by building a component library in Sketch (and later Axure) for the design team to use. Beacon took style cues from the U.S. Web Design System, but was customized heavily to meet the needs of ELIS users. I partnered with a content designer to write usage guidelines for each component (such as when to use a yellow warning alert vs a red error alert).
Other designers on the team could contribute changes or new components to the design system by putting in a request on a Confluence page which we discussed as a team at a weekly design system governance meeting.
With the design team aligned around the Beacon design standards, the next step was to make it usable for developers. I partnered with a development team to build the component library in AngularJS (and later in React), as well as a website which could provide documentation for both designers and developers. The website acted as a ‘source of truth’ for what components looked like, and included easy to copy/paste code snippets.
Development teams had been resistant to change, and did not see the value of design. I put together a roadshow presentation and presented it to each development team. The presentation highlighted the ways that design can make developers’ jobs easier in addition to benefiting users. Some key points included:
– ELIS Portfolio Manager
– Transformation Delivery Division Chief at USCIS
