dotCMS is a well-established content management system, predominantly known for being a mature, feature-packed platform that our customers love.

When I joined the team two years ago, I was excited to tackle the challenge of redesigning a product that had been evolving for over 20 years.

The product, mostly designed by developers, had accumulated a variety of design inconsistencies over the years.

We used the atomic design approach to get a closer look at the root of the problem. It became evident that the smallest elements varied significantly from each other, from typography, colors, spacing, and icons to components like buttons, input fields, and dropdowns. These differences compounded at a larger scale, affecting entire features and flows, which resulted in a lack of cohesion across the site.

Identifying the Need for a Design System

The initial challenge I noticed was the inconsistency among components across different screens—varying fonts, various icon libraries, and buttons that lacked uniformity, some of which were not recognizable as buttons, leading to an inconsistent and hard-to-navigate user interface.

Example of buttons before the new Design System:

Why a Unified Design System Matters

A design system is crucial for building and maintaining software for several reasons:

1. Consistency

Uniform User Experience: Ensures a consistent look and feel across different application parts, improving the user experience.

Branding: Consistent use of design elements reinforces brand identity and makes the application instantly recognizable.

2. Efficiency

Reusable Components: Design systems provide a library of reusable components, which speeds up the development process.

Faster Onboarding: New team members can get up to speed quickly by following the design system guidelines.

3. Collaboration

Cross-Functional Teams: The design system facilitates better collaboration between designers, developers, and other stakeholders, as everyone has a shared understanding and reference point.

Clear Communication: Standardized guidelines and components make communicating design decisions and changes easier.

4. Scalability

Evolving Products:  As products grow and evolve, a design system allows for scalable design updates without redesigning each component or screen individually.

Component Updates: Updates to the design system components can be propagated across the entire application, ensuring uniform enhancements and fixes.

5. Quality

Error Reduction: With predefined components and guidelines, there is less room for errors and inconsistencies.

Usability Standards: Design systems often incorporate best practices and accessibility standards, leading to higher quality and more inclusive products.

6. Maintainability

Simplified Maintenance: Centralized updates to the design system mean that maintenance and iterations are more manageable.

Documentation: Comprehensive documentation in design systems helps maintain consistency and provides a reference for future enhancements.

The Design Process

Analysis:

First, we conducted a thorough analysis of the existing design patterns to identify areas for improvement.

We cataloged the components used throughout the site and analyzed various use cases to ensure they met both product and user needs.

Next, we listed the components and checked which were part of our UI Component Library, identifying those that required custom design.

We aimed to adhere closely to this Library to maximize its benefits and avoid extra work for the design and development teams.

Building the Component Library:

Design Tokens

To establish a unified visual identity within our design system, we implemented Design Tokens.

Design tokens serve as variables encapsulating design elements such as colors, typography, and spacing, ensuring a consistent visual language across the platform.

If you want to learn more about design tokens, check out our detailed blog post here.

By defining these tokens in Figma, we ensure a more flexible design approach, allowing for consistent and easy application of our visual styles across different components and projects.

Here are our main design tokens:

1. Colors

2. Typography

3. Shadows

4. Spacing

5. Icons

Components

We developed a library of flexible and reusable components that will allow us to speed up the process of wireframing with over 100 different components.

Here are some of our most used ones:

1. Checkbox

2. Chip

3. Dropdown

4. Input field

5. Text area

6. Radio Button

7. Buttons

8. Card

9. Tab

10. Dialog

Figma file structure

When creating the Figma file, we follow the structure used by the UI Component Library we use, as it will make it easier for everyone to navigate through both systems without getting confused or lost.

We categorized each component and then organized it alphabetically.

Collaboration and Implementation

We collaborated closely with Product Managers and Stakeholders to ensure our design system aligned seamlessly with our brand and enhanced customer experience.

As our system continues to grow and we consistently innovate and launch new features, we are actively developing the new Design System. We are working closely with developers to ensure best practices and maintain alignment with our design principles. While the new Design System is not yet fully implemented, we are making steady progress and hope to complete it soon.

Here are some before and after images of the product

Before

(January 2023. Site templates data table)

After

(January 2024. Site templates data table)

Before

(January 2023. Create content form, dialog)

After

(January 2024. Create content form, dialog)

Impact and Results

The new design system has significantly improved our company workflow. It has created a more organized and accessible component library, increasing efficiency and consistency across projects. By standardizing components, we've made our internal processes more streamlined and effective. This unification has also enhanced collaboration between our design and development teams, resulting in a more cohesive and polished workflow.

While the new design system is not yet fully implemented, we are confident that it will greatly enhance the user experience once completed. We invite you to try out dotCMS and discover how our powerful platform can elevate your digital presence with its flexibility, robustness, and innovative features that make dotCMS a leading choice for content management.

Stay tuned to our blog for more updates and insights into our design process. Follow along as we continue to roll out new design system elements, sharing valuable tips and stories from our journey.