Our design system at PagerDuty did more than just create consistency, it made us a more efficient Product Team. By establishing reusable components, like buttons and cards, to be used as building blocks for more complex interfaces, we spent less time on styling decisions and more time on higher-level design.
In his book Atomic Design, Brad Frost uses the metaphor of atoms, molecules, organisms, templates, and pages to show how simpler components can be combined into elements of increasing complexity:
On top of making the Design Team more efficient, design systems benefit engineering as well. A library of prebuilt components not only saves engineers time building these components–it also keeps designers and engineers aligned, reducing back-and-forth over styling details.
Each designer on the UX Team was assigned a few different components to add to the design system. To keep us aligned, we needed some guiding principles. We looked at our users' needs: PagerDuty users are software engineers–they value speed and efficiency.
We also considered the context in which PagerDuty is used: during website outages–stressful situations that can happen in the middle of the night! Given the users and the context, we came up with these design principles:
Clarity over minimalism: Make labels and actions clear, even if it requires more text. Minimalist design (like Apple's iOS) may look simple, but it's sparsity can make actions unclear.
Efficiency over delight: Engineers aren’t impressed by fancy animations. In such critical context, users will appreciate faster load times over “delightful” interactions.
First I designed our web app’s buttons – a building block for for complex components. Our buttons previously had gradients and other three-dimensional touches. Following our design principles, I created a simpler, more pragmatic design. A flat design not only looks more modern, but reduces unnecessary mental load.
For each of the examples below, I created detailed specs for all potential button states (default, hover, active, focus, disabled, progress) which I will not bore you with here.
Next, I created cards using a similar style. To find a style flexible enough to work for many situations, I found it useful to design for the most complex use case (a card with an icon, status, title, body, tags, buttons) and then worked backwards, removing elements one by one. A few examples:
We also needed cards with expandable sections:
Cards should be responsive:
Cards should be flexible and stay aligned, regardless of content:
Creating this design system was not without its challenges. Gaining approval from the UX Team for each component was not easy–designers can have strong opinions about styling :) I solicited many rounds of feedback and input from the team, implemented much of their advice, and pointed to our design principles to settle disagreements.
Here is our design system in action! The button component, or "atom", contributed to the a card "molecule", which formed a card group "organism", that fit within our App Directory page "template", which combined with our nav bar and footer to create a complete "page".
.png)