• Create a New Design System

  •  

Challenge
The Department of Safeguards at the International Atomic Energy Agency (IAEA) had an existing style guide for web applications. But its components were not always suited to newer technically–complex applications. To work around this, developers often created bespoke UI elements. This created inconsistent application experiences for Safeguards users.

Solution
To improve the experiences of Safeguards users and to increase developer efficiency, I drove the creation and adoption of a new design system, which helps product teams

  • Reuse UI components across applications
  • Reduce repetitive development tasks
  • Reduce development time by 2-3 weeks
  • Create accessible applications based on UI best practices

Contribution

Harmonize and Standardize

Existing applications contained many good ideas for UI design and behavior. But some of them solved the same problem with different behavior and/or visual appearance. The new Design System harmonizes these differences to create standard UI elements. These standardized UI elements create consistent and predictable experiences for users, which increases their efficiency.

View larger image »

Reduce Repetitive Tasks

To set up a new application, developers need to create standard elements like headers, footers, and UI components. A lot of these activities are the same regardless of the application. To reduce the number of repetitive tasks, I created an installable Angular library that developers can use to quickly scaffold an application that is compliant with the new Design System standards. Based on feedback from several development teams, the new Angular library saves them 2-3 weeks of development time.

View larger image »

Copy and Paste Code

Developers consistently told me they want to solve application-specific business problems (rather than create common UI elements). I created content to illustrate the visual appearance and behavior of each Template, Component, and Pattern in the Design System website. In addition, I developed a widget that displays the relevant code for each Template, Component, and Pattern. Developers can simply copy and paste the code into their application.

View larger image »

Empower Teams to Make Good Design Decisions

The Design System's Angular library and copyable code are based on foundational accessibility and user interface best practices. These principles and guidelines are explained in the Design System website. Using these foundational principles and guidelines, product teams can confidently design new UI elements (or modify existing ones).

View larger image »

Overview
I was the Product Manager, UX Designer, and Developer on this project. As part of my process, I formed a "Design System Working Group" composed of developers who provided ad-hoc technical guidance, as well as feedback on the overall solution. The Working Group also helped champion the project by talking about its benefits with IT leadership and other developers.

Research

I conducted several rounds of user research with individual developers. My goals were to understand their current practice of creating applications and to identify any gaps in their process. After each research round, I presented the data to the larger development team. Based on their feedback and ideas, I would plan the next research round.

View larger image »

Analysis and Synthesis

After multiple research rounds, I identified the following pain points. These pain points became a useful way to talk with IT leadership and teams about the potential impact of the new Design System.

View larger image »

Refine the Concept

I began investigating ways to use Angular schematics to scaffold a working application that was compliant with the Design System. In collaboration with the Design System Working Group, I developed two libraries:

A library containing the Design System CSS, icons, and other visual elements

An installable library that uses Angular schematics to generate a scaffold application conforming to the Design System standards

View larger image »

Launch and Usage

The Design System introduced new ways of working for the Development, Product Management, Business Analysis, and QA teams. For each of these teams, I planned and conducted a series of briefings that illustrated how the Design System could assist them in their work.

The Design System launched in Q2 2023. By the end of 2023:

  • Three teams had used the Design System to create new applications.
  • Two teams had used the Design System to make modifications to existing applications.

View larger image »