MacStadium
From support-heavy firewall requests to self-serve visibility and control.
Final design for my cloud page, showing public and private networks
Role
Lead Product Designer
Year
2025
Team
CPO
Product Manager
Full Stack Developer
VP of Engineering
Network Engineer
+ me
Deliverables
👉 Code prototype
Prod code collaboration with engineering
User Testing Analysis
Stakeholder alignment
Firewall and network visibility drove support load. Users needed to see it themselves.
"I need to see how my servers are connected and what firewall rules are in place, but right now I have to contact support for even simple changes."
– DevOps Engineer, Enterprise Customer
Previous bare metal page, no network hierarchy.
Visibility was buried in a table without network hierarchies, an Excel file and support tickets.
The problem: The main fleet view was a table without any network hierarchies. For network visibility and credentials, the main interface was an Excel file that was manually produced. On top of that, information outside these two often got trapped in support tickets.
Competitive and user research.
Research: hyperscalers and user interviews
I researched how competitors and hyperscalers visualize server networks and firewall configs. I also sourced significant material from my regular user interviews, which became a valuable source of insights. Internal operational constraints also came into play as I conceived of what was possible.
Code prototype with real data.
Leveraging cursor early in the design process
I built a React prototype with real data to test the UI with stakeholders. This prototype helped us validate the tree-view interaction and catch edge cases static mockups would have missed; it also became a very useful link to share with customers for a quick feedback session.
Nested table UI component and tree view.
Agreed network hierarchy.
A nested table model that matched mental models
We aligned on a hierarchy: private/public cloud → networks → subnets → machines. The expandable nested table was the UI we settled on, as it allows for an information-dense view, while also being easy to navigate.
Scalable credentials modal
Problem: audit-ready credentials
One requirement we ran into later in the process was that we needed to provide audit-ready credentials. Enterprise clients required an auditable log of access, which includes requesting network credentials.
Final design for my cloud page, showing public and private networks.
Where we landed
Self-serve firewall and network visibility in the portal, fewer “where is my server?” and firewall tickets, and a clearer hierarchy that users could act on without support.
Next case study
Tiny Dinner