Creating a brand refresh and design system for a technical yet spirited global Internet infrastructure & security company

I have had the honor and privilege to lead the Brand refresh initiative for Cloudflare these past several months. It’s been a wonderful learning experience for everyone involved, and we couldn’t be more grateful for how far we’ve come. In this post, I will speak at a high-level about the process, approach, and outcome of the brand refresh and design system I spearheaded for Cloudflare. To adequately understand the context I’ve outlined both the challenges and the role I played in getting this work across the finish line.

Challenges

  • The initial attempt at the refresh although beautiful, thoughtful, and well-executed was not well-received, because it did not capture the Cloudflare essence.
  • We then had to convince leadership that the project was still worth investment after the first attempt.
  • We had the added challenge of working with a fraction of the amount of time, budget, and resources that were initially available.

My Role

  • I restarted and led the brand refresh project for Cloudflare.
  • Partner with the Head of Brand to co-write and complete Cloudflare’s first-ever foundational brand strategy.
  • Use the strategy to inspire a creative concept that is used to visually tie the system together.
  • Facilitate collaboration between the brand design team and cross-functional teams such as product design, interactive dev, and marketing leadership to contribute ideas and feedback in reviews, weekly crits, and bi-weekly syncs.
  • I conducted a global user testing focus group to collect qualitative data on the early development of the brand design and illustration style to ensure we were headed in the right direction for our core audience.
  • Managed and art-directed our agency partners to help me to evolve the system’s assets and components to use in the final deliverable (a brand design system and guidelines).

When I was first approached with the opportunity to lead the brand refresh I immediately felt how important it was to capture Cloudflare’s essence. Cloudflare is a unique place, with an energy that I’ve personally never experienced at other companies. We have a powerful mission, strong core values, and a personality that is uniquely our own. By being open, taking every opportunity to absorb knowledge, and listening to leadership and stakeholders, I gained a wealth of knowledge to work with and be inspired by. This helped me cultivate a vision for the completion of our foundational brand strategy, refreshed style, and design system.

A brand identity system is at its best when it is a visual and experiential manifestation of the brand strategy that underpins it.

Any foundational design work is prefaced with stakeholder interviews, business and market analysis, brand research, and a transparent process that allows for visibility and cross-functional collaboration with teams around the company. After reading through stakeholder research and historical company documentation I began a collaboration with our Head of Brand, Rebecca Clayman, to co-write and complete the work she’d initially started before I’d joined. Collaborating on a foundational brand strategy was something I’ve always wanted to do because it’s the underpinning for all the design work that follows, so to be able to inform and co-author this part of the process played a crucial part in eventually using this foundation to inform the creative direction of our entire brand refresh. We socialized the strategy with management and other stakeholders and established a constant loop of feedback and iteration. As soon as we solidified the base of our strategy there was more than enough to pull from to begin establishing a creative direction.

Using our brand strategy, which is comprised of our mission, core values, personality, value proposition, and brand promise, I conceived the creative concept based on our brand promise, boldly go. At its essence, this brand promise is about curiosity, innovation, performance, and adaptability.

Cloudflare brand promise statement

If you’re thinking of Star Trek and the famous line by William Shatner who starred as Captain James T. Kirk “to boldly go where no man [or woman] has gone before”, then you are thinking correctly. Cloudflare is on a mission to help build a better Internet, and in doing so we are searching for new and innovative ways to make the Internet and cloud computing more secure, faster, better, and accessible to everyone. Yes, I said it, EVERYONE. This is no small feat, and it is a bold and audacious mission, which deserves a bold, innovative, performant, and adaptable design system to match.

This creative direction is an interpretation of our brand promise: “Boldly go”, which at its essence is about curiosity, innovation, performance, and adaptability. The foundation of the system uses representational linework, which establishes a distinct visual language and style. The dynamic linework symbolizes Cloudflare’s network, scale, connection, protection, speed, energy, and enablement of Cloudflare’s service.

