Cylera Design System
I developed a scalable design system that is currently being utilized across multiple products within the Cylera brand. The objective was to establish a shared design language that would elevate the user’s overall experience.
Role
- UX/UI Design
- Design System Management and Documentation
- Accessibility Design
Company
- Cylera
Team Credits
- Harmeet Dhingra - VP of Product Engineering
- David Braylark - Lead UX / UI / Product Designer
- Hunter Horby - Sr. Front End Engineer
The problem
The Cylera legacy application is facing tough competition due to its outdated user interface. Users are accustomed to more advanced features offered by competitors that are lacking in the Cylera application. Although the existing app was initially popular, it was created without the assistance of a professional product designer. With the implementation of a design system, there is an opportunity to enhance the application’s key workflows and improve its overall functionality.
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.
Foundations
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.
What’s next?
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.