Website Application

This design challenge, invited by Data Theorem, is about designing a website platform to be able to search, add, and update new employees’ information for HR clerks


UX Design, UX research, front end developer


Adobe XD, Visual Studio Code, html5 and css3


3 weeks

The Demo

Design a web application that enables the City of Chicago’s HR department to: 

  • View and search for employees

  • Add a new employee to the database

    • ​Required information:

      • ​Name

      • Employee ID

      • Department

      • Job Title

      • Full time/ Part-time

        • ​If full time: Salary

        • ​If part-time: Weekly hours & Hourly Wage​

  • Update the information for an employee who is promoted, retires, quits, or get fired

How to do ensure HR clerks are able to add new employees’ information ACCURATELY

  • From this challenge, the demand is concentrated on updating data preciously. To straightly find out how to ensure adding information easily and accurately, I collected a couple of website resources, which allow users to type in their own career information. I make comparisons on each one how their platforms lead users to type

  • In this part, I emphasize the two characteristics of the final solution that are supposed to be “easy” and “accurate”

First Page  Link:

  • The edit profile page is a one-page style which concludes contact information, education, work experience, and resume & Document

  • A couple of information boxes are necessary to be filled; otherwise, the file can not be updated 

  • Submitting is one step with a single button

First assumption: 

So the first link I assume it represents the “easy” to update info by showing questions on a single page, and users are able to complete the exam with a shorter timing

Second Page Link

  • The top progress bar to present how far to complete the information update

  • Place different categories of questions on separate pages 

  • In the end, there will be a review to confirm if the information is proved correctly

Second assumption:

The second example divides the series of questions into different pages and submitted reviews that I consider it represents the “accurate”. I assume this case may decrease the frequency of errors

I started searching what kind of platform designs for users to type into information and analyzed the advantages for each example


I create two basic platforms to examine users for this step by using HTML5 and CSS3. The first platform is to contain all of the required questions on a single page. The second one is to categorize questions to particular pages

To test which page format can lead users more easily and precisely typing information, I set it up as a field observation for this survey. I would see how long and correctly individual interviewee to complete update processing by typing with 5 random career information for each case: single page or multiple pages. The process would be calculated with time and accuracy. The purpose is to quantize the number of easiness and precision by comparing the diverse cases and understand which data organizing form can optimize the result

Test 1 Platform

Test 2 Platform

Random Employee File

Since there are two parts in the entire survey, I divided half interviewees to be tested with test1 first, and the rest of half interviewees would start examining with test2. It would help me to strike out other external factors distracting the right result


By dividing filled questions on multiple pages, it can decrease the frequency of typo and gather more attention from users

By gathering 10 interviewees’ results, the average typing time of test 2 is longer than test 1 29.6 seconds, which fits my beginning expectation. However, the accuracy of each test is significantly different. Surprisingly, most of test 2 results have less amount of errors than test 1 

Individual Testing Errors

I create two basic platforms to examine users for this step by using HTML5 and CSS3. The first platform is to contain all of the required questions on a Compared to test 2,  the total error amount of test 1 is 170% higher, which means typing with a single page will lead users to make more mistakes almost double time. That is also to say dividing information into multiple pages can decrease typing mistakes page. The second one is to categorize questions to particular pages

Total Amount of Errors


The above comparison of test results gives me an understanding that I should design the platform by appropriately dividing questions into multiple pages for users

And then there are four categories I would focus on this design process 

  • Search bar 

  • Reviewing page 

  • Add employee database 

  • Update & edit information


About the usability testing, I texted three people with a paper prototype and raw instruction guideline by following Nielsen Norman’s Heuristic evaluation in order to make sure the user flow is smoothly and accurately performing functionality

After the usability testing, there are few confusing points reported by interviewees 

  • The unclear history on the home page

    • When users are not familiar with the web platform, they are confused about the history update on the home page. And I need to identify the history update more clear with the UI design


Research, edit, and delete file

Create New Employee File

Updating With Multiple Pages And Reviewing With Single Page

What did I gain from the project?
  • Front end:

By creating a draft web with HTML and CSS to analyze users’ behavior and measure the accuracy, it pushed my limits and increased my ability to UX research.  I am happy to see how far I grow from this project

  • Interviews:

I also would like to mention interviewing people during the quarantine is difficult. A few interviewees preferred to do remote testing but I considered the testing should be in-person to avoid other factors disturbing the result. In the end, the final result is not disappointing to me which I think I did the best to eliminate interference.  I also appreciate every interviewee spending their time to complete the test and gave advice on how to run the interview successfully 

  • Result:

After collecting data, the result was surprising to me that dividing questions into multiple pages will lead users more accurately update information. It can relate to psychological factors. Users’ eyes rather keep on center and the pause navigating to the next page will give them more time to process updating correct information. However, before releasing the answer, most interviewees preferred the single-page platform and considered its accuracy is higher than the other. The contradiction of subjective

Other Projects

Alchemist Motion Graphic

Data.Gove Management Web

TestVroom Driving Simulator

MotivateMe iOS Application

  • Email Icon2
  • Grey LinkedIn Icon
© Joy Wang 2019