Device Onboarding
B2B
SaaS
Onboarding
Dynamic Form
"On-The-Fly"
Background
Cynamics is a Cybersecurity Network Detection and Response solution, providing network visibility for networks of all sizes and architectures.
Role:
Feature Lead and UX Designer
the PROCESS
problem context
Problem Statement
Research Process
Research Insights
Research
defining success
Business Motivation
Key Principles
Standardizing Term.
Device Table Org.
User Flow
UI Screens
Design
retrospect
Next Steps
What Did I Learn
01: Problem Context
problem Statement
The existing "Add Device" process on the Cynamics platform requires users to navigate multiple tabs, each corresponding to a specific device type. This fragmented approach increases the number of clicks, caused unnecessary confusion, and disrupts the user experience, particularly for new users. Given Cynamics' unique selling point of enabling device onboarding in under five minutes with no hardware installation, the existing process hinders the company's promise of efficiency and simplicity. The goal was to streamline the "Add Device" experience to reduce friction and better align with user expectations for speed and ease.
Existing Screens
.png)
.png)
.png)
02: Defining Success
business motivation
A seamless onboarding process is central to Cynamics' promise of efficiency and simplicity. The existing "Add Device" process creates friction, risking user frustration and reduced adoption. By redesigning this feature, Cynamics can enhance customer satisfaction, strengthen its competitive edge, and deliver on its commitment to a fast, intuitive user experience.
key principles
Simplicity/ Efficiency
Streamline the process with a unified, intuitive interface that reduces steps, minimizes clicks, and enables onboarding to be completed in under five minutes
Clarity
Provide clear guidance and feedback at every step, eliminating confusion and ensuring users can confidently complete the process.
Flexibility
Create a system that adapts to user needs in real time, enabling users to perform dynamic actions seamlessly during the onboarding process. This ensures adjustments can be made without disrupting the overall workflow.
03: Research
Research process
-
Competitive Analysis: Investigated how leading cybersecurity platforms approached device onboarding to identify industry standards and user expectations for efficiency and simplicity.
-
Target User Interviews: Conducted in-depth interviews with new users and prospective customers to identify pain points during onboarding. Additionally, I participated in ongoing cyber analyst calls to ask specific users targeted questions, gathering actionable feedback to guide the redesign.
-
Stakeholder Collaboration: Engaged internal stakeholders, such as product managers, cyber analysts, and developers, to align the redesign with Cynamics' business goals and technical capabilities, ensuring the solution met both user and company needs.
Research insights
-
Clear Terminology: Users emphasized the need for straightforward, consistent language to reduce confusion, particularly for first-time users unfamiliar with technical jargon.
-
Quick and Simple Setup: Efficiency was a top priority, with users expecting the onboarding process to align with Cynamics' promise of setup in under five minutes. Reducing unnecessary steps and streamlining actions were critical.
-
Flexibility for On-the-Fly Actions: Users expressed the importance of being able to perform additional actions, such as configuring settings or reviewing device details, during the setup process without needing to exit or restart.
-
Simplified Device Information: Users highlighted the need for device details to be presented clearly and concisely within the onboarding interface. Having all relevant information readily accessible minimized confusion and sped up decision-making during the process.
04: Design
After identifying user pain points, I focused on simplifying both the "Add Device" flow and the device information table. This involved restructuring the process and terminology to ensure clarity and ease of use.
standardizing Terminology
To enhance clarity and usability, I collaborated with the Product Manager, CTO, and users to introduce standardized terms for device and collector types.
This update streamlined the device page, reducing it from four tabs to two—Devices and Collectors—creating a more intuitive and organized layout that simplifies navigation and improves the overall user experience.
device table organization
To simplify the device page in the dashboard, I created a comprehensive chart mapping all device types, their associated terminology, and the sections of the table they shared. Common elements were streamlined into a unified structure, while unique attributes were grouped under an "Additional Info" section. This approach reduced clutter and enhanced usability, making it easier for users to find and understand relevant information at a glance.
User Flow
To streamline the onboarding process, I consolidated all device types into a single unified form. Based on the selected device type—Firewall, Switch, or Cloud—the form dynamically adapts to reveal the specific options and details relevant to that device. This approach simplifies the flow by eliminating the need to navigate multiple forms for different device types.
Additionally, I introduced an "on-the-fly" feature within the Switch form. If a required collector does not already exist in the system, users can seamlessly add a new collector without leaving the form. This enhancement reduces interruptions and ensures a smoother, more efficient workflow.
.png)
final design
Add Firewall
The default form opens to the Firewall option, as this is typically the first and most common device users add to the dashboard. This ensures a smoother and more intuitive onboarding experience.
.png)
Add Switch
Selecting "Add Switch" dynamically updates the form to display fields specific to Switch setup
.png)
Add Cloud
Selecting "Add Cloud Device" dynamically updates the form to show Cloud-specific details
.png)
Add Collector "On the Fly"
Within the Switch form, users can directly add a new collector on the fly. The form dynamically transitions to the Add Collector form and seamlessly returns to the Add Switch form once the collector is added, ensuring a smooth and efficient workflow.
​
This functionality set the foundation for implementing other on-the-fly actions across the dashboard, further enhancing flexibility and user efficiency.
.png)
.png)
Devices Table
Streamlined with just two tabs—Devices and Collectors—consolidating all relevant information. Any unique details are organized under the "Additional Info" section for clarity and ease of access.
Before
.png)
After
.png)
05: Retrospect
next steps
Reflecting on the project's outcomes, there are additional steps and refinements to further enhance the user experience:
​​
-
Explore On-the-Fly Features: Investigate opportunities to implement additional on-the-fly functionality across other areas of the dashboard, enhancing user flexibility and efficiency.
-
Refine Table UI: Simplify the table interface by making actions appear only on hover, reducing visual clutter and creating a cleaner, more focused layout.
-
Improve Error Messaging: Refine error messages to provide clearer, more actionable feedback when issues arise during device or collector setup.
what did I learn?
This project provided valuable opportunities for growth and learning, both in terms of design skills and collaboration. Here are the key takeaways that shaped my approach and understanding:​
​
-
Importance of Collaboration: Working closely with the Product Manager, CTO, and users showed how cross-functional collaboration strengthens decision-making and design outcomes.
-
Power of Standardization: Standardizing terminology and processes not only simplifies the user experience but also aligns teams and reduces miscommunication.
-
Balancing Functionality and Usability: Simplifying the interface without sacrificing critical functionality is a delicate balance that requires thoughtful prioritization.
-
Simplicity Enhances Efficiency: Streamlining features like consolidating tabs and introducing "on-the-fly" actions demonstrated how simplicity in design can dramatically improve usability and user satisfaction.
See more of my work
.png)