From chaos to cohesion: Implementing effective design systems in digital products

You know that feeling when you browse a website or use software and everything seems to work exactly as you expect? You can venture anywhere within the product with the confidence that you’ll find what you need. And, after a few minutes, you feel like a power user. 

While many things go into effective design, these experiences likely have one thing in common: an effective design system. 

In this blog series, I will explore the benefits of a design system, the challenges of creating one and how we at Contentstack overcame them. Let’s go!

The benefits of a design system

Imagine a world where every button, form, and interaction perfectly aligns with your brand’s identity and user expectations. No more guesswork, no more reinventing the wheel with each new feature. Instead, you have a centralized source of truth that ensures consistency across the board. This doesn’t just make your design team’s job easier; it also creates a smoother, more cohesive experience for your users. They know what to expect and trust you’ll deliver it.

In practical terms, a design system streamlines collaboration between designers, developers, and stakeholders. It provides a common language everyone can understand, reducing miscommunication and aligning the team towards a shared vision. This alignment is crucial for maintaining the integrity of the brand identity across all products.

A well-crafted design system reduces redundancy by housing reusable components and guidelines. This allows designers to pull components from an official source rather than create them repeatedly. This inadvertently also helps the designs be cohesive and intuitive, fostering a sense of trust within the users and improving their experience. 

Investing in a design system is a commitment to long-term success. It’s about creating a solid foundation supporting your product's ongoing evolution. We’ve been investing a lot of time in our design system, and while it's always a work in progress, I’m excited to see the positive impact our design system has had on our products, our team and our users. 

Nothing comes easy. There are challenges involved. Some of these are the easy ones, like planning for the design system, selecting the right tool, figuring out your design philosophy, gathering your tokens, etc. Some challenges, on the other hand, are even bigger. I’m talking about implementation challenges (*cue the scary music). 

For this article, let's focus on some typical implementation challenges.

Challenges in implementing a design system

Implementing a design system is akin to constructing the foundation of a towering skyscraper; it requires meticulous planning, collaboration and an unwavering commitment to quality. While the end goal promises a streamlined, consistent, and user-friendly product, the journey to get there is riddled with challenges. These challenges can be technical or organizational.

One of the biggest challenges? Convincing stakeholders that a design system is worth the effort. Every team faces resource constraints, and often, it is a challenge to invest time if the payoff is not as immediate as a new feature or product. Trust me, I’ve been there. 

If you are making a case for a new design system, the most compelling arguments fall into three categories: Clarity, accessibility and scalability.

1. Clarity 

Why did I pitch the need for a new design system? While we had a first attempt at a design system in place, it was too tech-centric and oriented towards a more tech-savvy user base. Basically, it lacked clarity from the user’s viewpoint. Contentstack's non-technical users were more accustomed to GSuite or marketing tools. This difference was crucial. 

Case study: Error messages

Nobody likes to see a dreaded error message. This anxiety is heightened if the information delivered is overly technical or lacks steps to remediate. By standardizing the language, tone, and visual presentation of error messages, a design system ensures that these messages are clear, consistent, and user-friendly across the entire product. This clarity helps users quickly understand the issue and the steps they must take to recover from it. 

Additionally, a design system can include guidelines for designing helpful and actionable error messages, ensuring that they are informative but also reassuring and constructive, thereby improving the overall user experience during error situations.

For example, previously, there were no guiding principles on how an error message had to be displayed. Instead, it was based on how the APIs return an error. Teams were primarily concerned with showing an error if something went wrong without strongly emphasizing the user's perception. The instance below explains what I am talking about:

As per the new Contentstack design philosophy, our guidelines further mandate that:

1. Error or any messaging messages are clear, concise, and helpful. 
2. Language should be simple and free of technical jargon, with specific descriptions of what went wrong. 
3. Messages should provide actionable information and offer clear steps for resolution, such as links to help articles or contact information for support. 
4. The tone should be polite and reassuring, avoiding language that might make the user feel at fault. 
5. Error messages should be prominently placed visually, and cues like bold text or color should be used to highlight critical information, ensuring users can quickly understand and address the issue.
6. They should be screen reader-friendly. (This might be considered an accessibility issue, but you get the point!)

Here is an example of an error message that follows the guidelines:

You can see how the same error, but with the design philosophy applied, is clear, actionable and reduces the user's excess anxiety.

2. Accessibility 

I also emphasized that accessibility couldn’t be an afterthought; it needed to be baked into the design system from the ground up. Our existing system lacked this critical component.

Case study: Borderless forms

Our previous design system introduced the concept of borderless forms.

This made the form feel more like a notebook or freeform text editor. Surely our users (who have used such tools) would find the editing experience familiar.

The problem? Our users are accustomed to forms with clear outlines for what can be edited. In the old design:

• Colors were not identifiable and did not provide a proper visual hierarchy
• UI components were not recognizable due to the borderless nature of our forms
• Keyboard users found it difficult to navigate through the application
  The solution? In the current design system, borders are back in, making for a more accessible experience
  

3. Scalability

Contentstack started as a simple headless CMS. Early in our history, getting by without a formal design system was manageable. However, eventually, with new products and features on the horizon, we needed a more flexible UI—one that would work not only for our CMS product but also for those new products that were coming. 

To do this would require changes to our existing product as well. 

Here, we can see how the same interaction is applied differently to a different product.

Now, we can see a unified interaction across different products. There was some work up front, but by scaling our design system to account for more interactions, we could set a consistent foundation and scale to more products much faster.