Page Rules

What are Page Rules?

Page Rules are custom rules you can make to your Cloudflare settings. 
When a user interacts with Cloudflare they are able to set their caching level, SSL settings, forwarding rules and more in the Cloudflare dashboard. 
Page Rules is a feature that empowers users to go more granular. With Page Rules, Cloudflare users can fine tune their settings down to the URL pattern.

  Page Rules before the redesign

The Challenge

Our existing Page Rules interface was outdated — We’d updated the rest of the Cloudflare dashboard to a new UI, and this app needed to be brought to parity with the rest of the dashboard. In addition, we’d added new features to set rules for, and had also created multi-user functionality, which meant we needed to account for multiple users interacting with Page Rules for any given customer website on Cloudflare..

One primary issue was that the Page Rules app forced users to dictate a setting for every possible feature, whether they wanted to or not. For example, if a user wanted to create a Page Rule to change their custom caching setting for a particular URL pattern, they would also have to dictate the settings for HTTPs, Always Online, and all of the other features listed. Additionally, there was no indication for the user what the current setting for those given features was, which meant a user could easily create an override unintentionally.


  Only impact relevant settings
  Set custom names
  Add, edit, delete notes
  Clearer ranking system

  Save Page Rules as drafts
  Pause Page Rules
  Update to new UI
  Bulk import/export


User testing and feedback for this project was very limited, the input that we were able to gather primarily came from support tickets and Enterprise customer requests. This is where we gathered the requirements for adding notes, saving Page Rules as drafts, custom naming, and bulk import/export. Our other requirements were determined internally — like updated the UI for parity with our new dashboard design, and including more upsells in the app.

The Solution

The finished design involves a simple table display that showcases the Page Rules users for the domain have created, in a ranked order of which Page Rule is most important and should take priority in execution. Page Rules can be dragged and dropped, or the rank can be clicked to edit right in the table. Users can continue to manage or delete Page Rules from the application. Once a user has used all of the available Page Rules for their plan level, they are encourage to upgrade their Cloudflare account to obtain more.

In addition, rather than putting every feature in front of the user in a long-form format, I chose to design a cleaner UI that allows users to add one feature setting at a time. Users can either type to begin searching for the feature of their choice, or simply click to open our dropdown list to scroll through the different features available. The features are divided into categories, which reflect the same categories users navigate through in the primary dashboard UI.

Another feature that we wanted to implement as a result of multi-user was staging mode. Because multiple members of a team may be accessing the same site, it's important to provide users the ability to draft up a page rule, save it, and send it off for review to another team member before activating the Page Rule.

To accommodate for this, I designed a simple selection in the UI that allows users to save Page Rules as drafts. Upon saving, the Page Rule is added to the table, but is set in the 'off' position to prevent it from executing. When a user is ready to activate the Page Rule, they simply switch it from off to on. This on/off feature also fulfills our requirement to allow users to pause Page Rules, and re-enable them at any given time.

For a more interactive and comprehensive look at the Page Rules UI design, check out my Invision prototype here.