The creative concept is what ties the entire design system together. It creates unity for our brand and allows for a distinct visual language and style.

If we think for a second about what a line actually is; it’s two points connecting in 2D-space, it is the simplest gesture one can make when creating visuals and is a clear representation of data being sent from one endpoint to another. Well, that is also what Cloudflare does: we transfer user data safely and quickly from one endpoint to another. A line is also quite performant in terms of visual elements being rendered on the web. So, not only is the linework concept visually distinctive, but it also embodies Cloudflare’s functionality. Having a concept that aligned with our products’ function made it relatively easy to then define and craft the principles from which all Cloudflare design elements would emanate.

Cloudflare Design Principles

While writing Cloudflare’s design principles I wanted to connect each principle to actual attributes of Cloudflare’s business. This allowed each design principle to be uniquely tailored to us. Because any brand can use these same design pillars (clarity & simplicity, energy & motion, scale, and bold & expressive) it was important to define what they meant for us, and how they needed to be properly interpreted to create design materials that capture the essence of our brand. Establishing this level of specificity is what makes Cloudflare’s design system special.

1. Clarity & Simplicity

Design that is clear and simple allows our audience to quickly understand our content. As a brand rooted in speed and performance quality, it is critical that our designs perform optimally. This means keeping the hierarchy of information clear and easily scannable and ensuring illustrations are focused (no boiling the ocean). Don’t assume that adding more elements helps with comprehension. In reality, the converse is often true — fewer design elements often enhance clarity.

2. Energy & Motion

The energy at Cloudflare is electrifying. We are constantly innovating and shipping products with a velocity unmatched by our competition. We like to capture this energy in our design work. Make sure that design feels alive and energetic, never stale or stagnant. This can be done through dynamic layouts, fresh and vibrant color usage, and curvy and organic lines and compositions.

3. Scale

Our design system should scale like our globally distributed network. At Cloudflare the breadth and intelligence of our network allow us to quickly and successfully ship products all over the world. Our design system is meant to work similarly. Keeping design clear and intelligently simple allows designers, vendors, and agencies from around the world to easily create design work that adheres to our guidelines. This approach is key to ensuring that we can continue to scale our brand with integrity.

4. Bold & Expressive

We are a tech company with a soul, and we let our personality shine through whenever possible. Our design should make a statement and be a unique representation of who we are. It should not look like your typical run-of-the-mill Internet infrastructure and security company. The use of clever concepts, bold color, contrast, and dramatic use of scale can enhance any composition and elevate its distinctiveness to create a lasting and impactful impression on our audience far beyond their initial experience.

Holding Global User Focus Groups

Before getting too far down the road in the iterative design process, we held five focus groups, with five different people from five different parts of the world, and spent an hour with each of them. It was important to get a range of qualitative data from our core audience (technical users) to validate our decisions thus far and ensure that we were headed in the right direction. This was key to solidifying our foundation.

As I was wrapping this phase of the work, the COVID-19 pandemic hit. As a result, we had to re-think traditional Enterprise user testing. Instead of using the same approach we did with our pay-as-you-go focus group, we decided to use our Brand 2020 Campaign, #BuiltForThis as an opportunity to roll out some of the new look & feel on campaign assets as well as a homepage takeover.

Cloudflare, #BuiltForThis 2020 campaign landing homepage takeover
Banner ad examples

This is one of the things I love most about Cloudflare. We take risks in the name of passion and innovation, with the forethought that if it doesn’t go well, we’ll pivot immediately. Fortunately, what was a seven-day turnaround for an entire brand campaign, and the incubation test for our brand refresh to our greater audience proved to be a good decision. Based on the results we received, we decided to keep the look and feel for our homepage beyond the life span of our campaign, and have been moving forward in the new direction since.

Design Elements

Now that the development of our design thinking and visual style had been validated, I could focus on the execution of our system framework and design elements.

The first element that came to mind was our logo. We’d done a lot of exploration around a refreshed logo solution for Cloudflare, but unfortunately, it wasn’t the right time for a change of that caliber. Instead, I focused on all the other elements for the purpose of this refresh; typography, grids & spacing, color, icons, illustrations, data viz & technical diagramming, and photography.

Typography

Typography plays a huge role in establishing a brand’s visual voice. Knowing this we needed a typeface that was born and bred for screens, open-source (free), and married well with Cloudflare’s personality (for everyone, bold, and helpful). With these constraints, we were limited in our options, but those limitations provided an opportunity to be creative. I decided to take this challenge to our ‘Design Chat’ (G-Chat) channel and within minutes we had our new typeface, which we’d use for all non-web-based design outputs since our web properties, as well as products, rely on system fonts to ensure optimum performance for all users.

The fastest settlement on a typeface decision ever made.

Not only did Inter meet all of our needs there was also a bonus. Rasmus Andersson the type designer who created Inter uses our products, which plays well with our open-source culture, and provides another layer of meaning and connection to our brand identity’s story.

Because we are global at our core, we’d defined a typeface for localization. Noto Sans, which is also an open-source typeface supports over 800 languages and 100 scripts. This allows us to keep consistency across a wide range of locales for all of our non-web-based marketing materials.

Grids & Spacing (Web & Mobile)

Homepage example

Without getting too technical, which I’d like to save for another post that goes into great detail about the specifics of our design system, I’m going to speak at a high-level about grids and spacing for our web refresh. In the web audit phase, we’d realized that everything needed more space to breathe. So, the objective here was to make content and visuals clear, easily scannable, approachable, and distinct. Here are a few examples of those objectives being met and showcased on a few web comps.

Product marketing page example
Pricing page example
Case studies page example
Mobile experience examples

We are currently still in our web refresh implementation phase. The goal is to use this refresh as an opportunity to build in a new code base. This gives us ultimate control over how the back-end is built so that our development process for the web is automated which enables us to scale at the same rate as our product offerings and our business. This design system wasn’t just about making things look more cohesive, it’s about making sure form and function are always in constant synchronicity.

Color

Color palette

Cloudflare’s refreshed color palette is meant to feel bold, fresh, and modern. Color is one of the most important design elements for a brand. Establishing a color trigger is crucial to developing brand awareness and memorability. Our use of orange has always been prominent, but originally we only had two orange tones (based on our logo) in our palette, although the use of a darker orange would pop up in certain areas it had never been documented or solidified as a part of the Cloudflare palette. Our agency partners at the time (DesignStudio, NY) did an incredible deep study and exploration on color palettes within our space and this palette was the by-product of that in-depth research. The color palette was one of the salvageable elements from the previous work we did the first time around, which I was extremely happy about since I truly believe the palette they delivered was perfect, but inappropriately interpreted for the Cloudflare brand. So, sometimes it’s not the ingredients that aren’t working, it’s what’s made with them. I decided to add white to the palette because I realized in the research phase that users saw white and the use of whitespace as a major element in the Cloudflare brand. This particular use of white and whitespace is what helps us achieve a clear, simple, and approachable look and feel. This is very important especially since Internet infrastructure and security can be daunting even for some of the most skilled dev/ops engineers.

Icons

Icon framework

Our icon system was also one of the salvageable elements from our initial attempt at the refresh work. The system is flexible and accommodates a range of aspect ratios. The diagonal notched corners are a nod to the icon renderings from the early computer days.

The iconic work of Susan Kare (Mac icons)
Icon library

Illustration

Illustration framework: Technical/Abstract, Technical/Representational, Representational/Expressive, and Abstract/Expressive

I designed Cloudflare’s illustration system to be modular, adaptive, and performant (loads quickly on the web, communicates concepts clearly, and requires no extra visual effects). It’s a visual language built using components that are intended to work similarly to code. Designers can re-use components or illustrations to enforce meaning and instill modularity. Because Cloudflare is growing so quickly and tends to ship products at a fast pace, it is important that designers can keep up with the demand for new illustrations needed to support the product storytelling, while still having adequate work/life balance. For this to be possible a scalable, easy to use, modular illustration system was necessary.

