Design Challenge:


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.


• 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


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.

Frame 6.png

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

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.

Frame 20.png

To make the mobile app consistent with the desktop interface, I only changed some details to adapt the design to the mobile screen.

Frame 21.png

Visual Styling

Color Palette
Frame 16.png

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.

Frame 22.png
Frame 23.png


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.