Demystifying Custom Role Creation and Permission Management Feature
This case study explains how I designed a feature to allow admins create roles, manage roles and permissions for an employee management tool.
Timeline: 2 days. Deliverables/Tools: Hifi Prototypes, Figma
Scenario
Aerten is a web based employee management tool for businesses of all sizes. Based on multiple client requests, the company has identified a need to create a new feature to allow admins manage custom role creation and permissions as well as assign roles to employees. From company-wide insights, having this feature on Aerten is expected to increase user adoption and retention while reducing churn.
The task: design high-fidelity screens to solve the role and permissions problem
Assumptions
- Clients’ employees have varying roles and responsibilities that require different levels of access to the employee management tool. E.g Admin, manager, employee, limited access etc
- The admins have the highest access level and can edit other employees access and set permissions
- The role creation and assignment is done internally (Only internal team members are assigned to roles created)
The process summarized
Since this was something I had to do as quickly as possible, the process was a little rushed.
Understand: I did some research to fully understand this industry and the problem I was to solve. A quick google search and chat ai prompts aided this process.
Define: Here, I broke the feature down into user stories. This helped me define the sub tasks required to achieve the goal of role creation and management.
Ideate/Brainstorm: I brainstormed on different ways I could solve this problem with the assumptions in mind. I made rough pen and paper sketches to put some ideas down here.
Design: The last step involved was creating hifi prototypes of the ideas I’d brainstormed. I created a mood board of inspiration from hr tools and other similar platforms and a style guide of fonts, colors, grids before I started the design. This also involved a lot iterations that repeatedly took me back to the define and brainstorm stages for a few hours.
Bringing it back
I was seeking to solve problems around employee role and permissions management.
Based on my breakdown and ideation, the solution I created was simple with these key features:
- Role Permissions Management: This allows admins to manage the permissions of each role, including what areas of the software they can access and what actions they can perform.
- Employee Role Assignment: This allows admins to assign roles to employees and manage their access to the software based on their job responsibilities.
- Role Management: This displays a list of existing roles and allow admins to create new roles, edit existing roles, or delete roles
- Custom Role Creation: This allows admins to create new roles, add role details, set permission and assign individuals.
- Role Assignment: A role can be assigned to one or more employees/teams through several ways. Read on for further breakdown 👇
Getting Started with the solution
As an employee management tool, there is a need for the “employees” page which is aimed to help an admin manage employees. The reason for designing this page is to specify a possibility of assigning roles directly from the employees page.
From the employee details page, an admin can also open an employee profile to assign/edit their roles.
Roles and permissions
Roles: I designed the Roles page to make it easier for an admin to track and manage roles. This screen displays a list of existing roles and allow admins to create new roles, edit existing roles, or delete roles.
Roles were designed as grid view, mostly because the employees page is a list. But also to show the Filters and grid/list customizations on these pages.
Create role
Under the Roles section, there is a button to create or assign a role.
Steps:
- Admin logs in to the employee management tool and navigates to the “Roles” tab.
- Admin selects “New Role” to create a new custom role.
- Admin adds basic role details and assigns permissions to the custom role (Basic role details like title, description, type, reporting manager, etc)
- Admin assigns the custom role to individuals/employees.
While creating a role, I broke the form down into 3 parts to make it easy to create. These three parts are: Basic details, set permissions and review.
Basic details: Here, the admin is able to add basic role information, so there’s enough room to accommodate as much details as needed.
Set permissions: This screen allows admins to manage the permissions of each role, including what areas of the software they can access and what actions they can perform. Since permissions here are not defined yet and information could be more, I created a structure that allows for more inputs and updates.
I used toggles instead of checkboxes to depict a clear on/off or binary choice to be made, checkboxes sometimes give off a feeling of multiple choices.
Review/summary: This was created as a separate section due to how prone to mistakes human beings are. This enables them review the permissions and details of the role before creating.
I initially thought to make it a simple modal but considering the importance of the process and complexity of the information which could increase over time, I figured a modal wasn’t the best bet.
Assign Role:
Came up with several ideas for an Admin to assign a role. First is, directly from the employee page, the second is while creating a new role, the third is assigning a role from the employee details page, and the fourth is directly from the roles page.
PS: A role can have multiple individuals or a team assigned to it.
While creating a new role I can assign it to a team or individuals:
As an admin I can, I can assign a role by searching/selecting from a list of employees/team
From the employee page:
An assign a role modal from here requires an admin to select a role and an individual/team
From Employee profile/details page:
Here an individual profile is already selected by default, so an admin can edit their role
Permissions
Aside the edit role/edit permission and create role and set permission option, I accounted for scenarios where an admin wants to manage general permissions. The get to do this from the permissions tab under roles or from their settings.
I also figured setting specific permissions individually may be cumbersome so I designed for a scenario where certain permissions have already been set for different access levels within the organisation, and all the admin has to do is assign a level to an individual or team as the case may be
(For this scenario, role permissions can’t be edited, but can only be assigned because they have already been set from the backend and can be customized only based on customer(organization) request)
Conclusion
At several points in the flow, I made sure to add info tips at areas admins might not be commonly familiar with. Since it’s a new Major feature being integrated into an existing system, the purpose is to ease them into the process of understanding and using it.
“This new feature is expected to increase user adoption and retention while reducing churn”
How then does this design increase user adoption while reducing churn?
- The set permissions/edit permissions simplifies the management of employee permissions within the organization.
- The create/assign roles provides more flexibility to create and assign roles that align with the specific needs of the business and also ensures employees only have access to what they need.
- The edit roles flow allows admins to easily adjust roles and to accommodate changing organizational needs for employee roles. As organizations grow and evolve, it provides scalability, flexibility, reduces churn, and supports the adoption of the system as it aligns with the changing requirements of the organization. (E.g in cases of layoffs and promotions, probation, switching roles internally etc)
- This feature overall provides increased efficiency , security and a competitive advantage in the market, especially among businesses that need more granular control over employees, roles and permissions.
Next steps
I attempted to cover a comprehensive range of use cases and considered as many scenarios as I could think of during this process.
If After testing I realize some necessary screens and functionalities are missing, the next steps would be to conduct further research to identify the missing screens and functionalities that users need, collaborate with the product team to prioritize the new functionalities and screens, design the missing screens and test to further validate.
Here’s a link to my figma: Tassyomah
