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
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.
Like on your phone, dotCMS now has a notification center that lets you know when tasks have been completed.
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.