How Design Systems Prevent Frankenstein UX Solutions

You haven’t truly lived as a User Experience (UX) designer until you've witnessed a project's interface turn into a chaotic monster.  

You might be asking yourself, how is it possible for the creation of a "Frankenstein" design or solution if your teams conducted user research, agreed upon a problem statement, and set goals and metrics for the project? Well, it can happen pretty easily, but let’s start by defining what the Frankenstein Effect is, and we'll cover what a design system is, too. 

What is the Frankenstein Effect?

From a holistic, 30,000-foot view, the Frankenstein Effect is any time new ideas and concepts are added to a project without any connection to the original problem statement. You start to stitch together too many concepts without considering the original issue you sought to solve, and you start to ignore the desired outcomes you've meant to meet. The team has pulled a “Dr. Frankenstein”—the creation has come to life, but you’re left with a monster.

What is a Design System?

To understand the impact of the Frankenstein Effect, you must also know about design systems. A design system is defined as a “comprehensive set of rules, standards, and guidelines that form the foundation of a shared design language across teams.” The term design system is often used synonymously with pattern library or component library. The truth is, pattern or component libraries are examples of tangible deliverables making up parts of your design system, but they are not design systems on their own.

A design system is a collection of your brand's reusable design components and rules on how to style them. These components create consistent digital products across a single agency or company. 

Design Systems Can Prevent Monster Creation

Let’s explore how a design system can help designers keep mysterious sparks at bay and prevent additional monsters from coming to life.

When looking at the user interface aspect of a website, a “Frankenstein” arises when elements of your design system are used arbitrarily and confuse the intent of how, when, and why certain components or styles are used. These moments can occur due to one or more of the following reasons:

• The first and fastest way to a Frankenstein design comes from a lack of clear definition around your design system’s components. Less formally established and unsocialized design systems, especially on teams lacking in communication, leave room for various interpretations and inconsistencies in how design elements are to be used. The lack of a shared understanding of the purpose and intent of your design system leads to the creation of one-off components. Components are “the reusable building blocks” of a design system—they collectively offer intuitive user experiences. If the components are treated differently across different web pages, it will be difficult for the designer to produce a cohesive and user-friendly interface.

For example, in one instance, a component includes a button with an arrow to indicate to the end-user how they can progress forward in an online application. In another instance, the same button leads the end-user to an external page and away from the current online application. This causes not only bloat in your design system but confuses the end-user because they need to re-learn what action the button with an arrow is performing on each page. In addition, newly onboarded design team members may make mistakes due to the lack of consistency in the design system, so the creature you've created grows scarier over time. 

• The second way a unified design solution becomes a Frankenstein UX solution is through short-term demands with siloed team efforts and rushed timelines. These implications lead to misinterpretation of the proper use of the components and styles from your pattern library, which can cause disruptions in end-user satisfaction. If the agreed design concept and decisions aren’t communicated properly to all team members from the start, then individuals with the best intentions grow unaware of the original objective and unknowingly lead the project in a new direction.

Taking a moment to purposefully re-share a project's goal or explain the reasoning behind decisions across all team members doesn't always happen. Unfortunately, a project team is often in the weeds of things and stressed by timelines and other factors, so great communication can fall off the radar. It becomes a Frankenstein situation when education and communication stop, and the team tries to solve for the original goals plus additional ones. 

Steps to Avoid the Creation of a Frankenstein Design Solution

1. You must communicate and meet early and often at the beginning of a project. Meeting cadence is crucial to avoiding the dark, twisty, and stormy path of creating a Frankenstein design and solution.

2. As your team establishes and maintains a design system, it is important to share and educate teams on the brand and design principles. Education and shared knowledge of your design system allow designers to better absorb the basic principles so they can focus their time on harder and more complex user problems. The result is a better end product for your user.

Remember, your project can still evolve over time, especially as layers are uncovered and more user context is received. Information that informs a change in a project's direction should come from research, the discovery of technical implementation, or during useability testing. Having documentation and sharing decisions throughout the project keeps everyone informed and decreases the opportunity for solutions to evolve into Frankenstein creations. You can make changes, but everyone needs to be on board, and the changes must come with solid reasons to back them up. 

Good luck with creating something new and exciting, but don't let it become a monster! 

Interested in learning more about cool UX topics? Listen to Mock IT, our design and culture podcast.