B2B Security Complex System:
From Concept to a Functional & User-Centric System
Before
.png)
After
.png)
From the initial concept I got to the concept following my design and planning process
Project Challenges
When I joined the project, the company was in its early development phase, evolving alongside the design process. This dynamic environment required frequent adjustments to data presentation, hierarchies, and components. Our agile approach allowed us to adapt to the company’s needs and manage numerous changes effectively.
Given the substantial amount of information on each page, we focused on creating an intuitive information architecture. This ensured that users could easily navigate large volumes of data. Ultimately, we prioritized the data to build a clear hierarchy and content structure on the pages.
What?
Zenity was a startup during its early days, with their design still in its conceptual phase, initially defined by the CEO. In this project, I showcase how this initial concept evolved into a functional, user-friendly design that maintains a consistent design language while effectively presenting complex information to the user.
Dashboard Evolution
The initial sketch
.png)
.png)
The CEO’s initial concept, presented as slides, was moved to Figma for research and refinement into a more functional, user-friendly experience.
With more time for research, I explored competitors, as well as the domains of security and dashboards. The interface was refined with eye-pleasing colors to highlight key information, alongside updated logos, colors, and icons for a cohesive design.
.png)
.png)
I updated the navigation and background colors, and replaced the top-left data with KPIs at the top.
The final dashboard features refined brand colors and icons that support the data. The layout provides easy access to information with clear divisions for a seamless user experience.
.png)
Dashboard Evolution
The initial sketch
The CEO’s initial concept, presented as slides, was moved to Figma for research and refinement into a more functional, user-friendly experience.
With more time for research, I explored competitors, as well as the domains of security and dashboards. The interface was refined with eye-pleasing colors to highlight key information, alongside updated logos, colors, and icons for a cohesive design.
I updated the navigation and background colors, and replaced the top-left data with KPIs at the top.
The final dashboard features refined brand colors and icons that support the data. The layout provides easy access to information with clear divisions for a seamless user experience.
What Else?
After completing the dashboard, I shifted my focus to the Violation page, researching data visualization to effectively present this critical and sensitive information. I incorporated tags like 'High,' 'Medium,' and 'Low' to highlight severity levels at a glance. Additionally, I designed a side panel that opens upon clicking a row, displaying detailed vulnerability data. This feature enables users to easily copy and share the information with relevant teams for prompt action when needed.
The Violation page
.png)
This table displays all identified user risks, with prominently highlighted priority tags (High, Medium, Low) to clearly indicate their severity.
Clicking on a row opens a side panel containing all details related to that specific violation within the extension.
.png)
.png)
Clicking on a row opens a side panel containing all details related to that specific violation within the extension.
Understanding the Users
The main users are CISOs (Chief Information Security Officers).
Its key features:
Strong technical background
Proficient in relevant concepts and content
Innovators
Held diverse roles in security
Think strategically
Metric-Minded
Held diverse roles in security
Innovators
Metric-Minded
Proficient in relevant content
Held diverse roles in security
Think strategically
Check out More of my Projects
Check out More of my Projects
Overall Impact
After the CEO's presentation became a design in Figma, it evolved into a cohesive design language with functional interfaces and ready-to-use components. This groundwork saved hours of work for the company's first designer, enabling them to quickly build a design system that influenced future designs even after my departure.