AppSec.Hub
AppSec.Hub is a platform for managing DevSecOps practices in the software development process. AppSec.Hub - allows to quickly integrate application information security practices into the DevOps process
and implement DevSecOps
Intro
What it’s all about
DevSecOps integrates security into development, fostering collaboration
and automation for secure, rapid software delivery
and automation for secure, rapid software delivery
Team
14 cyber warriors
I was onboarded into the AppSec.Hub team as a UI designer. I collaborated with CTO/Product Owner, PM, DevLead
and software engineers, QA and technical writer, and a team of three implementation engineers (Security Champion + two IT security engineers)
and software engineers, QA and technical writer, and a team of three implementation engineers (Security Champion + two IT security engineers)
Task
The main task was to streamline product usage, ensuring the interface adhered
to global standards and best practices
Personal
Lack of knowledge about DevSecOps
No documented user scenarios
Stakeholders are
system-oriented
No understanding of how
to evaluate results
Legacy
Starting to familiarize myself with the product and its legacy,
I encountered numerous issues, both professional and personal
I encountered numerous issues, both professional and personal
What most people call hell, he calls home
Professional
There's not even a UI kit for the product
No documented user scenarios
Every user flow has gaps & blocks
The interface lacks consistency badly
There is no clear and transparent research, design and development process
Approach
I’ve started with analyzing the situation - identifying actionable steps that can be taken immediately alongside those that require gradual elevation of understanding about the business, product, and environment
The outcome was the division of work into two streams
Direct Actions
Rectification of existing UI/UX issues
+ interviewing stakeholders
and implementation team
(Here and Now)
+ interviewing stakeholders
and implementation team
(Here and Now)
Indirect Actions
Studying DevSecOps & cybersecurity tools + formulating hypotheses and user stories to enhance UI/UX
(Easy does It)
(Easy does It)
Direct Actions
The work done directly with the product
01
UI Audit
Objects, actions, layouts
Design System creation started
Redesigned main interface element - Table
Several important objects such as Pipelines, Scans, Rules have been brought to the top level of the interface
02
UX Research
Interviews & surveys
Roles, pains & flows
Role based CJM’s
Personas and contexts
Indirect Actions
The work that was conducted under the hood
01
Self-study
Videos, tutorials, interviews
Business & process understanding
Success metrics concept
02
Benchmarking
Best practices and references
Reference board
Wireframes & lo-fi designs
Redesign concept
03
UX Research
JTBD in-depth interviews, product analysis
Entire product mind map
Business oriented role model
New seamless user scenarios
Contribution
Elevated crucial user-centric objects
to the forefront of the interface
to the forefront of the interface
This streamlined the user experience significantly, reducing the number
of steps by 4 and 7 times for pipelines
and scans, respectively
of steps by 4 and 7 times for pipelines
and scans, respectively
The redesigned filtering and grouping
of objects have reduced the working time for DAST/SAST engineers by one and
a half times, and for SAST in the most common scenario by more than
100 times (SIC!)
100 times (SIC!)
This means that the cost of one vulnerability triage has decreased
by approximately 10 times
Together with the Product Owner and Sales director, we introduced a business metric - Vulnerability Cost
In close collaboration with the front-end developer, we implemented a custom component library based on Angular 14, which accelerated the design/front-end process by three times
Reflection
The whole team learned a lot from this journey
Always eager to learn, regardless of seniority
01
People First
Even Security Champions are human beings
My personal triumph was in influencing the CTO and the whole team to prioritize people over the system, enhancing organizational focus on human-centric strategies and user stories
02
Research & Testing
«We are not Users» approach
Conducted research and testing to meet the needs of even the most demanding clients under strict contractual obligations, achieving over 70% default acceptance of solutions. This approach eliminated the need to justify decisions and resulted in no contract cancellations following redesigns, demonstrating exceptional client satisfaction and trust
03
Design process
Design is not about pictures'
Integrated the design process into the R&D pipeline alongside the Product Manager and Frontend Developer, achieving seamless team coordination. This collaboration resulted in
a flawless track record with no failed releases or bugs, and only one instance of negative feedback throughout the period
Sorry :(
Given that a large part of my work is related to web applications, I would not want to make you twist your phone
or zoom previews
or zoom previews
It's not safe for your eyes
But I believe that soon, I will have something to show
in the mobile version as well
in the mobile version as well
