Gradually, the fidelity of my design mockups would increase as I began to get more clarity around feature requirements and technical constraints. While my focus was still on the overall UI layout, I started to put more emphasis on functionalities as well as specific user interactions through my designs. I also had the luxury to design on top of an existing design system that was built to specifically support the internal DevOps product ecosystem within Oracle Cloud, of which Security Central is a part of.
Below is one example screen from my design set: the Resources list. This view shows users all the resources associated with their service and the corresponding security status for each.:
At this point, I began to take these mockups out for usability testing with users for early validation. Here's one particular interesting finding I learned.
Quick filtering on the Resources list
A lot of users from various different service teams would generate the exact same lists of resources every time they visit Security Central. In fact, regardless of the service, all on-call engineers share a common interest in particular subsets of resources as they go through their security monitoring and resolution workflows. As such, one of the design changes I made on the Resources list was to add the quick filters to the top. This way users can always and easily generate these common lists anytime without having to interact with the filter controls on the left:
Ultimately, I was able to start envisioning what the live product would look like with hi-fi mockups; taking into consideration how these flows and pages would fit into the overall navigational scheme as well as the DevOps ecosystem. I also began to think more about visual design aspects and collaborated extensively with the UI dev team to come up with interactive prototypes that could be used for more usability testing and/or also shared with stakeholders.
Below is a comparison of the "before and after" versions of the Summary dashboard - the landing page for users to Security Central. The new iteration offers the Resources overview card at the top, shown by default. With Security Central MVP, this used to be the Tasks overview card. With this new iteration, the UI now offers a View dropdown which users can leverage to toggle back to the Tasks overview card if necessary. There’s also a Resource health card as well as a new Resources tab as part of the top-navigation (this did not exist with Security Central MVP). Overall, all of these changes signified the importance of Resources within the overall Security Central ecosystem:
Clicking on the Resources tab would take users to the Resources list. This is a view that could help users get a better sense of how their service's resources architecture is currently doing from a security perspective. They can gain this birds eye view, but at the same time they can also drill down into a specific resource using the quick filters or the filters panel:
If users click on a specific Resources link, they would get to the Resource details page. Here, they can obtain the context they need around the specific issue they’re trying to resolve for this particular resource. Accordingly, they can navigate to the corresponding Task for this issue by clicking on the View task details button:
Accordingly, they can navigate to the corresponding Task for this issue by clicking on the View task details button: