The current employee portal's HR-related services are disorganized and cluttered, and users cannot complete tasks, such as requesting leave without great effort. The new portal aims to organize various functions and systems to create a smooth and uncomplicated user experience.


HR Portal

Research & Design Process

  1. Data Collection and Analysis: Inventory all related functions and systems, and collect and summarize relevant information
  2. Information Architecture Organization: Re-plan information categories, functions, and menus to create an efficient information architecture structure
  3. Design Planning: Propose design concepts and sitemaps based on the information architecture
  4. Visual and UI Design

Data Collection and Analysis

We made an inventory of HR-related systems, which is a total of 125 functions. Then we labeled each by the most frequently used, the most frequently asked about, the frequency of use, and special situations.

An extracted part of the table is as shown:

Functions Table

Information Architecture Organization

We utilized the card sorting method to understand how users name and create categories, explore the classification of information that matches user habits, compare the differences between users as a basis for the structure, and make the menu closer to the users' needs.

Few selected card sorting results are as shown below:

Card Sorting

Design Planning

According to the results of card sorting, the functions are divided into eight categories, which are:

  1. Attendance Management
  2. Compensation and Benefits
  3. Personal Information
  4. Performance Appraisal
  5. Application Form
  6. Retirement and Resignation
  7. Announcement
  8. Supervisor Management

The sitemap is drawn to show the information hierarchy, as rendered below:


Visual and UI Design

TThe main design challenge of this project is that the portal can only be a static one-page website. This design uses UI cards to group the categories in the sitemap, and the functions are directly linked and easily accessed with a single click.

The original HR function portals are retained as the three buttons on the top of the page, so colleagues can still interact with the system according to their old habits; frequently used functions are presented as highlighted text so are more easily located.