Time Management section revamp
Time Management section revamp
Time Management section revamp
For HRIS SaaS web application
For HRIS SaaS web application
An overview of the design process that I as a Product Designer worked with while creating a new visual design and user experience for the Time Off Export feature in the SaaS web application for HR professionals.
An overview of the design process that I as a Product Designer worked with while creating a new visual design and user experience for the Time Off Export feature in the SaaS web application for HR professionals.
An overview of the design process that I as a Product Designer worked with while creating a new visual design and user experience for the Time Off Export feature in the SaaS web application for HR professionals.
My role:
Team:
Year:
Product Owner, QA, Engineers
Product Designer
Q2, 2023
My role:
Product Designer
Product Owner, QA, Engineers
Team:
Year:
Q2, 2023
My role:
Product Designer
Product Owner, QA, Engineers
Team:
Year:
Q2, 2023
About.
Problem
About. Problem
This is a part of a big project I worked with, the updating of the outdated interfaces and user flows in the SaaS web-application for HR professionals, AlexisHR. After researching current user problems, I have found out that one of the main complaints from the users was regarding the collaboration with outside payroll systems and exporting reports for employee's Time Off. As a Product Designer, I saw the opportunity to solve this urgent problem together with updating the interface and have decided to prioritise the feature as it was relatively small yet powerful higher clients' satisfaction.
Here are some initial conditions:
• Small businesses often don’t have inside accountants. While outsourcing this work is a reasonable decision, some part of the work usually lies on the shoulders of the HR.
• AlexisHR application is all-in-one HRIS and does include integrations with outside payroll systems, ex. Fortnox, P:E, etc.
This is a part of a big project I worked with, the updating of the outdated interfaces and user flows in the SaaS web-application for HR professionals, AlexisHR. After researching current user problems, I have found out that one of the main complaints from the users was regarding the collaboration with outside payroll systems and exporting reports for employee's Time Off. As a Product Designer, I saw the opportunity to solve this urgent problem together with updating the interface and have decided to prioritise the feature as it was relatively small yet powerful higher clients' satisfaction.
Here are some initial conditions:
• Small businesses often don’t have inside accountants. While outsourcing this work is a reasonable decision, some part of the work usually lies on the shoulders of the HR.
• AlexisHR application is all-in-one HRIS and does include integrations with outside payroll systems, ex. Fortnox, P:E, etc.
Task
About. Task
Ultimately, I set the design task on two main goals::
New user experience for Time Off Export feature to decrease user's frustration
Visual update according to the new Design System to maintain app's consistency
Ultimately, I set the design task on two main goals::
New user experience for Time Off Export feature to decrease user's frustration
Visual update according to the new Design System to maintain app's consistency
My role
About. My role
Product Designer Lead for the project
Led the approach and managed key stakeholders communications
Created prototypes at various fidelity levels
Ran user research sessions (User Interviews, Usability Tests)
UI Designer, updated the visuals according to new Design System
Worked alongside the engineers to make sure design feasibility
Product Designer Lead for the project
Led the approach and managed key stakeholders communications
Created prototypes at various fidelity levels
Ran user research sessions (User Interviews, Usability Tests)
UI Designer, updated the visuals according to new Design System
Worked alongside the engineers to make sure design feasibility
Objectives
About. Objectives
Product’s POV
Product’s POV
Decrease user frustration with the feature
Lower the amount of similar complains Customer Success team have to deal with
Make a fast update resources-wise
Decrease user frustration with the feature
Lower the amount of similar complains Customer Success team have to deal with
Make a fast update resources-wise
Designer’s POV
Designer’s POV
Try a new design on users with components from the updated Design System
Add missing functionality according to feedback
Make feature consistent with other parts of the app to make experience more user friendly and intuitive
Try a new design on users with components from the updated Design System
Add missing functionality according to feedback
Make feature consistent with other parts of the app to make experience more user friendly and intuitive
Research process
Research process
I began with a thorough analysis of the user flow in the export feature and explored what interactions existed and where there was room deeper user research.
I then scheduled meeting with our engineers team where we went over the feature and they explained me all the functionalities in details.
The constraints I had to consider were the back end and in-house resources (such as developer’s time and other projects priorities).
I began with a thorough analysis of the user flow in the export feature and explored what interactions existed and where there was room deeper user research.
I then scheduled meeting with our engineers team where we went over the feature and they explained me all the functionalities in details.
The constraints I had to consider were the back end and in-house resources (such as developer’s time and other projects priorities).
User Research & analysis
User Research & analysis
To create a user-centric experience, I conducted in-depth explorative interviews with four of our key user users. To find the users, I collaborated with Customer success team, and identified three different groups of our users that were working with that particular part of the application. I decided to interview all three types of users to get the full picture of the problem.
User Research analysis
User Research analysis
3 user types:
To create a user-centric experience, I conducted in-depth explorative interviews with four of our key user users. To find the users, I collaborated with Customer success team, and identified three different groups of our users that were working with that particular part of the application. I decided to interview all three types of users to get the full picture of the problem.
3 User Types:
HR professionals who oversee timely document export to outside payroll systems by themselves only
HR professionals who share this responsibility with the colleagues
Payroll professionals who only use the Time Off Export feature in the application and then work directly in the outside payroll system
HR professionals who oversee timely document export to outside payroll systems by themselves only
HR professionals who share this responsibility with the colleagues
Payroll professionals who only use the Time Off Export feature in the application and then work directly in the outside payroll system
To create a user-centric experience, I conducted in-depth explorative interviews with four of our key user users. To find the users, I collaborated with Customer success team, and identified three different groups of our users that were working with that particular part of the application. I decided to interview all three types of users to get the full picture of the problem.
3 User Types:
HR professionals who oversee timely document export to outside payroll systems by themselves only
HR professionals who share this responsibility with the colleagues
Payroll professionals who only use the Time Off Export feature in the application and then work directly in the outside payroll system
User
interviews
User interviews
“Even though I uses this every month, I never remember where is what?”
“Even though I uses this every month, I never remember where is what?”
– literally all users at the interviews
– literally all users at the interviews
Pain points
Pain points
Here are some of the pain points that that I identified with the user interviews:
Here are some of the pain points that that I identified with the user interviews:
1
1
1
2
4
3
3
5
1
3
4
6
Changed dates from the previous...
4
5
Information order in the table
Navigation in Export, Time Off Overview and vacation adjustments “modes”/pages
Lack of essential information on entry, e.g. when and who exported it, whether the period it belonged to is locked or not.
Change of view after export
Lacking detailed information on export status of an entry
Breadcrumbs inconsistency with the page content (adds to confusion with navigating the whole Manage Time section)
Lack of filtering option based on time period, something all interviewees seemed to view as a deal breaker for using this feature.
Information order in the table
Navigation in Export, Time Off Overview and vacation adjustments “modes”/pages
Lack of essential information on entry, e.g. when and who exported it, whether the period it belonged to is locked or not.
Change of view after export
Lacking detailed information on export status of an entry
Breadcrumbs inconsistency with the page content (adds to confusion with navigating the whole Manage Time section)
Lack of filtering option based on time period, something all interviewees seemed to view as a deal breaker for using this feature.
Designing.
Ideation
Designing. Ideation
What should be re-used and at which stage?
What should be re-used and at which stage?
Before implementing the design updates after finding the opportunity areas, I have decided to reuse components from the only updated feature under the Time Management feature of the application, Report time page.
I have also decided to re-order the table's columns and keep them in a familiar from the other pages order.
Before implementing the design updates after finding the opportunity areas, I have decided to reuse components from the only updated feature under the Time Management feature of the application, Report time page.
I have also decided to re-order the table's columns and keep them in a familiar from the other pages order.
This is an example of an existing Report time page I used for wireframing, it is not connected directly to the Time Off page, but rather a part of the whole Time Management feature connected to a payroll, and have similar .
This is an example of an existing Report time page I used for wireframing, it is not connected directly to the Time Off page, but rather a part of the whole Time Management feature connected to a payroll, and have similar .
Wireflrames
& iterations
Wireflrames & iterations
To start applying the new UI and new user flows, I defined a layout and chose a direction I wanted to take this update to to make sure this project would be doable for developers team between main projects.
First of all, I changed drop down mode switcher to a classic tab menu, add more detailed employees filter and an option to filter by date.
Each of these components have been already used in the app and would add to the consistency and make user experience more intuitive. Plus it did not require a lot from developers.
To start applying the new UI and new user flows, I defined a layout and chose a direction I wanted to take this update to to make sure this project would be doable for developers team between main projects.
First of all, I changed drop down mode switcher to a classic tab menu, add more detailed employees filter and an option to filter by date.
Each of these components have been already used in the app and would add to the consistency and make user experience more intuitive. Plus it did not require a lot from developers.
Iteration 1
Iteration 1
Both the Product Team and Product Owner liked the idea to add some delight into user experience and try to keep the widgets. Developer's team didn't find any complications. I continued to work on finalising design and prototyping for the usability tests.
Both the Product Team and Product Owner liked the idea to add some delight into user experience and try to keep the widgets. Developer's team didn't find any complications. I continued to work on finalising design and prototyping for the usability tests.
In parallel, I did similar processes for other pages of the Time Off management feature, the Overview and Vacation Adjustment pages, to ensure that the entire block looks consistent and easy to use one after another, as they originally were planned.
Here you can see few examples of components states in UI.
In parallel, I did similar processes for other pages of the Time Off management feature, the Overview and Vacation Adjustment pages, to ensure that the entire block looks consistent and easy to use one after another, as they originally were planned.
Here you can see few examples of components states in UI.
Designing.
Validation
Designing. Validation
UX tests
UX tests
I conducted 3 UX tests with our users to validate updates.
Tests were mostly observant, with suggested tasks that were based on the real problems our customers had to face regularly.
For example, one task included the export of a current period timesheet for a specific group of employees with some exceptions. It meant that users would bring to test the layout of the table, calendar, filtering and sorting options, bulk actions, etc.
I conducted 3 UX tests with our users to validate updates.
Tests were mostly observant, with suggested tasks that were based on the real problems our customers had to face regularly.
For example, one task included the export of a current period timesheet for a specific group of employees with some exceptions. It meant that users would bring to test the layout of the table, calendar, filtering and sorting options, bulk actions, etc.
Scaling back
Scaling back
UX tests showed that while users would like to have all possible solutions before them, new design is not following the 80%/20% rule (where 20% of inputs should be responsible for the 80% of outcome).
After that, I have decided to update the project with the following steps:
UX tests showed that while users would like to have all possible solutions before them, new design is not following the 80%/20% rule (where 20% of inputs should be responsible for the 80% of outcome).
After that, I have decided to update the project with the following steps:
Milestones
Milestones
Make updates in milestones to release them to users faster and to make it more digestable for developers.
Make updates in milestones to release them to users faster and to make it more digestable for developers.
The scope
The scope
Define scope for Milestone 1.
Define scope for Milestone 1.
Must vs. Nice to have
Must vs. Nice to have
Everything that was not mentioned by users have to go.
Everything that was not mentioned by users have to go.
Defining scope
Defining scope
New Scope
New Scope
Table view update
Export status: Yes/No/Partial + Dates
Filter: Name, Leave Status, Time period
Alerts: Revoking after export
Table view update
Export status: Yes/No/Partial + Dates
Filter: Name, Leave Status, Time period
Alerts: Revoking after export
Out of scope
Out of scope
Elaborated filter
Period Lock status
Widgets
Know-How
Additional actions on the Export page: Revoke, Add a new leave
Elaborated filter
Period Lock status
Widgets
Know-How
Additional actions on the Export page: Revoke, Add a new leave
Final solution
Final solution
The final design was simplified compared to the tested version.
Our team made this decision to make sure that users would get the most urgent updates as soon as possible.
The final design was simplified compared to the tested version.
Our team made this decision to make sure that users would get the most urgent updates as soon as possible.
Tested
Tested
Updated&Handed over: Milestone 1
Updated&Handed over: Milestone 1
Reflections&
Learnings
Reflections & Learnings
Handover&Development
Handover&Development
Life in a start-up happened🤷🏻♀️
We had to deprioritise the Time Off Management feature update, including Time Off Export for payroll
However, to make sure it is ready for developers, I delivered User Stories in collaboration with Product Owner, UI&User Flow updates, and component sets.
Life in a start-up happened🤷🏻♀️
We had to deprioritise the Time Off Management feature update, including Time Off Export for payroll
However, to make sure it is ready for developers, I delivered User Stories in collaboration with Product Owner, UI&User Flow updates, and component sets.
Design goals were:
Design goals were:
Try a new design on users with components from our updated design system
Add missing functionality according to feedback
Make feature consistent with other parts of the app to make experience more user friendly and intuitive
Try a new design on users with components from our updated design system
Add missing functionality according to feedback
Make feature consistent with other parts of the app to make experience more user friendly and intuitive
Conclusion
Conclusion
I still enjoyed working on this project, as it was putting solving of the real-time user’s problems first. After assessment, I realised that the problem is deeper than just couple of visual details and requires a thorough exploration of the whole user flow connected to the Time Reports and Payroll Systems integration. It did initiated the new stage of research and design updates within the product. Plus I made preparations for the feature update that was demanded by our users, and created a one more step towards consistent user experience and visual elements within the application.
I still enjoyed working on this project, as it was putting solving of the real-time user’s problems first. After assessment, I realised that the problem is deeper than just couple of visual details and requires a thorough exploration of the whole user flow connected to the Time Reports and Payroll Systems integration. It did initiated the new stage of research and design updates within the product. Plus I made preparations for the feature update that was demanded by our users, and created a one more step towards consistent user experience and visual elements within the application.
Thank you!
Thank you!
Contact me
Do you want to talk about anything design? Just write me a line or two!
Do you want to talk about anything design? Just write me a line or two!
Julia Demianetc, 2024
Julia Demianetc, 2024