UX/UI Design Guide & Documentation
Project Objective
This document and this Figma file detail the UX/UI design approach for the Minimum Viable Product (MVP) of Role-Based Access Control (RBAC) for Content Libraries in Open edX.
The main objective is to provide a clear, efficient, and contextual interface that allows library administrators to manage library-specific roles and permissions (Library Admin, Library Author, Library User, Library Collaborator) within the Studio environment, fulfilling the MVP goals defined.
Design Principles
The following principles guided the design decisions:
Context Clarity: The specific library being worked on should always be clearly displayed (e.g., in the team management view header).
Simplicity for Common Tasks: Primary actions like assigning, editing, or removing roles must be straightforward and accessible.
Error Prevention: Clear confirmations (modals) and feedback messages should be used for destructive or potentially confusing actions.
Consistency with Open edX: Standard platform design components and patterns (e.g., Paragon) should be used whenever possible.
Transparency of Roles and Permissions: The representation of roles and their associated permissions must be clear, grouping permissions by functional category (e.g., “Content”, “Library”, “Collections”, “Team”).
Key Components and their Purpose
Library Team Management View: The main screen for viewing and managing users with roles in a specific library. Accessed via Library > Library Info > Manage Access.
User List Table: Displays users with access, their roles, and actions. Includes column sorting (sort) and role filtering functionalities.
Add New Team Member Modal (Modal of adding new team member): Allows you to add users by mail or user ID and assign them a specific role within the current library.
Edit User Role Modal: Allows modifying the roles assigned to a specific user in the library.
Remove Role Confirmation Modal: Requests confirmation before removing a user's role, showing contextual information (e.g., if it's their only role or if they have others).
Role Details View/Section: Displays the role description and a list of its permissions grouped by category (e.g., “Content”, “Library”, “Team”).
Permissions Comparison Table: A centralized resource that displays a matrix of all library roles defined in the MVP (Library Admin, Library Author, Library Collaborator, Library User) and their associated permissions, grouped by functional category.
Toast Notifications: Provide immediate feedback on the success or failure of user actions (e.g., “Role removed successfully”).
Permission Icons/Badges: Visual elements used to represent specific permission actions within the role details view and comparative table of permissions for each role.
User Flows
Assigning a role to a user:
Navigate to Library > Library Info > Manage Access.
Click “New Team Member”.
Add email or User ID.
Select a role (Admin, Author, User, Collaborator).
Confirm the assignment.
See success message.
Editing/Removing a user's role:
In the user list table, click “Edit” for a user.
In the modal, modify or remove roles or add news.
Confirm the action.
See success message and table update.
Viewing the list of users with their roles:
Navigate to Library > Library Info > Manage Access.
View the table with users, roles, and actions.
Viewing a role's details and its permissions:
Navigate to Library > Library Info > Manage Access. Select the “Roles” tab.
View a comparative table of permissions for each role.
Navigate to Library > Library Info > Manage Access. Select the “Permissions” tab.
Interface Components
Definition and specification of key components:
Tables:
(with sorting, filters). Based on user stories like "Filter users by Role" and "Sort users by A-Z".
Modals:
Add New Team Member Modal: For assigning roles. Based on "Assign a Role to a User".
Edit User Role Modal: For modifying roles/scopes. Based on "Change a User's Role".
Remove Role Confirmation Modal: For confirming role deletion. Based on "Remove Library Roles from a User". Must handle cases like removing the only role or roles across multiple scopes.
Badges/Chips:
For Scope, permissions.
Icons:
For permission actions, grouped by category (Content, Library, Collections, Team). Based on the need for clear visual permission representation.
Roles and Permissions Comparison Table:
A central component showing the permissions of each role (Library Admin, Library Author, Library Collaborator, Library User) grouped by category (Content, Library, Collections, Team), based on Library Roles and Permissions. This supports the stories “View a Role’s description and Permissions” and “View a list of all Roles available”.
Special Considerations
Managing “Stackable Roles”: The interface must correctly handle the display when a user has multiple roles in the same library. For example, showing Author and Collaborator as separate roles in the table or in a detailed list.
“Scope” Representation: In the MVP, the “scope” is implicitly defined by the current library when accessed via Manage Access. Therefore, the interface focuses on that library. For future iterations or global views, the associated “scope” for each role will need to be displayed explicitly.
Integration with Studio: The MVP is integrated directly into the Authoring MFE (Studio) as a panel accessible via the “Manage Access” button in a library. Navigation might involve opening a new tab with a URL including the library_id.
Links and Resources
