Stax is an all-in-one cloud platform (PaaS) that provides a secure foundation for migrating and deploying apps to AWS, while facilitating cost savings and increasing efficiency and visibility.
The Spotlight module provides continuous assurance against industry compliance standards including HIPAA, GDPR, CIS, PCI-DSS and NIST. It follows the AWS best practices outlined in their architecture framework.
THE PROBLEM
POSTPONED BEST PRACTICES
With the increased evolution of cloud computing, new cloud security and governance practices are often postponed because of time constraints, absence of skilled people and knowledge gaps in small and medium companies.
WHAT WE DID
To manage any organization’s risk and security standards, we created a streamlined rules section and a new feature called Rule Bundles.
Each bundle is a collection of rules focused on enabling organizations to achieve a specific external compliance framework or follow industry best practices for an AWS service. Rule Bundles quickly identify failing rules, understand where they fit within the organization’s AWS ecosystem, and more easily fix their root cause.
RULES & BUNDLES
WHITEBOARDS, PAPERS AND MARKERS
I led an initial kickoff workshop with the product manager, front and back-end developers that helped to shape the experience, learn about industry standards, gather information from internal and external users.
REUSE – REUSE – REUSE
When translating the sketches into high fidelity prototypes I relied on the components and design system, drastically reducing the time and effort to create new userflows.
To maximise efficiency, many times I use mid-fidelity designs reusing components to test and validate the paper sketched ideas. Whilst is always better to design with real data, this approach helps to get everyone on the same page.
Testing different layouts based on the paper sketches. Mid fidelity designs help to get user in the journey.
TESTING ONE USERFLOW FIRST, THEN ALL COMBINED
Creating individual prototypes for each flow allowed me to to get specific feedback on each part.
Later, all the insights were combined into a complex prototype.
UNDERSTANDING BUNDLES & FRAMEWORKS
To better understand the complexity of the information, I conducted research on the data structure for the bundles and frameworks that will be supported.
Then, I defined the Information Architecture that will be used to show the different pieces of information with enough flexibility to have a standard template that will enable future additions and updates for new frameworks.
This work was iterated collaboratively with the backend developers, keeping in mind the technical details and constraints.
MAPPING THE FINDINGS IN THE UI
After researching, I mapped the structure into the interface. This is where the users can see the detailed information about each rule with the documentation.
The challenge was that some rules are the same in different bundles. So we needed a way to show each bundle details.
After exploring different variations, the nested tabs alternative was selected. Although it seems to be a complex pattern, we wanted to test an initial version and get more feedback.
Some bundles have rules in common, but with different names. In order to show this subtle differences without cluttering the UI, I reused the rule categories to show more information on hover.

Displaying more information on hover.
DEVELOPMENT & IMPLEMENTATION
Even though we hand the project over to developers with a detailed kickoff, I like to engage them from the beginning to have them on the same page when the development stage comes. During these meetings, we review interactions and final details before implementation. Then I break down the tasks using Trello or Jira. Sometimes we release features under a flag for selected users or to all, depending on the feature.
By the time design was shipped, I wasn’t in the company anymore. This is how it ended up:
Add a Bundle
Implemented userflow for adding a rule bundle.
Remove a Bundle
Implemented userflow for removing a rule bundle.
KEY LEARNINGS
Write it down and split the problems into smaller chunks
Dedicating time to thoroughly understand how the different frameworks intersect enabled me to map out the frameworks and find commonalities. This helped me to create a standard template for rules that were easily translated into the UI.
Communicate with developers during the whole process
Proactively communicating your research with the developers helps them to design flexible and scalable data structure.
