CloudFlare’s original interface grew at an amazing speed. Visually, it hadn't changed much since CloudFlare’s launch in 2010. After several years of new features, settings, and ancillary UIs buried beneath clicks, it became clear that the user experience was lacking and would only get worse as we continued to add features. The question became: How could we make a UI that was versatile, scalable, and consistent?
If you haven’t yet, make sure you read Matthew’s post about the philosophy behind our new interface. This post will go into the details and the thought process behind designing our new dashboard.
Why a redesign?
We needed versatility for a growing variety of users and devices
As CloudFlare has grown, we now have a large variety of customers spanning four very different plan levels. We needed an interface that would work well for both the casual owner of a single blog, an agency managing many client sites, and enterprise customers that demand ultimate control. Also, the rise of responsive design was something we wanted to take seriously — the dashboard should be versatile enough to work just as well on every device.
We needed a platform that we could build upon
We couldn’t shove new features into a ‘gear menu’ forever. We needed a navigation metaphor that would be scalable, as well as a consistent visual framework to make the development of new features easier, faster, and more easily understood by the user. We had big plans for new features when we started out; I’ll go into some of them below.
We needed consistency with a more mature brand
The CloudFlare brand has grown and evolved in the past several years. During the redesign process, we updated our visual identity system with new fonts, color palettes, and imagery for our business cards, printed items, booth displays, and videos. Our new dashboard is another step toward a newer, cleaner look.
The process
A new concept
Starting with a clean slate, we had the ability to completely rethink the information architecture and visual hierarchy of the interface. Keeping years of user feedback in mind, it was time to sketch out some ideas. Below is a small sampling of many sketches that were made early in the process:
Apps
With a layout framework started, the concept of categorizing our settings and features started to take shape. These categories evolved into ‘apps' as we noticed the visual similarity of the navigation row to today’s smartphones. It also fit with the concept of adding third party apps (something we’re going to be implementing soon) to apps provided by CloudFlare. Using apps as the beginning of our framework, we had a hierarchy: a user would select a website, have a clear list of CloudFlare and third party apps, and whichever app was selected, specific settings and features would be displayed.
Modules
As our navigation solidified around the idea of apps, we got down to the smaller pieces. Within apps we put ‘modules’ that encapsulate each setting. As the name implies, these modules are modular — they’re made of several pieces that lock together creating a consistent look across the UI, even when used in a variety of ways. We decided that each module would contain a name and description, as well as a collapsible panel at the bottom. Some modules would feature a “control area” on the right side. Other more complicated modules could contain data tables, or even be a combination of both data tables and controls. Take a look at the dashboard the next time you log in and you’ll see them in their many variations.
One of the biggest improvements we wanted to integrate was inline help content. No more going off to other tabs to learn more about a setting. Help content is contained in a collapsible panel that can be expanded for further reading. We also plan on using this collapsible panel for other module-specific content, like API information, in the future.
Responsive design
We started this design process with a goal of making every CloudFlare feature adjustable from your phone. The modules mentioned above were designed to resize and reflow to your device size, allowing you to easily control CloudFlare settings for your websites. Checking the performance of your web site should be possible from a desktop machine and while running between meetings. And while it might be a bit crazy to set up an SSL certificate via your phone, we definitely don’t want to stop you!
The new look
We established a new style guide for the dashboard with new fonts, colors, and interface elements like buttons, toggles, and select menus. When trying to make everything fully responsive, high-density display ready, and overall more performant, we decided to throw out all images with lots of drop shadows, gradients, and noise that made up our old buttons and controls and focused on making everything out of CSS. The results are a crisper, cleaner look, and a faster load.
We also created a custom icon set to use for our app icons and buttons, as well as in some new illustrations that we use to introduce a little fun here and there.
Just the beginning
This new dashboard gives us a platform to deliver more features to users while continually evolving the UI itself with greater ease. What you see today is only a fraction of what we hope to do going forward, and this isn’t the only thing getting a refresh. As Matthew hinted, our old marketing site will be getting a facelift, and a new support site is in the works. Stay tuned!
If you think our design process is something you'd like to take part in, we’re hiring.