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

dotCMS Taxonomies & Tags: The Key Pillar of Online Conversions

Taxonomies are crucial for finding the right content, delivering personalized experiences, driving online conversions, and many other positive business outcomes.

Why We Choose to be an Enterprise-grade Open Source CMS: An Interview with the dotCMS CTO

Enterprises are increasingly adopting open source software, so we spoke with Will Ezell, CTO of dotCMS, to learn why the company has been and will remain open source.

How dotCMS and GraphQL Combine to Simplify Headless Content Management

In this article, I’ll walk you through the basics of GraphQL as an API and query language, how it differs from REST, and how dotCMS and GraphQL come together to streamline headless content management....

What is an Accelerated Mobile Page (AMP) and How Do I Get Started Building Them?

Accelerated Mobile Pages (AMP) can load faster on mobile devices than standard pages, but they come with restrictions on CSS and JavaScript.