Dashboard Search & Navigation

9 posts · Apr 2015 – Jun 2023

What this trail covers

Cloudflare's dashboard has evolved to manage an ever-increasing number of products and features. To address this complexity, Cloudflare has introduced 'quick search,' a cross-dashboard search tool designed to speed up common interactions by allowing users to quickly find and navigate to specific pages, website-specific products, and account-wide services. The new dashboard also introduces a more organized app-based navigation metaphor, moving away from the 'My Websites' page and organizing features into logical categories.

All Cloudflare trails

Jun 2023Benchmarking dashboard performanceThis post details performance improvements made to the Cloudflare dashboard, focusing on reducing JavaScript payload by deduping dependencies (lodash, icon library), refactoring bloated packages, and removing unused code. It also describes code splitting the monolithic application into authenticated and unauthenticated sub-applications to load only necessary code on demand. Finally, it explains optimizations to dead-code elimination (tree-shaking) by marking modules that don't produce side-effects. Key results show a reduction in total assets served and improved Lighthouse performance scores.
Mar 2023New Zero Trust navigation coming soon (and we need your feedback)This post announces an upcoming update to the Zero Trust dashboard navigation, scheduled for March 20, 2023. The key changes include quicker navigation to the main Cloudflare dashboard, easier account switching, and improved access to resources like the Community, developer documentation, and support. The update is driven by the growth of Zero Trust capabilities and the need for a more unified user experience across multiple Cloudflare products. It also highlights recent UI improvements such as a smarter user and account authorization experience, consistent table UIs, and a unified color scheme and page layout to align Zero Trust with the broader Cloudflare experience.
Sep 2022Project A11Y: how we upgraded Cloudflare’s dashboard to adhere to industry accessibility standardsThis post details the technical work undertaken to make the Cloudflare dashboard WCAG 2.1 AA compliant. Key contributions include: re-writing internal form components with improved validation and error handling; re-engineering charts and graphs for keyboard and screen reader accessibility, including a case study on time series graphs that involved iterating on design patterns (line weights, patterns, fading) and implementing keyboard navigation and CSV export; correcting page structure by adopting a new heading tag management technique; reworking SVGs for proper labeling and selective exposure to assistive technology; upgrading several major versions of inaccessible node modules; overhauling color usage and contributing accessible sequential colors to the design system; and fixing numerous bugs, particularly those related to incorrect HTML element usage within tables.
Sep 2022We've shipped so many products the Cloudflare dashboard needed its own search engineThis post introduces 'quick search,' a new cross-dashboard search tool for the Cloudflare dashboard. It allows users to search for pages, website-only products, and account-wide products via a keyboard shortcut (Ctrl+K or ⌘+K) or by clicking a magnifying glass icon. The tool provides instant search results as the user types and categorizes results into 'website-only products' and 'account-wide products.' Future plans include searching for product- and feature-specific configurations, Zero Trust dashboard content, and external content like documentation.
Sep 2021Dark Mode for the Cloudflare DashboardIntroduced 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.
Advertisement
May 2020DeepLinks and ScrollAnchorThis 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.
Dec 2018A new look on your Cloudflare dashboardIntroduced a new customer dashboard with a redesigned zone overview page, featuring improved analytics visibility and a new toolkit area for common settings. The redesign also incorporates responsiveness across various devices and screen widths. This release utilized a new prototyping framework and sets the stage for future design systems work.
May 2015Redesigning CloudFlareThis post details the redesign of the Cloudflare dashboard, focusing on improving user experience, scalability, and consistency. Key contributions include the introduction of an 'app' and 'module' based navigation framework, a new visual style guide with CSS-based elements and custom icons, and a commitment to responsive design for mobile accessibility. The redesign aims to provide a platform for easier addition of new features and a more mature brand representation.
Apr 2015CloudFlare's New DashboardThis post details the redesign of the Cloudflare dashboard, moving away from a 'My Websites' page to a site selector dropdown and organizing features into an 'app' metaphor. It introduces a responsive design for mobile devices and a new navigation structure based on logical categories of apps. The rollout strategy and feedback mechanism are also described.