— COMPANY
Teleport
— ROLE
V.P. UX & Design
Product Design
Visual Design
Branding
— DATE
2018-2022
I joined Teleport full time in 2018 to help change the security space for infrastructure access.
At its core, companies use Teleport to create secure and compliant access to their infrastructure across their entire organization. Securing an entire organization’s infrastructure is generally daunting and often and impossible for large companies to implement themselves. Teleport provides a platform to easily secure infrastructure along with incredible tools to manage all levels of access.
ONBOARDING
Traditionally Teleport was installed manually by the security or infrastructure team at large organizations. This process is generally preferred for large companies however it often requires additional resources and time to properly setup the platform internally.
We launched Teleport Cloud to allow existing and potential customers a lightning quick way to implement Teleport with little to no setup. This onboard flow required a way for users to create accounts, spin up a new Teleport instance, and authenticate accounts for employees once so they could gain secure access to their infrastructure. We needed support for Single Sign On, Two Factor Auth, and Hardware Keys in order to support authentication practices for different organizations.
The process of spinning up a new server and creating a unique Teleport account would take anywhere from 1-10 minutes (although it was generally fast). For this reason I found it essential to create an experience that incorporated a few essential features:
1. Provide a user with clear messaging notifying them of this process
2. Provide realtime feedback on what part of the process the user was currently in.
3. Allow the user to get notified when the process was completed so they didn’t have to keep this screen up or wait for the installation.
4. Create an exciting and aesthetically please experience to create interest and excitement while waiting for the process to complete.
The account create page was simple and easy to complete. Users simply needed to choose a domain and enter payment information to get started. Since this screen is key to onboarding, I added answers to commonly asked questions that I gathered while getting feedback from users about the onboarding process.
When creating a new account the process could take 1-10 minutes. I found it essential to provide the user with feedback to indicate exactly where they were in the process along with the ability to leave and receive a notification when the process was completed.
OLD DESIGN
The original dashboard was a very simple off the shelf template that didn’t reflect the features available in the product and was very difficult to configure given the limited or non-existent set of UI components. The flat navigation (1 level) didn’t allow us to properly organize content and would not scale to support our growing suite of products. There was no emphasis on branding or user experience. The team was struggling to add functionality and features to this framework.
NEW NAVIGATION
Navigation is the foundation of the entire application. Navigation not only tells you where you are, it tells you what is available in the application. It’s a living table of contents that needs to be simple and easy to use.
Our previous navigation was one level and didn’t accurately represent our information architecture nor could it support it properly.
I decided to create a side navigation to save vertical real-estate and allow for the expansion of products. Each main section had the ability to expand over time to include sub sections and even tabs within those sub sections offering three distinct levels of navigation while still feeling very simple an easy to use.
The new navigation was not only easy for our customers to use, it allowed us to continually expand our product offering with the addition of three new products (Application Access, Database Access, and Desktop Access).
NEW DESIGN FRAMEWORK
We started from scratch to create an entirely new design framework. The design system I created focused on supporting our product needs and creating a consistent set of components that could be reused through the application.
It was important that our users could feel confident exploring the entire of the dashboard and easily understand the how the design components worked across the Teleport dashboard. To accomplish this we needed to create custom components to support the functionality for clusters, servers, databases, sessions, audit logs, permission requests and much more.
Below is a small sample of different product and feature experiences created for the new Teleport Dashboard.