Cloudflare illustration library
Abstract / Expressive illustration style

Our abstract/expressive illustration quadrant is for extended range when we want to provide an added element of energy and fun to our design toolkit, and are typically reserved for less corporate purposes such as (but not limited to): Employee Resource Groups, community events, or other ancillary non-recurring events and programming.

The styles are meant to create temporary, non-evergreen, of-the-moment graphics that allow for expression and creativity beyond our standard guidelines.

Data Viz & Technical Diagrams
Technical diagrams are meant to communicate how the Internet and our products and features work. They should be clear and easy to read. This allows a complex diagram to feel simplified and can be more easily understood.

Technical / Complex diagram example

Our technical/expressive diagrams that utilize simplified spot illustrations however are intended to feel expressive and distinct. We use this approach when the diagram is simple and needs more expression in order to drive more engagement and visual interest.

Technical / Expressive diagram example

Photography art direction
Before launching our 2020 brand campaign (#BuiltForThis) we didn’t typically use photography in our external brand and marketing materials. But, needing to communicate to our audience on a more human level during the first few weeks of the pandemic it was important to define our perspective. We wanted our photography art direction to always have neutral-lighting, and feel diverse, human, and optimistic. For moments when we need something more generic, we rely on textural photography showcasing code or linework. Editorial photos showcasing thought leaders in the space have an option to use multidimensional linework to create energy and texture.

Acceptable photography

One of our brand values is to communicate openly and transparently, and as such, we make a point of staying away from fear-based imagery of dark rooms or malicious hackers. We also try to avoid out-of-the-can stock photography, as we have a unique personality that we want to shine through in all of our brand elements.

Don’t for photography

Brand means Business

Source: Lippincott

39% of B2B purchase decisions are based on brand equity. Building a strong brand allows a company to connect with their audience, an association that boosts the intrinsic value of the brand over time. When brands do this well, the ROI is exponential: +52% life-time value increase for emotionally connected customers. Good branding can also help companies earn the benefit of the doubt with customers, the press, social media, and investors.

“ B2B companies with brands that are perceived as strong generate a higher EBIT margin than others.”
“In 2012, strong brands outperformed weak brands by 20 percent, up from 13 percent in 2011.”
“In the US, […] brands are seen as having an 18% share in the purchasing decision, compared to the 17 percent tied up in the sales effort.
— Forbes

The brand really is the business, and design is the visual and experiential manifestation of the brand. Creating a beautiful, clever, and scalable design system will create a better experience for users, build trust, and bolster brand equity.

Conclusion

Cloudflare pre-brand refresh
Cloudflare post-brand refresh

Learnings

  • I learned how to keep the entire process transparent. I over-communicated with all the stakeholders involved to make sure they were a part of the process every step of the way.
  • By organizing the project ensuring that everyone had a defined role and level of contribution, it created a dynamic that allowed those involved to use their strengths and add value while seamlessly collaborating.
  • I learned how to get everyone congruent around a cause so that we could all march forward in one direction.

In conclusion, this brand refresh work was a labor of love and an honor to lead and manifest. We are still in the beginning phases of implementation and we are continuing to learn and grow. With that, I’d like to give special thanks to Rebecca Clayman, Head of Brand for inviting me to partner on brand strategy (it was truly a dream of mine). Dylan Welter, Creative Ops Manager for being my operations counterpart on this journey. And, an amazing cross-functional team: Blake Mattos, London Zhang, John Adams, Kyna Diggs, John Fawcett, Suzy Bates, Patrick Lu, Jenny Brecheisen, Ethan Park, Ashley Varela, Jake Anderson, Michelle Zatlyn, Matthew Prince, and John Graham-Cumming for all of their hard work and support!

Brand strategy & design systems expert graduated CCA, class of 2012. Specializes in complex tech brands. Portfolio: allati.co