A visual tree-based editor that allows administrators to manage user permissions across different roles and environments. The system displays the entire software structure, pages, actions, and information nodes, in an intuitive map format.
Design Decisions
Administrators needed a way to:
-
Visualize the entire system architecture at a glance
-
Quickly understand which permissions each role has
-
Edit permissions efficiently across multiple environments
-
Distinguish between different node types (pages, actions, info)
Key complexity: Multiple overlapping states needed to be clear simultaneously—whether a node is part of the role, whether it's selected, and what type of node it is.
Design Process
Action Mapping
I began by mapping all possible user actions and categorizing them by context:
On the map: Navigation, node editing, search (find specific nodes)
In the header: Role selection, environment switching, these define the map's "view"
On each node: Color-coded by permission, access details in side panel
This separation ensures users always know where to look based on what they want to do.
Visual Exploration: Node Differentiation
Tested approach: Full-color node cards per type
Result: Too much visual noise. When every card screams for attention, nothing stands out.
Final solution: White cards with colored accent dots
This maintains clear type differentiation while keeping the interface calm and scannable. The eye can quickly identify node types without being overwhelmed.
Node states
Design Decisions
Information Architecture
Top bar: Role and environment selectors, these define what you're viewing, acting as the "title" of the map.
Canvas: Maximized screen real estate for the permission tree. All map-related actions (navigation, editing, search) live directly on the canvas.
Side panel: Detailed node information on demand (accessed via three-dot menu).
Interaction Model
Click a node: Toggle permission on/off for the selected role
Three-dot menu: Open detailed node information
Multi-select: Batch permission changes
Visual System
Color-coded node types:
-
Pink — Pages
-
Green — Actions
-
Blue — Info
_edited.png)
Outcome
A clean, scalable interface that transforms complex permission management into a visual, intuitive process. Administrators can now see the full system structure and make permission changes in context, reducing errors and training time.