Today, we’re announcing a new feature within the Teams Dash. We called it “Home”. We created Home with a simple goal in mind: design an adaptive and informative landing page where users can see a round-up of their environment.

In this last post of our series, we’ll show, rather than tell, how we collaborated as a team that rows in the same direction and towards the same goal — to create a great user experience.

In this blog post, we’ll walk you through your new Teams Home by calling out a few of the guiding principles we had in mind as we designed it. Transparency, adaptiveness, guidance and warmth aren’t only foundational words in the Cloudflare for Teams product principles — they’re part of our day-to-day brainstorming and discussion around user experience.

Here’s how the Teams Home reflects these principles.

What you’ll find in the new Teams Home is a single space to view your network and applications traffic. We wanted to build an experience that allows users to get a comprehensive view of all things protected by Teams — a single pane of glass that’s always available, and that users can quickly pull up to spot any anomalies in their network traffic. Or simply to keep it under control.

We’ve also made it simpler for you to keep an eye on user count, and added a direct link to our plans page should you need to make any changes to the subscription you’ve chosen.

The Teams Home brings all users signals into one view, threading together concepts that were once sparse across the Dash.

We called it “Home,” because we wanted it to feel like a space you visit each day that brings you clarity and peace of mind. Too often, security products can feel clinical and stark, and we wanted to avoid that. Through the use of color theory and language analysis, we actively worked to convey a feeling of approachability, while still keeping the Dash functional and straightforward.

When writing for UX, we need to be considerate of a user’s emotions as they follow a given flow in our product. Some users may appreciate certain elements as they explore the dash on a not-so-busy day; other users may not if their environment is at-risk and they simply need to identify what’s wrong, fast.

With this in mind, we’ve sprinkled bits of conversational, friendly copy where appropriate. For example, the biggest textual element in the Home page is a greeting — consistent with the header in our Quick Start page (“Welcome aboard!”), the tone is designed to be cheerful and welcoming.

Another subtle example of this is our loading screen. Nobody likes to wait, so we wanted to build this interaction for our users as well. With an animation that brings in elements representative of Cloudflare’s network, and alternating lines of copy that refer to the semantics of building and cleaning a physical home, we wanted to add a quirky touch where it doesn’t interfere with what really matters.

The Teams family has grown and expanded since its inception, and we wanted to highlight complementary features that are a key part of our user journeys. In the footer, you’ll find easy access to things like Cloudflare Radar, the Teams Help page, and a quick-start guide packed with simple starter packs. These additional features help craft a holistic picture of the Teams story.

In our product principles, we give great importance to ease of use. And we, as a team, have an ambitious goal in mind — make Zero Trust security principles approachable for everyone.

To us, a product is easy to use when it guides users to success through clear paths in the interface. This is why we’ve pre-established some of these paths — we want to help our users take their first steps within Teams. With just a few clicks from the Home and Quick Start pages, users who signed up primarily for Secure Web Gateway functionalities can add Zero Trust rules in front of their applications, and vice-versa.

We’ve also incorporated an entirely new approach to some of our empty states. Instead of just telling our users there’s no data to show, we help them take actions to start populating those empty charts.

As threats on the Internet evolve, so will the needs of our users. Throughout this process, we thought critically about how the Teams Home could be flexible in nature, and scale was a key priority. We’ll continue to ship new features — and when we do, those features will have a place in the Teams Home, in large part due to the modular approach we adopted. Moving forward, we will continue to add more data signals into the Teams Home and aim to put more control into your hands to customize your unique Home experience. We’re also integrating easier ways for you to give us feedback on the overall experience and are excited to learn more from our users.

The Teams Home is available today for all users on the Teams Dash. If you don’t have a Cloudflare for Teams account yet, click here to get started.

You’ll know you’re Home when you see the Welcome Page.

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!