Cyberight

I helped Cyberight design and launch ZTMesh, a mesh VPN solution that simplifies complex network configurations for IT administrators.
WHAT I DID
  • Research
  • Design System
  • UX Design
  • UI Design
  • Prototyping

01

Role
I joined Cyberight in 2022, a startup with 35 team members. I worked closely with my design manager to research, design, prototype, and validate our developed solutions.
Developing a technical product from scratch posed many challenges and ambiguities. However, our unwavering collaboration enabled us to move swiftly and create a solution we were all proud of. text inside of a div block.
Accomplishments
We successfully launched a VPN solution capable of supporting large enterprises after two years of development.Within the design team, we established efficient processes that proved highly effective.

Our Jira design team Kanban board workflows are transparent and adaptable, accommodating our agility in both design and development.

Furthermore, we developed a framework for design documentation that is scalable and meets all stakeholders’ needs. Additionally, we implemented a design system that can evolve alongside new designs, ensuring consistency and efficiency in our development efforts.

02

Final Design
I designed a complete VPN Management solution called ZTMesh. The solution includes a React web application, a macOS and Windows native app, an iOS and Android app, and a ZenDesk Help Center.

The web application portal is designed for IT administrators, allowing them to set up and manage their organization’s VPN configurations and access strategies.
macOS and Windows Native App
I designed an macOS and Windows VPN apps for employees to connect to their organization’s VPN. These desktop apps enable users to secure their devices and access resources.
iOS and Android Native App
I designed the mobile applications. These apps enable employees to secure their mobile devices and access resources once their device is connected to their organization’s VPN.
Help Center with ZenDesk
We utilize ZenDesk to manage our Help Center, where customers can access how-to guides, help articles, and submit request tickets.I selected and customized our ZenDesk template to align with the core product. Additionally, I assisted our copywriter in drafting help articles to be published on ZenDesk.

03

The Problem
Traditional Virtual Private Network (VPN) SaaS solutions often lack the level of security required in today's world of constant cyber attacks. VPN management tools can be challenging to configure and monitor network activities, making it difficult for IT administrators to stay ahead of vulnerabilities.
Trust
Traditional VPN solutions are not built on a high level of authentication and access principles.

We designed ZTMesh based on the three Zero Trust Principles: verify explicitly, use least-privilege access, and assume breach.
Vulnerable End-Points
Unlike perimeter-based security measures, ZTMesh enhances secure networking by providing robust endpoint protection to individual devices.
High Hardware Cost
Traditional VPN requires companies to purchase a lot of hardware for initial setup.  The mesh VPN network model allows us to creates a highly secure cybersecurity mesh without the need for additional hardware, offering enhanced security at a lower cost

04

Approach
I regularly met with our CTO and TPM to discuss product roadmaps, evaluate the goals of new features, and validate those that were developed.

Additionally, I frequently connected with the DevOps team to understand the capabilities of our APIs better, enabling more informed discussions with the front-end developers.
Research
This project was more technical than any previous one I had worked on. Every feature I designed required thorough research to understand its functions and purpose.

Fortunately, our team had a few subject matter experts internally whom I could consult to gather insights. Additionally, I conducted extensive research by reading documentation, auditing direct competitors' tools, and watching training videos online.
‍
Collaboration
Each day after our morning stand-up, the three front-end developers and I synced up to review and verify the accuracy of the designs and their implementation. We also utilized this time to discuss opportunities for improvement.

05

Design System
I wanted a more efficient way to create new designs, document them, manage assets, utilize components, and hand off our designs to developers. After much trial and error, we established a framework that worked well. My Design System is separated into four Figma files.
Styles Guide
When setting up the Design System, I aimed to incorporate elements that would maintain brand unity. Our UI is designed with a dark color palette to distinguish our product from competitors and minimize eye strain.

The first file manages the color palette, typography, and spacing, utilizing Figma local variables as tokens with unique IDs.
Icons
The second file organizes our entire icons catalog. The icons that are in use are placed into a frame. Then, we leverage a Figma API that allows our developers to pull the icons into our GitHub repository on a set schedule.
Strings
The third file serves as our master common string file, where we utilize Figma local variables to manage the strings and localization. Additionally, if a string is unique to a specific feature, it is stored in a feature strings file.
Reusable Components
The fourth file is where we create and publish our reusable components. These components utilize the tokens from the first three files, ensuring consistency across our designs.

06

Challenges
Information Architecture
In our SaaS tool, the design revolves around reviewing data and making configurations. Every page or type of data can be edited. The information architecture solution I propose is to keep the detail and edit functionalities as two separate pages.

Initially, the data will be presented on a details page with a single edit button. To edit, the user will be routed to the edit page.This approach works well in our tool because it reduces cognitive overload, simplifies the code, and doesn’t display content that is not editable, allowing the user to focus on what is.
Unexpected Events
Dealing with edge cases, unexpected events, different types of errors, and various UI states is common. A single page often interacts with multiple APIs.To better handle and provide our users with the most accurate feedback, the developers and I spend several sprints testing and documenting all the scenarios.

I then collaborate with our copywriter to craft copy and messages that provide a high level of clarity, consistency, and are actionable. This ensures that users are well-informed and can take appropriate actions based on the feedback provided.

07

Solution
The final solution is an easy-to-navigate VPN Management Portal. The left drawer navigation menu lists all available features, ordered by most to least common need.
Design of the Portal
Upon signing into the portal, the IT admin is presented with a dashboard containing high-level status about the network and offers quick actions that the admin can initiate.Most data is organized into table view lists first, and from there, each document has a dedicated details page. The details page features a two-column layout, with the left column displaying metadata directly related to the selected document, while the right column presents associated information. This layout provides a clear and intuitive way for IT admins to access and manage network data efficiently.
Design Documentation
I separate each feature into its own Figma file to keep the file size light and to create local components for that specific feature's UI. Each functionality is documented within a section. At the beginning of every section, I document the API’s payload, the purpose of the feature, and instructions for the front-end devs to implement. Additionally, it tracks my design status and links to Jira’s tickets and additional technical specs documented in Confluence. This structured approach ensures clarity and consistency in our design and development process.

08

Impact
Process
Due to the small size of our organization, every design and development effort requires critical prioritization and costing considerations. We cannot reduce the work of setting up the infrastructure and product needed to roll out a VPN solution.
My manager and I had to refine every process we engage in to make it more efficient. This includes improving our communication in JIRA and during stakeholder meetings to reduce insufficient use of time.

We made improvements to how we document our designs to provide clarity, reducing assumptions and issues during sprint planning and development.
Business
I helped establish a collaboration and validation process with our front-end development team to reduce bugs and rework.
Product
By questioning standard practices and task flows, and seeking a better way of doing things, we were able to create a VPN solution that minimized most of the complexity associated with VPN tools.
Our ZTMesh workflow for creating an ACL (access control list) is unlike that of any competitors. In other solutions, creating an ACL is complicated and requires IT admins to write scripts to structure the rules. However, in ZTMesh, the admin doesn’t need to code, thanks to our innovative visual configuration approach.

09

Colleagues
Ethan’s approach is holistic; he possesses a robust understanding of the full stack, which breathes life into his designs. His communication skills are exemplary, ensuring clarity and efficiency in all interactions.
Sri Kalyan Challa - Front End Developer
Always accurate, always open to suggestions and great with follow up. When it came to timeliness, Ethan was always ahead of the game!
Scott Buratt - Sr. Technical Project Manager
About
Resume