Bite-size Summary

Design a complementary dashboard interface for the existing tunnel command line interface.

I distilled complex tunnel technologies and transformed the tunnel creation steps into a simple and elegant interface; designed and delivered the 0 to 1 tunnel GUI experience.

Result

"I absolutely love it! It’s so easy to see all the important info in one place!"
"This is amazing"

Task efficiency
5x of task efficiency

A 15 second commercial on Tunnels

Cloudflare Tunnel is a private connection between your web server and Cloudflare. You can think of CloudflareTunnel as a virtual P.O. box. It lets someone send you packets without knowing your real address. In other words, it’s a private link. Only Cloudflare can see the server and communicate with it, and for the rest of the internet, it’s unroutable, as if the server is not even there.

With Tunnel, your origin server no longer needs to allow any incoming traffic. In fact, it doesn’t even need a publicly reachable IP address. This is significant because that means that no one can simply bypass Cloudflare to reach your resource either.

User pain points

Admins have no complementary dashboard UI to understand key tunnel metrics.

Instead, users have to use the cloudflared command line interface tool to obtain any diagnostic or telemetry on their tunnels.

- "I manage too many tunnels to do this through the cfd CLI tool"
- "How can I get a high-level view of all my tunnels at once?"
- "How can I see how many Tunnels I have active?"
- "How can I tell if one of my Tunnels is down?"

As you can see, for users who have several tunnels, checking on their tunnel connections from a command line interface simply became impossible.

Requirements & limitations gathering

Understand the problem with a mindful eye for tech limitation and scope

I worked with my PM to gather requirements from the engineering team, and made sure they were reflected in the design.

Co-working hour with PM to shape the project vision

The project timeline was tight and I was told the design needed to be done in 2 weeks. After many discussions on PRD, I hosted a quick working hour with the PM to make sure the mvp features are prioritized.

Internal feedback from SEs & SMEs

  • To increase auditability and debugging capability, we should inform users of their tunnel birth date, and how to troubleshoot when their daemon is outdated.
  • We should allow users to get started without CLI.
  • We need to provide a way to show multiple connectors for power users, without sacrificing tunnel status visibility.

Quick iterations to confirm tech constraints, project scope, and user needs

  • This UI won’t show the disconnected connectors
  • Users need to see last 4 digits of the tunnel ID
  • Expired cloudflared daemon warning should be front and center
  • The tunnel status is great but the dream scenario is having high level tunnel status on the page

So, what if a customer doesn’t have a tunnel?

Initially we tried to build to solve this very straightforward yet pressing issue - let customers observe their tunnel health status. And this tunnel page will live on Teams dash as a tab. So, what if a customer doesn’t have a tunnel? Are they able to see this page? What do we show those customers when they land on this tunnel page for the first time? Do we simply send them away to read several pages of dev doc to learn how to create a tunnel, or do we help them to create a tunnel in dash?

We strive to make network security products ridiculously easy. Non-tech savvy people should be able to use our product as well. Therefore, I put in a lot extra effort to make sure the first time flow is easy and tech-feasible.

Design Highlights

Tunnel status observability is our bread and butter

Scalable UI pattern within constraints

Since we have a majority of users with only a few connectors and a few power users who potentially have many connectors, allowing to show all connectors on another page provides the flexibility for both types of users.

We also made sure the daemon expiration is front and center.

Transformed complex tunnel creation process into easy-to-follow onboarding steps

Simplified 1123 words of tutorial into a 7-step, sub 3-minute wizard. Increased task efficiency 5x.

Impact

"I absolutely love it! It’s so easy to see all the important info in one place!"

The new design increased task efficiency 5x and simplified 1123 words of tutorial into a 7-step, sub 3-minute wizard.

Task efficiency
5x
Tutorial word count
80%