Perk Payroll.com
Redesigned an entire payroll dashboard experience and generated 30% growth in sales.
Role
UX designer
Timeline
8 months
Tools
Adobe XD, Miro
Deliverables
UI, UX, IA (Information architecture)
Meet the client
Brio is a cloud consulting
company focused on IT
automation.
Perk payroll product was owned by Brio
Team
CEO, Product manager,
UI developer
Impact
+30%
Sales
6 in 10 users bought the product
compared to 3 in 10 before
+40%
User satisfaction
8 in 10 users are happy with the dashboard redesign
compared to 4 in 10 before
Before
Unclear dashboard
Poor Information architecture
Result
Clear dashboard
navigation
Better Information
architecture
Understanding the Problem
Perk payroll had low user satisfaction. Unclear dashboard navigation and poor IA created
an unpredictable experience and low sales of the product.
Solution
Redesigned the whole Perk payroll experience with better information architecture, clear navigation that reflects their value proposition (Best HR friendly product). Users immediately
loved the new dashboard experience boosting user satisfaction and sales.
Perk Payroll.com
Redesigned an entire payroll dashboard experience and generated 30% growth in sales.
Role
UX designer
Timeline
8 months
Tools
Adobe XD, Miro
Deliverables
UI, UX, IA (Information Architecture)
Meet the client
Brio is a cloud consulting company focused on IT automation.
Perk payroll product was owned by Brio
Team
CEO, Product manager,
UI developer
Impact
+30%
Sales
6 in 10 users bought the product
compared to 3 in 10 before
+40%
User satisfaction
8 in 10 users are happy with the dashboard redesign
compared to 4 in 10 before
Before
Unclear dashboard
Poor Information architecture
Result
Clear dashboard
navigation
Better Information
architecture
Understanding the problem
Perk payroll had low user satisfaction. Unclear dashboard navigation and poor IA created
an unpredictable experience and low sales of the product.
Solution
Redesigned the whole Perk payroll experience with better information architecture, clear
navigation that reflects their value proposition (Best HR friendly product). Users immediately
loved the new dashboard experience boosting user satisfaction and sales.
Key screens
Manager / Admin dashboard
Enables Managers or Admins to view team performance, requests, and insights
Attendance dashboard
Provides the Manager and admin to view everyday’s team attendance
Payroll processing dashboard
The page is for Admins to handle the company's payroll processing tasks.
Leave dashboard
Both the Manager or Admin can view all pending leave requests of the team
Key screens
Manager / Admin dashboard
Enables Managers or Admins to view team performance, requests, and insights
Attendance dashboard
Provides the Manager and admin to view every day's team attendance
Leave dashboard
Both the Manager or Admin can view all pending leave requests of the team
Payroll processing dashboard
The page is for Admins to handle the company's payroll processing tasks.
Exploring the problem
1
Redesign process
Experience
Did not meet expectations
End users
Employees
Exploring the problem
Solving the
challenges
Wireframing
& Prototyping
Reflections
Design decision 1
We did usability testing to understand
why the dashboard did not meet
user expectations
Result
There were 4 usability issues in the
current dashboard
Current Information architecture
Design decision 2
Organized the current information architecture to address issues with hierarchy and navigation.
Result
There were 3 pain points in the
current information architecture
Pain points
1. IA had miss-structured content in the application
3. It was hard for a user to find his necessary features
2. The admin roles of the application were mixed in the same level of normal employee role
Design decision 3
Based on the pain points, employees
are categorized as Manager and Admin to access dashboard features
Manager
Employee views all his team’s
information
Admin
Employee like a CEO, has access to
all employee’s information.
Design decision 4
Identified two key redesign
challenges impacting user
expectations.
Redesign challenges
01
Develop a new Information Architecture by defining employee roles.
02
Redesign the dashboard interface for easier feature access.
Redesign process
Exploring the
problem
Solving the
challenges
wireframing &
Prototyping
Reflections
1
Exploring the problem
End users
Employees
Experience
Did not meet expectations
Design decision 1
We did usability testing to understand
why the dashboard did not meet user expectations
Result
There were 4 usability issues in the current dashboard
Current Information architecture
Design decision 2
Organized the current information architecture to address issues with hierarchy and navigation.
Result
There were 3 pain points in the current information architecture
Pain points
1.
IA had miss-structured content in the application
2.
The admin roles of the application were mixed in the same level of normal employee role
3.
It was hard for a user to find
necessary dashboard features
Design decision 3
Based on the pain points, employees
are categorized as Manager and
Admin to access dashboard features
Manager
Employee views all his team’s
information
Admin
Employee like a CEO, has access to
all employee’s information.
Design decision 4
Identified two key redesign
challenges impacting user
expectations.
Redesign challenges
01
Develop a new Information Architecture by defining employee roles.
02
Redesign the dashboard interface for easier feature access.
Solving the challenges
2
Iterations
3 with manager and team
Outcome
Clear IA defining roles
New information architecture
Design decision 1
Dashboard resources are categorized under Me, My Team, and Admin tabs to have clear functions in the company.
Result
With clear IA it solved the 1st challenge to define roles.
Me tab
Employee can access his personal info under this tab.
My team tab
An employee in manager role can view all teams information.
Admin tab
This tab provides access to company payroll and team info.
Design decision 2
We conducted competitive research to identify features for
our new dashboard design.
Result
Insights from competitive research
were used to create wireframes for
new dashboard
Competitive research
Perk payroll
Complex dashboard UI
Reports were hard to
analyse
Payroll process was not structured
Limited options for
Log in/ out
Competitor
Intuitive dashboard
Comprehensive and Intuitive reporting
6 steps payroll
method
Multiple device options for Log in/ out
Insights
Improving the dashboard
UI and payroll process
Considering more
options for Login/ logout
Providing intuitive reporting
2
Solving the challenges
Iterations
3 with manager and team
Outcome
Clear IA defining roles
New information architecture
Design decision 1
Dashboard resources are categorized under Me, My Team, and Admin tabs to
have clear functions in the company.
Result
With clear IA it solved the 1st
challenge to define roles.
Me tab
Employee can access his personal
info under this tab.
My team tab
There were 4 usability issues in the current dashboard
Admin tab
This tab provides access to company payroll and team info.
Design decision 2
Wire-framed ideas and had multiple feedbacks from the client for iterations
Result
The finalized idea included all
essential dashboard features for
the user.
Competitive research
Perk payroll
Complex dashboard UI
Reports were hard to
analyse
Payroll process was not
structured
Limited options for
Log in/ out
Competitor
Intuitive dashboard
Comprehensive and Intuitive reporting
6 steps payroll
method
Multiple device option for
Log in/ out
Insights
Improving the dashboard UI and payroll process
Considering more options for
Login/ logout
Providing intuitive reporting
Wireframing & Prototyping
3
Design decision
Wire-framed ideas and had multiple
feedbacks from the client for iterations
Result
The finalized idea included all essential dashboard features for
the user.
Iterations; employee dashboard
Iteration decision
Log in option, leaves, taxes and payroll info are added to help the user to view necessary features
Result
Solved the challenge of having multiple log in options and better insights for employees
Iterations; manager dashboard
Iteration decision
Iterations were done by adding leave requests and other team members information to the dashboard
Result
Solved the challenge of intuitive reporting and better access features for manager role
3
Wireframing
Design decision
We conducted competitive research to identify features forour new dashboard design.
Result
Insights from competitive research were used to create wireframes for
new dashboard
Iterations; employee dashboard
Iteration decision
Log in option, leaves, taxes and payroll info are added to help the user to view necessary features
Result
Solved the challenge of having
multiple log in options and better insights for employees
Iterations; manager dashboard
Iteration decision
Iterations were done by adding leave requests and other team members information to the dashboard
Result
Solved the challenge of intuitive reporting and better access features for manager role
Reflections
4
Diverse Screens
Designing 35-40 screens for each profile was a rewarding challenge that greatly enhanced my learning and experience on the project.
Project timeline
Despite the tight timeline, I efficiently delivered, learning to prioritize and adapt.
Design leadership
As one of two designers, I led design decisions and communicated strategies with the client, enhancing my leadership and collaboration skills.
What would I do differently ?
Additional time could have offered opportunities for deeper research and design refinements.
4
Reflections
Diverse Screens
Designing 35-40 screens for each profile was a rewarding challenge that greatly enhanced my learning and experience on the project.
Project timeline
Despite the tight timeline, I efficiently delivered, learning to prioritize and adapt.
Design leadership
As one of two designers, I led design decisions and communicated strategies with the client, enhancing
my leadership and collaboration skills.