Dashboard Search & Navigation

6/22/2023

This post details performance benchmarking and optimization efforts for the Cloudflare dashboard, specifically focusing on the login page. Key technical contributions include reducing JavaScript payload from 10MB to 6.5MB by deduping dependencies and refactoring bloated packages, implementing code splitting by separating authenticated and unauthenticated applications to reduce initial load times, and optimizing dead-code elimination (tree-shaking) to remove unused module imports. Performance metrics like Lighthouse scores and Largest Contentful Paint were used to measure improvements.

3/7/2023

This post announces an upcoming update to the Zero Trust dashboard navigation, scheduled for March 20, 2023. The key changes include quicker navigation between Zero Trust and the main Cloudflare dashboard, easier account switching, and readily available resources and support links. The update aims to provide a more seamless experience across all Cloudflare products by unifying the navigation under a single 'roof', driven by user feedback and principles of consistency, interconnectivity, and discoverability. It also highlights recent UI improvements such as a smarter user/account authorization experience, consistent table UIs, and a unified visual design.

9/30/2022

This post details the significant effort to make the Cloudflare dashboard accessible, adhering to WCAG 2.1 AA and Section 508 standards. Key technical contributions include: re-writing internal form components for improved validation, error handling, labels, and input descriptions; re-engineering charts and graphs for keyboard and screen reader accessibility, including a case study on time series graphs that involved iterative design and implementation of visual differentiation techniques (fading unfocused items, sequential colors) and keyboard navigation; correcting heading tags using a borrowed technique for page structure; reworking SVGs for proper labeling and assistive technology exposure; upgrading inaccessible node modules; overhauling color usage and contributing accessible sequential colors to the design system; and fixing numerous bugs related to incorrect HTML element usage. Additionally, chart and graph data is now downloadable in CSV format to meet WCAG 1.1.1.

9/28/2022

Introduced 'quick search,' a cross-dashboard search tool accessible via a magnifying glass icon or keyboard shortcuts (Ctrl+K/⌘+K). This tool allows users to search for and navigate to specific dashboard pages, website-only products, and account-wide products. The initial release supports searching for pages, website-specific products (by website name or product name), and account-wide products. Future plans include expanding search results to include product/feature-specific names/configurations, Zero Trust dashboard content, and external documentation.

9/29/2021

Introduced a dark mode theme for the Cloudflare Dashboard by leveraging the existing design system and its color primitives. This involved inverting luminosity scales and adjusting specific colors (e.g., background to off-black '#1D1D1D') to maintain accessibility and brand aesthetic. The implementation also required auditing and iterating on various UI components like charts, icons, buttons, and link states to ensure proper contrast and visual consistency in the new theme.

5/18/2020

This post introduces the DeepLink and ScrollAnchor React components to enhance navigation within the Cloudflare Dashboard. DeepLinks utilize a URL schema with a 'to' query parameter for dynamic value resolution (e.g., account and zone), simplifying direct linking to specific resources. The DeepLink component consolidates routing and resolution logic, employing resolvers for dynamic symbols and a `waitForPageAction` utility to handle user interactions when manual selection is required. ScrollAnchor enables scrolling to specific content on a page after the DOM has loaded.

12/11/2018

This post announces the rollout of an improved customer dashboard, specifically the zone overview page. Key changes driven by customer feedback include better visibility of key analytics and an easier way to apply common settings. The page has been redesigned for responsiveness. Under the hood, this release utilizes a new prototyping framework, setting the stage for future customer experience improvements and design system work.

5/1/2015

This post details the redesign of the Cloudflare dashboard, focusing on the need for versatility, scalability, and consistency. It introduces the concepts of 'apps' and 'modules' as the new organizational framework for features and settings, aiming to improve navigation and feature development. The redesign also emphasizes responsive design for mobile devices and a cleaner visual identity based on a new style guide.

4/28/2015

This post introduces a significant redesign of the Cloudflare customer UI, moving from a 'My Websites' page to a site-selector dropdown and an app-based navigation metaphor. It addresses the scalability issues of the old UI for users with many domains and introduces a fully responsive design for mobile and tablet management. The new dashboard organizes features into logical app categories and allows for both Cloudflare-developed and third-party apps.