Blogs
Jason Smith
Chief User Experience Officer

Tackling a Software Redesign: Launching dotCMS’s New UI

Mar 27, 2017

By: Jason Smith

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.

Filed Under:

webinar

​dotCMS 5.0 Preview Webinar

Our experts share their expertise with containers, real customer stories of how containerization has helped leading enterprises save time and money, as well as a sneak peek at how dotCMS is scaling using Docker, a leading container provider.

Watch On-demand

Recommended Reading

Hybrid CMS and Taxonomies: A Deep Dive into dotCMS Search Capabilities

When choosing a CMS solution, one of the most critical things to look for is powerful search capabilities. We'll look at why search capabilities are crucial for a CMS, and how dotCMS provides powerful...

What is CCPA and What Does it Mean for Your Data Compliance & Content Management?

There’s a trend towards consumer data privacy regulations with GDPR in Europe and now CCPA in California. Are you taking the necessary steps to ensure your organization will remain compliant?

Headless Experience Management Done Right

Managing customer experiences in today’s omnichannel world can be hard if you don’t leverage the technology to do the work for you.

How dotCMS Hybrid CMS Streamlines Global Publishing at Scale

Globally distributed content publishing is often complex, but it doesn’t have to be. Learn about the push publishing capabilities of dotCMS, which streamlines enterprise content delivery worldwide.