Designing a Dialog (and Design System)
Designing a Dialog (and Design System)
Summary
Appian’s Platform UXD Team had an out-of-date, unmaintained design system that went unused. I initiated the first revamped guideline for dialogs, and am now leading a new process to design a maintainable and useful design system.
Summary
Appian’s Platform UXD Team had an out-of-date, unmaintained design system that went unused. I initiated the first revamped guideline for dialogs, and am now leading a new process to design a maintainable and useful design system.
Role
Lead Designer & Initiative Owner
Role
Lead Designer & Initiative Owner
Collaborators
UXD Senior Leadership
Collaborators
UXD Senior Leadership
The Problem
The Problem
Designers at Appian were solving the same problems differently.
Designers at Appian were solving the same problems differently.
Designers at Appian needed an efficient method to create consistent, visually appealing designs for their day to day work. Without a streamlined approach, we often spent extra time iterating on common UI patterns—time that could have been better spent enhancing usability and refining user experiences.
Designers at Appian needed an efficient method to create consistent, visually appealing designs for their day to day work. Without a streamlined approach, we often spent extra time iterating on common UI patterns—time that could have been better spent enhancing usability and refining user experiences.
The consequences of this inefficiency were clear:
The consequences of this inefficiency were clear:
Wasted Time
Some of the same design decisions would be discussed on repeat, rather than sharing learnings across the team.
Inconsistent UX
Slight variations in buttons, typography, and spacing across different features created a disjointed user experience
Lack of UX Implementation Support
Teams without dedicated UX resources resorted to an out-of-date document, consistently contributing to sub-standard UX practices
Wasted Time
Some of the same design decisions would be discussed on repeat, rather than sharing learnings across the team.
Inconsistent UX
Slight variations in buttons, typography, and spacing across different features created a disjointed user experience
Lack of UX Implementation Support
Teams without UX support referenced outdated document, contributing to sub-standard UX practices
Attempt #1
Attempt #1
We kicked off our exploration by taking advantage of the company hackathon.
We kicked off our exploration by taking advantage of the company hackathon.
With some free time, a few of us Platform Designers got together during a company Hackathon to review our commonly used patterns. The head of the UX department even fueled the effort with a friendly challenge to design the best multi-step form (wizard) in a week.
With some free time, a few of us Platform Designers got together during a company Hackathon to review our commonly used patterns. The head of the UX department even fueled the effort with a friendly challenge to design the best multi-step form (wizard) in a week.
We were tasked with updating a simple wizard that allows users to quickly create common actions a user might do with a data source, such as "Create," Update," and "Delete" forms.
We were tasked with updating a simple wizard that allows users to quickly create common actions a user might do with a data source, such as "Create," Update," and "Delete" forms.
I ended up taking the prize, but my winning entry still wasn't quite ready to be added as part of a new design system.
I ended up taking the prize, but my winning entry still wasn't quite ready to be added as part of a new design system.
Attempt #2
Attempt #2
This experiment revealed that we needed to scale back to the fundamentals before we could tackle complex patterns. We dialed back from Wizards to Dialogs.
This experiment revealed that we needed to scale back to the fundamentals before we could tackle complex patterns. We dialed back from Wizards to Dialogs.
Now understanding the visual direction we wanted to go, I crowdsourced dialogs from our product to identify inconsistencies and categorize common use cases (e.g., confirm, form input, multi-step).
Now understanding the visual direction we wanted to go, I crowdsourced dialogs from our product to identify inconsistencies and categorize common use cases (e.g., confirm, form input, multi-step).
In this screenshot alone, there are three different styles of headers, three different styles of "Cancel," and four different section label styles.
In this screenshot alone, there are three different styles of headers, three different styles of "Cancel," and four different section label styles.
With lots of research in hand, I met with UX leads every other week to establish our ideal brand style and slowly honed in on our preferred look and feel.
With lots of research in hand, I met with UX leads every other week to establish our ideal brand style and slowly honed in on our preferred look and feel.
Before I knew it, we were no longer just looking at dialogs, but also typography, spacing, and button styling. I researched everything from the connection of musical scales to harmonious typography to inconsistencies in our grid systems.
Before I knew it, we were no longer just looking at dialogs, but also typography, spacing, and button styling. I researched everything from the connection of musical scales to harmonious typography to inconsistencies in our grid systems.
A screenshot of a design review where we ended up discussing everything beyond dialogs.
A screenshot of a design review where we ended up discussing everything beyond dialogs.
Key Takeaway
What began as a carefully chosen small increment exploded into debates about text hierarchy, button styling, content spacing, and tone of voice. In hindsight, this was a necessary detour—you can’t define a component in isolation—but it slowed us down significantly.
Key Takeaway
What began as a carefully chosen small increment exploded into debates about text hierarchy, button styling, content spacing, and tone of voice. In hindsight, this was a necessary detour—you can’t define a component in isolation—but it slowed us down significantly.
We developed our ideal dialog to the pixel. But the real test was to take it from design to development. It would take a lot of effort to perfectly match our ideals, time that our engineering team didn’t have.
We developed our ideal dialog to the pixel. But the real test was to take it from design to development. It would take a lot of effort to perfectly match our ideals, time that our engineering team didn’t have.
To speed up the process, I created a real-time tester interface so we could tweak spacing, padding, and text size live to quickly influence design decisions.
To speed up the process, I created a real-time tester interface so we could tweak spacing, padding, and text size live to quickly influence design decisions.
Example of switching between different spacing and typography sizes based on the content of the dialog to be able to quickly compare differences.
Example of switching between different spacing and typography sizes based on the content of the dialog to be able to quickly compare differences.
Conclusion?
Conclusion?
After 1 year, 6 reviews, and 3 iterations—we launched our first official guideline.
After 1 year, 6 reviews, and 3 iterations—we launched our first official guideline.
Screenshot of the published guideline
Screenshot of the published guideline
Yet, one year later, only 1–2 designers have followed it in the product.
Yet, one year later, only 1–2 designers have followed it in the product.
Why?
Purposeful inconsistency: Rolling new guidelines out incrementally caused friction with devs and PMs and a lack of buy-in
Lack of stability: Real-world usage revealed gaps in the design that we hadn't accounted for. As a result, we were constantly updating the source of truth.
Difficult implementation: The new recommendation was honestly pretty hacky, and not production ready code (AKA not dev-friendly)
Why?
Purposeful inconsistency: Rolling new guidelines out incrementally caused friction with devs and PMs and a lack of buy-in
Lack of stability: Real-world usage revealed gaps in the design that we hadn't accounted for. As a result, we were constantly updating the source of truth.
Difficult implementation: The new recommendation was honestly pretty hacky, and not production ready code (AKA not dev-friendly)
New Process
New Process
With these lessons in mind, I introduced a leaner, more collaborative model focused on early buy-in and practical implementation.
With these lessons in mind, I introduced a leaner, more collaborative model focused on early buy-in and practical implementation.
The challenges with the initial dialog guideline highlighted a critical need for a more implementation-focused approach to building our design system.
The challenges with the initial dialog guideline highlighted a critical need for a more implementation-focused approach to building our design system.
We piloted this new model with a recent color scheme standardization effort. This process took two workshops and two reviews to get to a guideline written and shared with the team, all in just 2 months.
We piloted this new model with a recent color scheme standardization effort. This process took two workshops and two reviews to get to a guideline written and shared with the team, all in just 2 months.
Time to review a guideline
1 year → 2 months
Time to review a guideline
1 year → 2 months
Instead of spending the majority of refinement with a small group of stakeholders, we’re refining with UXDs who are actually using the guidelines in their daily work.
Instead of spending the majority of refinement with a small group of stakeholders, we’re refining with UXDs who are actually using the guidelines in their daily work.
Now, three other guidelines are in motion—each with a clear implementation plan already in place.
Now, three other guidelines are in motion—each with a clear implementation plan already in place.
Reflection
Reflection
We've made a lot of progress, but we're not done yet.
We've made a lot of progress, but we're not done yet.
This journey taught me that great design systems will always require an investment. It isn’t something designers can do alone - it requires PM, Developer, and Stakeholder buy-in to really take across the finish line.
This journey taught me that great design systems will always require an investment. It isn’t something designers can do alone - it requires PM, Developer, and Stakeholder buy-in to really take across the finish line.
While Dialogs didn’t scale as expected, they laid the groundwork for a new way of working—one where consistency becomes easier, not harder.
While Dialogs didn’t scale as expected, they laid the groundwork for a new way of working—one where consistency becomes easier, not harder.