KPILY
KPILY
KPILY
My Role: UI Designer
Project Duration: 40 Hours • April 2023
Team: Kelsey Ferguson + Nattie Him
My Role: UI Designer
Project Duration: 40 Hours • April 2023
Team: Kelsey Ferguson + Nattie Him
My Role: UI Designer
Project Duration: 40 Hours • April 2023
Team: Kelsey Ferguson + Nattie Him
The
Client
The Client
The Client
KPILY, a new product from Valourline Technologies, is a task and performance management tool for companies with the purpose of improving employee performance by providing real-time feedback. Performance appraisals usually happen quarterly, which inhibits staff from receiving timely feedback and making improvements within the quarter. Managers giving reviews often have a heavy cognitive load and could easily forget notable performance as months pass by.
KPILY, a new product from Valourline Technologies, is a task and performance management tool for companies with the purpose of improving employee performance by providing real-time feedback. Performance appraisals usually happen quarterly, which inhibits staff from receiving timely feedback and making improvements within the quarter. Managers giving reviews often have a heavy cognitive load and could easily forget notable performance as months pass by.
KPILY, a new product from Valourline Technologies, is a task and performance management tool for companies with the purpose of improving employee performance by providing real-time feedback. Performance appraisals usually happen quarterly, which inhibits staff from receiving timely feedback and making improvements within the quarter. Managers giving reviews often have a heavy cognitive load and could easily forget notable performance as months pass by.
The Project Goal
The Project Goal
The Project Goal
The ultimate goal of this new product is to reduce the bias created by time, memory, and co-worker relationships for performance reviews – this is done through earned rewards on an individual and team level based on KPI completion.
The ultimate goal of this new product is to reduce the bias created by time, memory, and co-worker relationships for performance reviews – this is done through earned rewards on an individual and team level based on KPI completion.
The ultimate goal of this new product is to reduce the bias created by time, memory, and co-worker relationships for performance reviews – this is done through earned rewards on an individual and team level based on KPI completion.
The Handoff
This project was passed off from previous teams of UX researchers and UI designers. With copious research, deliverables, a design system, and many hi-fidelity screens already completed, my team and I were tasked to implement all Admin functions and flows alongside additional features to make the product flow seamlessly.
We were presented with a robust list of solutions from the project manager to understand and evaluate what to include in the MVP with the goal of delivering developer-ready hi-fidelity screens.
This project was passed off from previous teams of UX researchers and UI designers. With copious research, deliverables, a design system, and many hi-fidelity screens already completed, my team and I were tasked to implement all Admin functions and flows alongside additional features to make the product flow seamlessly.
We were presented with a robust list of solutions from the project manager to understand and evaluate what to include in the MVP with the goal of delivering developer-ready hi-fidelity screens.
This project was passed off from previous teams of UX researchers and UI designers. With copious research, deliverables, a design system, and many hi-fidelity screens already completed, my team and I were tasked to implement all Admin functions and flows alongside additional features to make the product flow seamlessly.
We were presented with a robust list of solutions from the project manager to understand and evaluate what to include in the MVP with the goal of delivering developer-ready hi-fidelity screens.
The Process
The Process
The Process
Empathize
Review UX Research,
UI Design System,
Hi-Fi Screens
Review UX Research,
UI Design System,
Hi-Fi Screens
Review UX Research,
UI Design System,
Hi-Fi Screens
Define
Prioritization Matrix
Prioritization Matrix
Prioritization Matrix
Ideate
Information Architecture
User Stories
Information Architecture
User Stories
Information Architecture
User Stories
Prototype
High Fidelity Mockups
High Fidelity Mockups
High Fidelity Mockups
Test
Usability Testing
Usability Testing
Usability Testing
Reflect
Lessons Learned
Lessons Learned
Lessons Learned
The Phases
The Phases
The Phases
Phase One - Empathy
Phase One - Empathy
Phase One - Empathy
Using design thinking for this project at its near finished state, I used the empathy stage to dive deeply into the research and truly understand the goals and intent set from the UX research team and how those were translated into design from the first UI team.
Using design thinking for this project at its near finished state, I used the empathy stage to dive deeply into the research and truly understand the goals and intent set from the UX research team and how those were translated into design from the first UI team.
Using design thinking for this project at its near finished state, I used the empathy stage to dive deeply into the research and truly understand the goals and intent set from the UX research team and how those were translated into design from the first UI team.
Phase Two - Define
Phase Two - Define
Phase Two - Define
Now that the project scope started to come into focus, my team and I set out with priorities that would bring the most value to the product.
Now that the project scope started to come into focus, my team and I set out with priorities that would bring the most value to the product.
Now that the project scope started to come into focus, my team and I set out with priorities that would bring the most value to the product.
Solution Statement
Solution Statement
Solution Statement
My goal was to create a customizable Admin dashboard (1) with staff and team onboarding functionalities, a performance data dashboard (2) for Admins to visually see how the overall company and its teams were performing, and a rewards system (3) that the admin would tailor for their company needs.
The additional value to all of these screens would be the ability to filter, edit, export, and archive any of this data. It is vital for the dashboard and its functionalities to allow the Admin to have complete control of all settings for the product, therefore reducing any bias at the managerial level. I wanted to ensure the Admin could navigate through the product with ease as well as effectively manage their staff and point system with simplified editing capabilities.
My goal was to create a customizable Admin dashboard (1) with staff and team onboarding functionalities, a performance data dashboard (2) for Admins to visually see how the overall company and its teams were performing, and a rewards system (3) that the admin would tailor for their company needs.
The additional value to all of these screens would be the ability to filter, edit, export, and archive any of this data. It is vital for the dashboard and its functionalities to allow the Admin to have complete control of all settings for the product, therefore reducing any bias at the managerial level. I wanted to ensure the Admin could navigate through the product with ease as well as effectively manage their staff and point system with simplified editing capabilities.
My goal was to create a customizable Admin dashboard (1) with staff and team onboarding functionalities, a performance data dashboard (2) for Admins to visually see how the overall company and its teams were performing, and a rewards system (3) that the admin would tailor for their company needs.
The additional value to all of these screens would be the ability to filter, edit, export, and archive any of this data. It is vital for the dashboard and its functionalities to allow the Admin to have complete control of all settings for the product, therefore reducing any bias at the managerial level. I wanted to ensure the Admin could navigate through the product with ease as well as effectively manage their staff and point system with simplified editing capabilities.
Phase Three - Ideate
Phase Three - Ideate
Phase Three - Ideate
In order to define what solutions needed to be included in the MVP for this dashboard, competitive research proved valuable before designing. Even though this project was near completion, I didn’t want to jump straight into the UI without a bit more UX on these specific needs. I created an information architecture tree to map out exactly what would bring the most value to the Admin dashboard.
In order to define what solutions needed to be included in the MVP for this dashboard, competitive research proved valuable before designing. Even though this project was near completion, I didn’t want to jump straight into the UI without a bit more UX on these specific needs. I created an information architecture tree to map out exactly what would bring the most value to the Admin dashboard.
In order to define what solutions needed to be included in the MVP for this dashboard, competitive research proved valuable before designing. Even though this project was near completion, I didn’t want to jump straight into the UI without a bit more UX on these specific needs. I created an information architecture tree to map out exactly what would bring the most value to the Admin dashboard.
Phase Four - Prototype
Phase Four - Prototype
Phase Four - Prototype
Solution 1: Admin Dashboard
Solution 1: Admin Dashboard
Solution 1: Admin Dashboard
Using the design system, I built out the admin dashboard for approval integrating all the MVP features. This dashboard will act as the landing page for the product, allowing the Admin user to be in total control of all of their permissions and efficiently navigate to any pertinent data to be edited or managed.
I decided the second priority for the Admin dash to be the ability to onboard staff, create teams, and manage/edit them accordingly. The product’s value for the Admin comes in the ease of adding employees so all staff can begin using the product right away to earn their rewards for tasks completed. This means that the Admin/HR backend must be easy to follow and swift to manage. The first way to make this simplified for the Admin was to assign each team a specific color to be utilized throughout all data related to that team. A filter menu (with position, team, manager, location, and status) gives the Admin complete control of any employee they need to manage. An edit function per each employee also allows for efficient changes should staff change teams, get promoted, move locations, etc.
Using the design system, I built out the admin dashboard for approval integrating all the MVP features. This dashboard will act as the landing page for the product, allowing the Admin user to be in total control of all of their permissions and efficiently navigate to any pertinent data to be edited or managed.
I decided the second priority for the Admin dash to be the ability to onboard staff, create teams, and manage/edit them accordingly. The product’s value for the Admin comes in the ease of adding employees so all staff can begin using the product right away to earn their rewards for tasks completed. This means that the Admin/HR backend must be easy to follow and swift to manage. The first way to make this simplified for the Admin was to assign each team a specific color to be utilized throughout all data related to that team. A filter menu (with position, team, manager, location, and status) gives the Admin complete control of any employee they need to manage. An edit function per each employee also allows for efficient changes should staff change teams, get promoted, move locations, etc.
Using the design system, I built out the admin dashboard for approval integrating all the MVP features. This dashboard will act as the landing page for the product, allowing the Admin user to be in total control of all of their permissions and efficiently navigate to any pertinent data to be edited or managed.
I decided the second priority for the Admin dash to be the ability to onboard staff, create teams, and manage/edit them accordingly. The product’s value for the Admin comes in the ease of adding employees so all staff can begin using the product right away to earn their rewards for tasks completed. This means that the Admin/HR backend must be easy to follow and swift to manage. The first way to make this simplified for the Admin was to assign each team a specific color to be utilized throughout all data related to that team. A filter menu (with position, team, manager, location, and status) gives the Admin complete control of any employee they need to manage. An edit function per each employee also allows for efficient changes should staff change teams, get promoted, move locations, etc.
Admin Dashboard
Admin Dashboard
Admin Dashboard
All Staff Filtering
All Staff Filtering
All Staff Filtering
Edit Employee
Edit Employee
Edit Employee
Add New
Add New
Add New
Solution 2: Performance Data
Solution 2: Performance Data
Solution 2: Performance Data
Next, I turned my focus to the performance data, where the admin would be able to view the entire company’s performance with various visuals. These graphs and charts bring true meaning to the product’s goal – an admin will quickly be able to visualize all performance data without the bias of co-worker relationships as the rewards data is pure evidence of performance.
In order to bring additional value to this page and allow it to be customizable, I created filters for quarterly progress and individual team progress to make understanding the data as specific as needed for the performance review. Being able to break down performance data by time and team also aids in reducing bias — admins may forget notable performance at the beginning of the quarter. Creating visuals for items such as tasks completed, point percentages, overall progress, leaderboards, and response rate will help the Admin gauge exactly how their company is performing and where to focus their energy to make improvements.
Next, I turned my focus to the performance data, where the admin would be able to view the entire company’s performance with various visuals. These graphs and charts bring true meaning to the product’s goal – an admin will quickly be able to visualize all performance data without the bias of co-worker relationships as the rewards data is pure evidence of performance.
In order to bring additional value to this page and allow it to be customizable, I created filters for quarterly progress and individual team progress to make understanding the data as specific as needed for the performance review. Being able to break down performance data by time and team also aids in reducing bias — admins may forget notable performance at the beginning of the quarter. Creating visuals for items such as tasks completed, point percentages, overall progress, leaderboards, and response rate will help the Admin gauge exactly how their company is performing and where to focus their energy to make improvements.
Next, I turned my focus to the performance data, where the admin would be able to view the entire company’s performance with various visuals. These graphs and charts bring true meaning to the product’s goal – an admin will quickly be able to visualize all performance data without the bias of co-worker relationships as the rewards data is pure evidence of performance.
In order to bring additional value to this page and allow it to be customizable, I created filters for quarterly progress and individual team progress to make understanding the data as specific as needed for the performance review. Being able to break down performance data by time and team also aids in reducing bias — admins may forget notable performance at the beginning of the quarter. Creating visuals for items such as tasks completed, point percentages, overall progress, leaderboards, and response rate will help the Admin gauge exactly how their company is performing and where to focus their energy to make improvements.
Performance Dashboard - Overall
Performance Dashboard - Overall
Performance Dashboard - Overall
Performance Dashboard - Team
Performance Dashboard - Team
Performance Dashboard - Team
Solution 3: Rewards System
Solution 3: Rewards System
Solution 3: Rewards System
Finally, the MVP needed to allow the Admin to create a set of points and badges for the reward system to function. The project manager originally mapped out the points to be set by the manager of each team separately – I suggested that this be done by the Admin to ensure each team has the opportunity to gain the same amount of points. Allowing the Admin to be in control and set the reward system for the entire company underlines the goal of KPILY – to be fair regarding performance and reduce the bias of memory and time as all staff will have equal opportunity to receive rewards. This idea was welcomed and implemented. The flow for points (both positive and negative) and badges is completely customized by the Admin. Again, they are entirely editable as the Admin may need to adjust settings as needs change for the business.
Finally, the MVP needed to allow the Admin to create a set of points and badges for the reward system to function. The project manager originally mapped out the points to be set by the manager of each team separately – I suggested that this be done by the Admin to ensure each team has the opportunity to gain the same amount of points. Allowing the Admin to be in control and set the reward system for the entire company underlines the goal of KPILY – to be fair regarding performance and reduce the bias of memory and time as all staff will have equal opportunity to receive rewards. This idea was welcomed and implemented. The flow for points (both positive and negative) and badges is completely customized by the Admin. Again, they are entirely editable as the Admin may need to adjust settings as needs change for the business.
Finally, the MVP needed to allow the Admin to create a set of points and badges for the reward system to function. The project manager originally mapped out the points to be set by the manager of each team separately – I suggested that this be done by the Admin to ensure each team has the opportunity to gain the same amount of points. Allowing the Admin to be in control and set the reward system for the entire company underlines the goal of KPILY – to be fair regarding performance and reduce the bias of memory and time as all staff will have equal opportunity to receive rewards. This idea was welcomed and implemented. The flow for points (both positive and negative) and badges is completely customized by the Admin. Again, they are entirely editable as the Admin may need to adjust settings as needs change for the business.
Badge Settings
Badge Settings
Badge Settings
Point Settings
Point Settings
Point Settings
Add New Badge
Add New Badge
Add New Badge
Add New Points
Add New Points
Add New Points
Phase Five - Test
Phase Five - Test
Phase Five - Test
The original project plan scheduled a week for five usability tests to validate the designs, however the project manager made an executive decision to opt out of these tests. Instead of testing, we spent our final week continuing to create and design high-fidelity screens as the developers had already started making the product come to life. The project manager explained that the most value for her would be finishing the remainder of the MVP screens to stay on budget and schedule.
The original project plan scheduled a week for five usability tests to validate the designs, however the project manager made an executive decision to opt out of these tests. Instead of testing, we spent our final week continuing to create and design high-fidelity screens as the developers had already started making the product come to life. The project manager explained that the most value for her would be finishing the remainder of the MVP screens to stay on budget and schedule.
The original project plan scheduled a week for five usability tests to validate the designs, however the project manager made an executive decision to opt out of these tests. Instead of testing, we spent our final week continuing to create and design high-fidelity screens as the developers had already started making the product come to life. The project manager explained that the most value for her would be finishing the remainder of the MVP screens to stay on budget and schedule.
The
Conclusion
The
Conclusion
The
Conclusion
This project taught me so much about jumping into a project that had already been started by previous teams. We were able to deliver all of the above Admin flows alongside pages for billing, settings, help and FAQ, company wide polls, games, psychometrics, an organogram, a landing page, and finally a sign up and login screen. It was an incredibly productive 40 hours and I am grateful to have real-world experience working in a team with a project manager.
If I were to do anything differently, I would have asked many more clarifying questions to the stakeholders from the start. Each weekly meeting with the project manager shed light on aspects of the product that required a lot of conversation to understand the requested features and how they should function. I would have also loved to validate our designs and conduct usability tests however I understand that oftentimes there isn’t always time and budget to perform tests – a very real world situation!
This project taught me so much about jumping into a project that had already been started by previous teams. We were able to deliver all of the above Admin flows alongside pages for billing, settings, help and FAQ, company wide polls, games, psychometrics, an organogram, a landing page, and finally a sign up and login screen. It was an incredibly productive 40 hours and I am grateful to have real-world experience working in a team with a project manager.
If I were to do anything differently, I would have asked many more clarifying questions to the stakeholders from the start. Each weekly meeting with the project manager shed light on aspects of the product that required a lot of conversation to understand the requested features and how they should function. I would have also loved to validate our designs and conduct usability tests however I understand that oftentimes there isn’t always time and budget to perform tests – a very real world situation!
This project taught me so much about jumping into a project that had already been started by previous teams. We were able to deliver all of the above Admin flows alongside pages for billing, settings, help and FAQ, company wide polls, games, psychometrics, an organogram, a landing page, and finally a sign up and login screen. It was an incredibly productive 40 hours and I am grateful to have real-world experience working in a team with a project manager.
If I were to do anything differently, I would have asked many more clarifying questions to the stakeholders from the start. Each weekly meeting with the project manager shed light on aspects of the product that required a lot of conversation to understand the requested features and how they should function. I would have also loved to validate our designs and conduct usability tests however I understand that oftentimes there isn’t always time and budget to perform tests – a very real world situation!