Tackling a Software Redesign: Launching dotCMS’s New UI

At dotCMS, we knew it was time for a redesign (to be honest, it was a little past time for a redesign), but we also wanted to make sure we did it right. Not only from a UI and UX standpoint, but also from a rollout strategy. We have seen other software vendors virtually go into a hole for years and come out with a fresh new look, but lacking the key features and functionality that their customers had depended on. For the redesign of dotCMS, we knew we’d need to use a phased approach that would allow us to build the design, without impacting the functionality that our customers need. Since our agile process is based on six month release cycles, we needed to start by defining what we could get accomplished in the first cycle while still making sure we laid the architecture for future releases.

An Agile Design

The Agile process started in software development and the ideology behind it has since found its way into other digital projects, like User Experience (UX). Agile simply means working through iterative, incremental cycles to build out a project. Each cycle (or sprint) consists of a discovery, design, development, and testing phase. Working in sprints, instead of releasing an entire project at once, allows for continuous feedback and improvement. This is part of the reason Agile has become so popular and why we adopted it in our R&D.

Selecting A Framework

We decided that the first thing we needed to do was to select a JavaScript framework to replace our current one. Being a Java shop and knowing the things we wanted to accomplish with this redesign, we selected Angular 2. Angular 2 is an object oriented framework that has a familiar syntax for Java programmers. This made it easier for our development teams to get started and build with.

Besides the improved performance and speed it brings, Angular 2 allows us to separate the UI from the backend and move to web services. It also gives us the ability to use web components as well as npm packages for our portlets modules.

Following Google’s Lead With Material Design

Now that we had the process and the frameworks in place, it was time to implement a new design. We were inspired by Google’s Material Design and used their principles in our redesign. Material Design is “a visual  language that synthesizes classic principles of good design with the innovation and possibility of technology and science” (Material Design.

This visual language is a new way to talk about interfaces and how users interact with them. Google’s Material Design guidelines cover the goals and objectives for how to handle these interactions with regards to motion, depth, fundamentals of light, content hierarchy, and more. We used these principles to design our new platform - keeping the experience consistent for all users and using depth, light, motion and more to create a visually appealing and intuitive interface.

Bringing It All Together For A New UI

Bringing all three together - Agile, Angular 2, and Material Design - we were able to launch our new user interface. By building in smaller sprints, we’re able to maintain upgrade paths for our customers. dotCMS 4.0 is just the first in many sprints to redesign our entire UI / UX. To improve efficiency and ease of use, we’ve updated:

Single Page App

Using Angular 2, we’ve been able to build dotCMS out as a single page app experience. With a constant menu on the side, users can more easily navigate between sections of dotCMS without having to load different screens and sections.

Notifications

Like on your phone, dotCMS now has a notification center that lets you know when tasks have been completed.

Actions Menu

Up in the top right, users will notice a new “Actions Menu” that makes it easy to jump to recent content items or recent widgets as well as a quick link to files, pages, and personas.

In this first sprint, we’ve completely changed the look and feel of our platform.  From the login screen to the single page app layout, users will see an increase in efficiency and ease of use. As we continue to improve our platform, we look forward to hearing your thoughts on our new UI/UX.