The Teams Dashboard: The Design Story

Cloudflare for Teams was first announced in January 2020, along with our acquisition of S2 Systems. It was an exciting day for everyone at Cloudflare, but especially my team, who was in charge of building Teams.

Here is the story of how we took Cloudflare for Teams from initial concepts, to an MVP, to now a comprehensive security platform that secures networks, users, devices, and applications.

When I joined Cloudflare in April 2019, I was excited to have an impact on helping to build a better Internet. I was fascinated by the intricacy of how the Internet works, and wanted to untangle that complexity to provide our users with the best in class experience, with a simple and concise design approach. Little did I know that I would have the opportunity to launch a product that would impact thousands during a time when people need the Internet the most.

We started conceptualizing what would eventually become Cloudflare for Teams in July 2019, with a big vision and a small team. Coming off the excitement of 1.1.1.1, the team began thinking about how to bring this functionality to small, medium, and enterprise businesses. Our goal was to bring protection to anyone and everyone by extending the same security technology the app offered. After months of brainstorming sessions, design iterations, and testing, we had an MVP version of Teams: offering customers a way to protect their network from security threats on the web using DNS filtering.

But we didn’t stop there. Access had been helping customers secure their applications using a zero-trust security model since 2018. This functionality existed in Cloudflare’s core dashboard, but was constrained to a site-based model, while customers used Access as an account-based platform. This led to lots of confusion for many of our users. Bringing this functionality into Teams felt like a natural fit — Access would act as a bouncer standing in front of the door, checking identity, while Gateway would be a bodyguard, keeping your team safe as you navigate the Internet.

Bringing existing functionality into a new experience is no easy feat. The largest question to answer was: how can these two powerful security technologies not only cohabitate, but complement each other? We started by taking a step back and auditing what user problem we were solving with each piece of Access. This helped us understand where Access would fit under the Teams family, and how it could best integrate with Gateway.

From there, visual and design iterations began. Using the existing patterns and styles we created in Teams, we modified the look and feel of Access. However, not all of these changes were cosmetic. We focused on improved task flow, accessibility, and creating a seamless user experience.

Little did we know that it was just the beginning of what Teams would become.

During Zero Trust week, we introduced three new capabilities into Teams. We expanded on our DNS filtering capability by adding in L7 inspection of traffic for threats that hide below the surface. We launched the Teams WARP client, extending the same security Teams offers to our end-users’ corporate devices. And lastly, we expanded our Zero Trust offering to support SaaS applications, giving users a consistent level of visibility and security across all of their applications.

So what does massive product growth look like behind the scenes, from a design perspective? Rapid iteration, testing, and lots of collaboration with Engineering. A key goal was to design with scale in mind. How will these experiences grow in six months, one year, or three years? Keeping this at the forefront of how we design means integrating UX patterns that can account for that scale and growth.

While Teams as a product was growing, I was also focused on hiring my own team to design the future of our product. The vision I had for Teams was greater than what I could accomplish on my own. Being strategic about how and where I was hiring was a key goal of mine — how could I enable each designer to be successful, while also contributing to the growth and success of Teams? By November 2020, I had hired three designers to partner with me on crafting the rest of the Teams story.

This brings us to the end of 2020, both a tumultuous for all and traumatic year for many. Through it all, I grew two things that are near and dear to my heart: my own design team and the Teams product. I began to think about where both of them would be in 1-3 years, and how a deep partnership between Product, Design, and Engineering could help get us there.

Being strategic about our product growth would help us with three things:

• Collaboration. Strategic thinking helps the entire team aim for a common goal, which means working together, as opposed to developing a myopic view of the outcome and working separately.

• Efficiency. A shared vision gets us both quality and velocity. If everyone's rowing in the same direction, we get there quicker.

• Longevity. Lays the foundation for a scalable product that grows to include additional experiences over time.

Getting the opportunity to build a product from the ground up has been exciting, rewarding, challenging, and thrilling all at once. I’m proud of what we have been able to accomplish, and can’t wait to share with y’all what we’ve been working on over the past few months. Stay tuned!