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.

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:

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.