Blogs

Reimagining dotCMS: Setting the Stage for Future Design

Melissa Rojas
1.png

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:

2.png

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.

3.png

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

4.png

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

5.png

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.

6.png

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)

7.jpg

After

(January 2024. Site templates data table)

8.jpg

Before

(January 2023. Create content form, dialog)

9.png

After

(January 2024. Create content form, dialog)

10.jpg

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.

Melissa Rojas
Product Designer
August 19, 2024

Filed Under:

design

Recommended Reading

Microsoft SharePoint vs dotCMS: A Comprehensive Comparison for Intranet

This blog post will break down the two most popular intranet solutions: SharePoint and dotCMS to help you decide which is best for your company.

Stability and Security: How the WordPress Licensing Dispute is Impacting Enterprise CMS

Recent events in the content management space, including WordPress's licensing disputes, have highlighted the critical need for stability in enterprise CMS platforms.

New Feature: Automate Development & Deployments with dotCLI

dotCLI is a CLI tool that provides devs with a command-based interface for automating tasks and managing software deployment processes.

Highly Rated and Recommended

We're rated Excellent 4.2/5 stars on G2 - with 95+ verified reviews