About 5% of the Internet’s traffic uses the CloudFlare network to be fast, safe, and reliable. Their expertise makes them a leader in the field, but their website didn’t reflect the depth of the company’s knowledge. CloudFlare wanted to overhaul their entire website to improve the usability and lay the foundation for a site that could be updated over the next 2–3 years.
Goals for the project included:
     • Update CloudFlare’s brand to reinforce them as intelligent thought leaders
     • Improve the self-serve eCommerce funnel for account sign-ups, with an
       emphasis on the Pro and Business Plans
     • Cross-pollinate content and optimize for SEO
     • Improve consistency and usability across the entire site

On this project, I was the lead UX designer and worked closely with our creative director, senior design, and account manager. Our team ran in an agile workflow and collaborated heavily with the CloudFlare team throughout design and development. I worked on this project for about six months, from discovery to site launch.
Discovery and Research
The UX process began with identifying the primary user groups through a combination of stakeholder interviews and user interviews and translating those into personas. The personas included:
     • Bloggers and other users with minimal technical experience
     • C-level executives and private investors
     • Engineers with highly technical expertise
The three very distinct user groups presented the unique challenge of communicating to very different audiences. We needed to create a nuanced site experience that would appeal to a less technical user without alienating CloudFlare’s dedicated user base of highly technical engineers.
To vet our navigation designs, I conducted several rounds of first-click testing and usability testing. We conducted two preliminary first-click tests to gather data to inform the design process. After analyzing the data,
we iterated on each navigation style, resulting in the 4 versions below. We tested each version with the same six questions with 12 users, both technical and non-technical.
We discovered that technical users (like engineers) want to quickly reach the information they need and will bypass all marketing info. They are frustrated when navigation items are too general. They have specific goals and want to achieve those goals efficiently. Non-technical users (like executives and bloggers) are overwhelmed by technical information and don’t know where to begin clicking. They need to be guided and educated along the path to purchase.
Key findings from the testing are as follows:
All users were confused by the proposed marketing product pillars, though technical users guessed correctly slightly more often. When products were listed under multiple categories, users expressed confusion: “What’s the difference? Do I need to look at both? Which one will fix my problem?” 
Sign Up and Plans had two very distinct meanings to users. Sign Up was interpreted as a commitment: users would click this when they had made a decision and were ready to purchase and/or create an account. The Plans category was seen as an informative page where users could compare their options and see the full details of each plan. 
Learn was understood to be a resource for high-level learning for a general audience, though the results indicated it may also be interpreted as a general resource center. 
Not a Developer? performed about as well as Learn, though users were hesitant to click on something if they don’t know where it would take them (no information scent). Users thought it would include basic information about why they should buy CloudFlare.
Users expected Support would be the same as FAQs, a place to get general knowledge. Users expressed that they wanted to be able to search: “just give me what I want”
Design and Ideation
The design phase started with low-fidelity wireframes for the home page and global navigation. Early on, our internal team established a routine of holding a daily standup followed by a brainstorming session. This daily meeting helped us collaborate and stay in sync as we developed ideas based on the client’s requirements. We iterated in one-week sprint cycles, showing the CloudFlare team work on an almost daily basis. This feedback cycle allowed me rapidly iterate on wireframes, gradually scaling them from low- to high-fidelity and seamlessly transitioning into visual design.
As the project moved into development, I worked with CloudFlare’s lead engineer to create a style guide for form field interactions. This comprehensive document outlined all form functionality, from validation to responsive guidelines. This exercise greatly helped improve the consistency and usability of the website, one of the project’s key goals. Because this deliverable provided great value, I recommended that Contravent pitch style guides as a key deliverable for future projects. Our team continued to work closely with CloudFlare team as the site moved through development and into QA.
Project Status
The website was launched in September 2016. Take a look at

More projects

Back to Top