Tackling a Software Redesign: Launching dotCMS’s New UI

$URLMapContent.title

Mar 27, 2017

Tackling a Software Redesign: Launching dotCMS’s New UI

dotCMS Angular2 CMS

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.


Recent Posts

Why The Modern Marketer Needs Less Code, But More Control

With new channels and consumer demands continually emerging, marketers are somewhat forced to become more tech-savvy in order to deliver relevant marketing campaigns and customer experiences at speed.

What Is An API, And How is it Changing Content Delivery?

APIs are changing the way brands deliver content across channels. But what is an API, and why is it so vital to brands in the age of IoT?

iIoT: the Internet of Things is About to Revolutionize Manufacturing

The Internet of Things isn’t just putting screens and voices into our favorite gadgets. It’s revolutionizing the very way those gadgets are made, delivered and monitored.

What is Account-based Marketing?

What is account based marketing, and how can B2B marketers use it to target their most ideal customers and clients?