Design Challenge:
Paychex
A solution that allows HR Admins to access and manage details about their employees
Problem Statement
Human Resource Administrators (HR Admins) are responsible for maintaining detailed information about the employees that work at their company. Frequently, the HR Admin needs to update a few details about a single employee.
Requirements
• Change the Last Name, Address, and Marital Status of a single Employee
• Design both for mobile and desktop
• Must be able to work for companies with 10-500 employees
• Must reflect technical considerations: It is impossible to load hundreds of Employees and meet our performance goals. We need a solution that does not load more than 100 employees at a time.
Solution Highlights
Desktop
A table consists of multiple rows to list out employees' information clearly.
Provide several filters to find out the target more easily.
The options for showing a certain amount of results let users still have some freedom under limitations.
The design pattern master-detail is applied to confirm the detail information of an employee before clicking into the page.
Mobile
Similar to the desktop interface, the system provides a dropdown to select the amount of shown items per page to meet the technical constraint.
In the edit mode, the system will highlight the textbox that is being edited to avoid losing targeted objects.
The information is grouped into 3 sections to help users locate the specific info easily.
User Flow
Desktop
Design Iteration
After determining the user flow, I started to visualize the flow with low-fidelity wireframes and come up with iterations to find out the best solution.
Employees List
The visual hierarchy of a table is more straightforward for users to locate the specific person among hundreds of results than the card-based design.
PReview Info
If there are paraphs in the info details, the expandable row will make the table overwhelming. Users might have trouble distinguishing the expanded section from the other rows.
On the other hand, master-detail can separate the information clearly.
Mobile
To make the mobile app consistent with the desktop interface, I only changed some details to adapt the design to the mobile screen.
Visual Styling
Color Palette
Blue is often associated with stability. It symbolizes trust and security. When it comes to enterprise software, it's crucial to create a trustworthy and professional image.
Desktop
Prototype
Mobile
Limitation
Due to a time constraint, the solution hasn't been tested by users. Some user testings should be conducted to verify the usability of the design. This project only focused on one user flow, the outcomes could be different once including other functions.