Introduction
Twingate is an 8VC portfolio company that revolutionizes the cybersecurity space by building an alternative to VPNs. As a part of the 8VC Design fellowship program, I worked with the Product Design team at Twingate.
At Twingate, my projects focused on restructuring and reorganizing information to enhance user navigation, bridging gaps in the product and designing unobtrusive solutions that discourage users from forging or sharing sensitive information.
Project 1
To aim of the project was to revamp the documentation and guides page for the marketing website by introducing a more user-centric design approach.
This involved crafting a new 'Featured Guides' component that seamlessly integrated into the design system, focusing on presenting high-priority documents in a visually engaging and easy-to-navigate manner.
By simplifying the layout and incorporating intuitive visual cues that ensured that complex information was broken down into digestible formats, it made content not only more aesthetically pleasing but also improved the overall user experience in terms of accessibility and clarity.
1.1 — Twingate’s Documentation Website (Before)
The documentation website was extremely cluttered.
It had a sea of links, lacked text and information hierarchy to any extent and was difficult to navigate for users who may be coming to look for one particular guide / article.
This lack of structure (visual and information) was causing a decrease in user engagement and retention.
Using progressive disclosure to reduce cognitive overload by not overwhelming users all at once.
Visual indicators would also help in providing information in sizable chunks.
Humans are visual creatures, hence using thumbnails and icons would help make it easier to grasp information.
1.2 — Rejected variations of components for articles within the documentation site.
We presented the design prototype directly to 6 clients to gather data. Their feedback varied but was helpful in shaping early decisions.
By the 8th to 10th user, responses became consistent, helping us finalize the design.
By the 15th test, we partnered with sales engineers to identify the most viewed and most needed articles, making them easier to access without extra navigation.
1.3 — Striking a balance among Iterations during User Testing.
Solution
After designing and A/B testing multiple iterations, we were able to find the “Featured Guides” design ensures both a pleasant user experience and informative learning experience.
Placed at the top of the site, it highlights the most important articles for quick access.
Following the ‘Featured Guides’ section, articles are grouped by topic, using buttons with visual cues instead of long link lists, making navigation faster and easier.
Compared to the previous site version, retention increased significantly. There was also an overall reduction in average time users took to find key articles (navigation efficiency).
Solution
This project was a collaborative effort between Design, Sales & Engineering.
Sales helped us in decided the structure and hierarchy of articles, from most important and engaging to least. Engineering helped bring to life the prototype I created on Framer. Product Management helped us test out our prototype to see what works best for our users.
As a part of the newly designed components, I also created illustrated thumbnails for each of the featured articles, using components within Twingate’s library.
1.5 — Illustrated thumbnails for featured articles
Project 2
Users newly onboarded to teams using Twingate for access and policy management often encountered difficulties understanding and navigating the controls.
Device security controls for each policy were hidden in a separate tab, requiring multiple clicks for users to access basic information.
2.1 — Twingate’s Airflow Team access network
Currently, users can select policies from the Resource Details page via the left panel. However, there is no high-level overview of what each policy entails, which means users have to navigate to the "Policies" tab to access more detailed information.
This creates friction, especially when understanding the differences between resource policies and data loss prevention (DLP) policies. The goal was to make the overview or details of these policies more readily accessible without overwhelming users and also connecting the information provided on the Policies tab to that within the left panel.
2.2 — Rejected variations of preview / pop-over components
2.3 — Final version of preview / pop-over components
Outcome
Through multiple design iterations and user tests, I developed streamlined popover components that highlight key information for quick and effective user reference.
Following user testing, we identified that organizing policies by type (Resource vs. Data Loss Prevention) streamlined user navigation. To accommodate their differing access data, I designed specialized popovers for each policy type.
To support testing, I created high-fidelity Framer prototypes that dynamically integrated with a CMS to inherit real-time content.
2.4 — Finalized prototype of Policy pop-overs in the Team’s Network page.