Single Page Application design
Project context
As part of the DevSecOps pipeline, a group of developers have been working to build a tool that automatically consolidates the results of multiple security scans (e.g Burpsuite, Dependency check, Fortify) into one report for review. I was roped into this project as the sole designer to create the UI.
Details
Role: Sole UI designer of DSTA
Skills focus: Wireframing, Prototyping
Timeframe: November 2021
Background
As I joined the team to only work on the interface design, I did not participate in a discovery phase. The project team was made up of developers and devsecops personnel who would ultimately be the users of this bespoke tool. Thus, they were the ones who presented their problems to me, along with the solution they had in mind. With this context, I moved onto defining the user flow of how one would use the devsecops tool instead.
Problem statements
From what the team has shared, the main pain point projects faced was running their codes through multiple security scans. Projects had to go to different platforms to run their codes through different scans, all of which are mandatory. Each of these scans would produce a separate report that the Cyber Manager had to review later.
Thus, the main problem statement to solve for was very clearly: Project teams need a way to consolidate the reports from various security scans so that they can review their codes efficiently.
From this, the solution proposed made a lot of sense – a tool that allows projects to run their codes through it once but generates a consolidated report from the results of different scans. In a bid to start small, the team has decided for the consolidated report to be in the form of a HTML report – this would pose certain restrictions to the solution design.
User flow
To consolidate what I’d learnt from the project, I had put together a user flow of how the tool should work below.
As always, I started off with hand drawn sketches to get certain layout ideas out on paper. This helps me visualize what works better, and where the issues are with each layout.
I then jumped straight into the interface of the report! The report creatively features an e-commerce stylized way of finding issues, suppressing said issues if necessary and leaving comments. These suppressions and comments will be exported as a json file that is uploaded onto the HTML report for the Cyber Manager’s review. After approval, the json file with the suppressions and comments is checked into code repository wholesale. (no additional processing! 😊)
Key highlights:
Listings page
Features:
- Mainly for project teams to review all issues
- Guiding the user based on severity of the issue
- Opt-in filters to find a specific report easily and with only one or a few clicks (compared to opt out filters where everything is selected by default)
Cyber Manager view
Features:
- A simple view for the Cyber Manager (although they can choose to view the issues listing as well)
- Issues are categorized based on the user’s mental model: whether they require a follow-up action. Unapproved suppressions must be approved by the Cyber Manager, Approved suppressions’ comments can be read by project teams, and obsolete suppressions must be read FYI
Obsolete suppression matching
Features:
- Unique matching feature to help find obsolete suppressions
- Obsolete suppressions may occur due to code changes. When the code changes, the line number of a previous suppression code may change, rendering that previous suppression obsolete. Alternatively, a previously suppressed issue may be fixed thus rendering the suppression obsolete. In the first case, the suppression needs to be reflagged out, likely with the same comments
- To solve for the above issue, I introduced a Matching feature that matches issues with obsolete suppressions. If there is a potential match, the user can copy over the comments without having to re-analyse and type it out.
After presenting to the tech team, they seemed satisfied with the design and continued to develop it immediately. My design head also mentioned that this single page application could potentially be used for usability testing in the future, proving that the function is scalable!
