Designing a Scalable System for Cloudflare's 8+ Products
Cloudflare is a cloud computing platform that powers tens of millions of websites globally, about ~20% of the internet. Within their Storage & Database suite, there are 8 different products that had evolved at different speeds over time.
Because of Cloudflare’s fast-paced and experimental culture, the products had started to feel a bit out of sync from each other, both visually and functionally. I led the effort to bring them back together by creating a unified experience across all eight products, improving usability and visual consistency, and designing a scalable framework that engineering could easily implement.
Company:
Cloudflare
Role:
Product Designer
Tools Used:
Figma | Bitbucket
Project Duration:
Q1 2024 - Q2 2025
🚨 Problem / Challenge
Cloudflare’s suite of storage products had grown rapidly- but without a shared UX strategy.
This led to customers facing inconsistent workflows, and internal dev teams duplicating design and engineering work.
This fragmentation risked customer trust, slowed adoption of new products, and made internal processes tedious.
🙋🏾♀️ My Involvement
I spearheaded the design strategy and execution for Cloudflare’s unified storage experience, partnering with another designer, four PMs and three engineering teams.
My focus spanned discovery through implementation — including UX/UI design, research, and design QA for multiple launches.
🚗Process Overview
1) Cross-mapping across all products
Myself, and my design partner worked together to:
identify and map the various interfaces across all products
define the information architecture for each product
2) Our “pitch” to cross functional partners
Engineering, product management, and design resources were limited. With this being a design-lead initiative, we needed to pitch the value add to the broader team + leadership to get them on board.
3) Roadmap planning
I worked with my respective Product Managers to identify the ongoing “SHIP” work, and identify existing projects where we could leverage engineering resources to also implement the updated UI.
4) Early mockups
Design work was split in half, and we began to design the early explorations for the 7 experience types we’d need to account for.
We considered:
Validating the “why” behind our current product experiences
Things we could remove/add from the experiences
Opportunities to align with the broader developer platform (Compute, Media, AI)
5) User research
My design partner had the opportunity to attend a developer conference in London. While there, we decided she would conduct short feedback sessions with attendees.
I provided SME (subject matter expert) support to help her generalize the content so that it was not Cloudflare-specific, frame the questions she would be asking, and create A/B variations based on explorations we were unsure about.
Research finding #1
Observability- Many developers found our existing dashboard metrics to have limited visualization & filtering capabilities when compared to other industry products.
Although we already knew our existing component library was very limited with dashboard visualization, this finding helped us prioritize which areas we should place our efforts in order to achieve immediate impact.
Prior Design of Metrics
Final Design of Metrics
Research finding #2
Discoverability- Our storage and database products names were very unintuitive, and held little value for first time users. 100% of first time users, did not know the functionality our products provided from the names alone.
This was a change I'd be advocating for internally for a while, however the Navigation design/content was owned by a different team, and I could not make this change independently. Bringing this finding back, helped us find a middle ground that benefited end users.
6) Design Handoff
I revised the designs based on User Feedback, conversations with Product Managers regarding roadmap planning, and conversations with Engineering regarding technical constraints, and created:
hi-fidelity mockups
prototypes (interaction design)
red-line specifications
7) Implementation
Due to our proactive roadmap planning, we were able to start implementing designs across various products while simultaneously wrapping up designs in other areas.
During this phase, I was now responsible for reviewing the engineer’s pull requests and specifying revisions.
Outcomes
1) Improved Design Process
Speed & efficiency has increased by 4x | More focus on content instead of layout | Faster onboarding for new designers
2) Improved Engineering Process
Simplified implementation | Repurposing time for backend improvements | Improved collaboration with Design
3) Improved Product Management Process
Easier to visualize feature requirements | Empowered to be opinionated | Improved collaboration with Design
External Improvements
1) Better Communications
A more unified message to our customer base | Faster output for marketing material
2) Improved Developer (Customer) Experience
Improved discoverability | Customizable interfaces for personalization | Better association with predictability & reliability
3) Stronger stake in the competitive market
Modernized UI | Faster time-to-value | Increased retention & loyalty
