Cylera Command Platform V2
Cylera is a company that specializes in healthcare IoT cybersecurity and intelligence. Their patented technology allows for the detection of network vulnerabilities by scanning and analyzing the digital twins of devices connected to the network. Despite their cutting-edge technology, their challenge was to create a digital solution that could compete with top competitors while also improving user workflows and overall experience.
Company
- Cylera
Role
- UX/UI Design
- Design System Management and Documentation
- Accessibility Design
Team Credits
- Harmeet Dhingra - VP of Product Engineering
- David Braylark - Lead UX / UI / Product Designer
- Hunter Horby - Sr. Front End Engineer
Project Overview
To gain insight into my role and approach to the project, please refer to the Figma presentation provided. It details my UX process and its successful application in addressing the challenges. You may navigate the pages by clicking on the screen or using your keyboard keys. For optimal viewing, I recommend utilizing the full-screen button available in Figma.
What we found:
- Theme is monochromatic and hard to read.
- Duplication of common components.
- Inconsistencies across content and patterns.
- Slow loading of content and data.
- Unbalanced content layout on the pages.
The Cylera legacy application is facing stiff competition due to its outdated user interface. Competitors have more advanced features that users have become accustomed to, which are lacking in the Cylera application. Although the app was once popular, it was created without the assistance of a professional product designer. However, with the implementation of a design system, there is an opportunity to improve the application’s key workflows and overall functionality. Most engineers work from a security operations center (SOC) and struggle with using the application because the room is too dark. Users have requested a dark theme option, and research has shown that an insights-driven dashboard would provide significant value to users.
Understand
As I was not well-versed in the cybersecurity market, my initial approach was to acquaint myself with the product in order to comprehend the issue at hand. To achieve this, I conducted in-house meetings with our founders, sales team, marketing, and engineering team. The results of these meetings revealed that although the original app was successful, there was still room for improvement.
As part of my research, I observed how users interacted with the application to gain insights into their preferences and areas where the app may be less efficient. From these conversations, I was able to produce the following deliverables:
- User Personas
- Stakeholder Interview Guides
- Card Sorting Activity
- Journey Map
- Competitor Analysis
Ideate
To guarantee the system’s success, it was crucial to maintain consistency across all components used throughout the application. The first step was conducting audits of all products to create an inventory list of existing components. Working with stakeholders, we also reviewed the product’s future goals to catalog any necessary future components. Our foundations included supporting brand logos, grid systems, spacing scales, typography scales, color systems, accessibility, and interactive language.
Refine
To guarantee the system’s success, it was crucial to maintain consistency across all components used throughout the application. The first step was conducting audits of all products to create an inventory list of existing components. Working with stakeholders, we also reviewed the product’s future goals to catalog any necessary future components. Our foundations included supporting brand logos, grid systems, spacing scales, typography scales, color systems, accessibility, and interactive language.
Build
Design systems are similar to living organisms in that they are complex and constantly evolving. The information I have presented on this page only scratches the surface of what was involved in constructing the entire system. Other critical components of the system include the following:
-
Light & Dark Themes
-
Brand Guidelines
-
Accessibility
-
Component Library
-
Best Practices
-
Front End Development
Looking back at our success and opportunities to improve, we learned some valuable lessons:
- Maintaining design systems is an ongoing process that requires a committed team to ensure its growth and upkeep. The structure of the design system made it effortless to make adjustments and seamlessly integrate them into our development library.
- I proposed the idea of utilizing tools like Abstract or Zeplin to simplify version tracking for design. However, as a team, we ultimately opted to host our design iterations within Figma for smoother developer handoff. Unfortunately, this made it challenging to maintain organization in the file due to the simultaneous iterations of the designs and development of the design system.
After being completed, the Cylera Design System was successfully integrated into two of the company’s main products. Observing users, it was found that they preferred the experience and were able to complete tasks more efficiently.
Success usually comes to those who are too busy looking for it.