COVER.png

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
Employees.png

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.

Employees_preview.png
Mobile
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

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.

©2018 by YUNG CHIA YUN.

© COPYRIGHT 2020 by YUNG CHIA YUN.