Delightful UI Elements

Why we did this

CloudFlare's dashboard is massive, feature-rich, and highly-interactive. The tools are powerful and their controls and settings can be complex. Our team's overhaul of the Cloudflare dashboard made it infinitely more consistent and user friendly than our previous dashboard, however; it was still very grey, and very much an enterprise service dashboard. We wanted to integrate some color and life into the product. There were also plenty of instances where we needed illustration to either convey a concept, or liven up an otherwise blank empty state in the dashboard.

  The Cloudflare welcome tour

Welcome tour

CloudFlare had the same dashboard for several years. When our team was ready to launch the redesign, we knew we wanted to ease customers into it and offer some kind of tour or introduction to the new UI. I created a simple, multi-page modal to introduce the new look and feel.

  Analytics empty state

Empty states

When new users join CloudFlare there are some features that they won't have use for right away. For instance, CloudFlare analytics — which take about 24 hours to start gathering data about your website. When new users join, we want them to understand why some apps aren't displaying information.

  Plan upgrade modals

Plan upgrades

Previously, whenever a user upgraded their account on CloudFlare there was no response in the dashboard. I created illustrations to insert into modal responses that would add fanfare to the interaction (upgrading should feel good!) Users know that their change has been processed, or their request sent. They're also reminded of billing changes and new features they may have access to.