UI design
Designing a 'add new employee' feature
February 2018 to August 2018
Key info​​
Project type
UX/UI design
​
Team size
3 full time designers
​
My role
Key designer of new hire feature for EdPay​​​​
​
​
Skills used
-
Interaction design,
-
Lo-fi wirefarming,
-
Process mapping,
-
Stakeholder management,
-
Gathering stakeholder feedback
​
Tools used
Visio​​​​
​​​Project goal and background
Design the new employee form as a digital feature in a new payroll app, Edpay. ​
​
This was my very first design piece. I joined the team after the initial customer research was done. Using my knowledge as a former payroll adviser (with 9.5 years experience in this particular payroll),​
​
EdPay replaced Novopay. Edpay is a payroll app used by school administrators and payroll officers to employees on NZ's biggest payroll (approximately 90,000 per fortnight).
​​​
​​​​​Process
Discover and define
From my in-depth knowledge of the payroll and user research conducted by the team, its known that:
-
The payroll centre receives approximately 43,000 new hire forms each year
-
New employee forms are PDFs. The forms are complex that don't have drop downs, and do not prevent incorrect or invalid data. School administrators manually complete PDF forms with 50+ fields. These forms were then manually inputted by payroll advisers into the payroll interface for payment. This combined leads to a high risk of error.
-
There are 13 different employee agreements that cover numerous roles covered, which each have their own set of rules and codes that the administrators and payroll advisers need to know to input into the payroll software.
-
Completing manual forms is time consuming and administrators are constantly interrupted (for example, by children coming into their office, phone calls and so on).
-
Administrators often get the information incorrect or incomplete. They often weren't provided with all information as needed, This means that the payroll advisers need to contact the administrators to complete sections or correct the information and resubmit the form, which slows down the process.
-
Payroll advisers translate this information into payroll codes and enter this into the payroll system, which takes around 18 months to become fully proficient. Additionally the payroll software doesn't have sufficient controls to prevent errors.​
-
I journey mapped the current state with my team and confirmed the journey and pain points with payroll advisers​​​.​
Pain points and solutions to resolve them
Develop
-
Using my years of experience in payroll and taking the payroll and school environments in mind, I mapped out a future state new hire flow with my team to reduce pain points and meet user needs.
-
​I created lo-fi wireframes for the new hire feature of EdPay. These demonstrated how the user could interact with the form. This detailed the interactions.
-
Features of new hire included:
-
Save and exit - allows user to fill in as much as the form, save and come back to the form
-
Auto-save in case the user is distracted and forgets to save
-
Auto-populated fields depending on job type selected
-
New hire summary - user is prompted to check this before they can submit the form
-
Clear error messaging to allow the user to easily correct info provided​​​​​​​​​​​​​​​
-
A new employee feature wireframe
Screenshot of the new employee feature
​​​Impact
-
Estimated a digitised new hire feature could save 1380 hours of payroll processing time per year
​​​Lessons learnt
-
Involve stakeholders early
-
Record all feedback electronically and say why changes were made - again to save time and make comments easier to read.
-
Test concepts with school payroll administrators
-
Record decisions to inform refinement sessions and meetings with the business analysts.