KPILY
This is a industry design project that I worked on for Valourline Technology with two other designers.
KPILY is a web application performance management tool developed by Valourline Technologies. Its purpose is to improve employees’ performance and provide real-time feedback for companies.
Role
Product Design
Industry
Human Resources
Platform
Web App
Timeline
06/2023 - 07/2023
Project Overview
Track real-time performance of onboarded companies and landing pages
The goal of this particular project was to design a data visualization dashboard that allows the KPILY admin to view performance data of sign-ups, landing pages and usage data for all companies that subscribe to KPILY.
By conducting rapid research and utilizing the current design system, we created a high-fidelity mockup of the dashboard.
Client and Story
The Goal of Building KPILY
Companies conduct performance appraisals quarterly, but it may be too late to improve staff performance if feedback is delayed. Real-time feedback helps employees improve their performance with daily efforts. Staff are evaluated based on team KPI completion, completion rate, and innovative task completion.
KPILY was designed to help companies manage employees' performance in a gamified way. The platform features game-like responses and rewards system, which encourage both employees and managers to improve their overall work performance and productivity.
Understand User Needs
This product feature is designed for the admin of KPILY (also known as the Super Admin).
The Super Admin has access to all performance data for each onboarded company that subscribed to KPILY, as well as the landing pages and sign-up details. Due to the platform's nature, the Super Admin needs to track various types of data on a daily basis. This enables KPILY to analyze user behavior more thoroughly and identify any usage or sign-up issues.
Define the Problem
💡 How might we assist the KPILY administrator in monitoring the performance of all the onboarded companies and landing pages?
Our Final Deliverable
Enable KPILY Admin Spot Trends & Patterns of Complex Data
The dashboard contains two primary types of data: an overview of onboarded companies and site data. It includes various widgets that display different types of information, such as the monthly number of onboarded companies, overall task completion rates, webpage visits, average bounce rates, and conversion rates.
Explore ways to present the data
Identify User Groups and Data Types
KPILY has several different user groups, including line managers, company administrators (HR), and employees. To establish a clear user goal for designing the dashboard, we identified the KPILY admin as our primary user group. Only this user group is authorized to track the performance data of all onboarded companies and sign-up internally.
Our next step was to collaborate with the product manager to brainstorm all possible metrics that could be insightful to the user, based on the current product features, including games, polls and psychometrics. By determining the data users want to track, we can continue to explore ways to visualize the data and provide our users with the details that serve their needs.
Understand the Data Visualization Methods
To gain a deeper understanding of how to present data more intuitively, I created a FigJam report that consolidates my findings on the most common data visualizations, types of dashboards, and B2B dashboard best practices.
Since KPILY has a lot of information and features, it is important to know which type of graph works best when presenting certain kinds of information, so that it’ll help the user understand the information quickly. After we got to know various types of visualization and data types, we started to ideate on possible visualization to ensure a visual diversity.
Challenges and Compromises
Time constraint
We diverged when ideating on possible data types and visualizations. Meanwhile, our client kept adding design requests for extra data types that were not specified in the project requirement document. As a result, the Google Doc listing the data to track spanned over 100 pages. It was also becoming increasingly difficult to keep up with the frequent changes that arose. We realized that we would not be able to complete the high-fidelity design for all of the data requested by our client within a month.
Narrow down the scope of work
To ensure the quality of our designs, we had to determine which data would be primary and prioritized. This allowed us to prioritize the list of requirements and design the MVP within our limited timeline.
Recognizing this, we chose to simplify and condense the information into a new PRD of two pages. This document will serve as our agreed-upon list of requirements and will provide clarity and focus moving forward.
Visualize the Data
Determine the visual proportion and hierarchy
To give an overview of our initial ideas, we created wireframes to gather quick feedback from our client on the overall layout and structure of the dashboard.
Since different sizes of graphs affect the layout of the dashboard, wireframing was particularly helpful because we were able to determine the visual proportion and hierarchy of each view, and balance the content of the dashboard.
Standardize the style of our designs
One of the biggest issues that we came across was that our deliverables wireframes seemed to be disconnected and scattered. As each of us was responsible for several types of visualization, we designed those graphs separately. To establish a visual coherence, we followed the current design system of KPILY to keep all the text, colors and visualizations consistent.
Pay attention to level of details
To present the data for different modules clearly, we requested our client to clarify the information architecture of the super admin dashboard. Based on the current site map, we updated the sidebar menu and headers accordingly. This enables users to easily assess different types of data by clicking on sub-categories in the sidebar menu, thus creating a simplified information structure that does not overwhelm users.
High-fidelity Designs
Monitor the overall performance trends of onboarded users
Access the details of sign up and users that subscribed to KPILY
Get a quick overview of website performance without having to check Google Analytics
Reflections
What would I have done differently?
Although our high-fidelity mockups of dashboards provided a solid foundation for visualizing data for the super admin, we could have conducted more usability tests to further validate and iterate our designs if we had narrowed down the scope of designs from the beginning.
Next Steps
Since the latest iteration of the dashboard we designed won’t be the final version, there are still improvements that can be made.
Switch to various views of visualization type
Provide benchmarks and comparisons
Present Actionable Suggestions
More projects
KPILY
This is a industry design project that I worked on for Valourline Technology with two other designers.
KPILY is a web application performance management tool developed by Valourline Technologies. Its purpose is to improve employees’ performance and provide real-time feedback for companies.
Role
Product Design
Industry
Human Resources
Platform
Web App
Timeline
06/2023 - 07/2023
Project Overview
Track real-time performance of onboarded companies and landing pages
The goal of this particular project was to design a data visualization dashboard that allows the KPILY admin to view performance data of sign-ups, landing pages and usage data for all companies that subscribe to KPILY.
By conducting rapid research and utilizing the current design system, we created a high-fidelity mockup of the dashboard.
Client and Story
The Goal of Building KPILY
Companies conduct performance appraisals quarterly, but it may be too late to improve staff performance if feedback is delayed. Real-time feedback helps employees improve their performance with daily efforts. Staff are evaluated based on team KPI completion, completion rate, and innovative task completion.
KPILY was designed to help companies manage employees' performance in a gamified way. The platform features game-like responses and rewards system, which encourage both employees and managers to improve their overall work performance and productivity.
Understand User Needs
This product feature is designed for the admin of KPILY (also known as the Super Admin).
The Super Admin has access to all performance data for each onboarded company that subscribed to KPILY, as well as the landing pages and sign-up details. Due to the platform's nature, the Super Admin needs to track various types of data on a daily basis. This enables KPILY to analyze user behavior more thoroughly and identify any usage or sign-up issues.
Define the Problem
💡 How might we assist the KPILY administrator in monitoring the performance of all the onboarded companies and landing pages?
Our Final Deliverable
Enable KPILY Admin Spot Trends & Patterns of Complex Data
The dashboard contains two primary types of data: an overview of onboarded companies and site data. It includes various widgets that display different types of information, such as the monthly number of onboarded companies, overall task completion rates, webpage visits, average bounce rates, and conversion rates.
Explore ways to present the data
Identify User Groups and Data Types
KPILY has several different user groups, including line managers, company administrators (HR), and employees. To establish a clear user goal for designing the dashboard, we identified the KPILY admin as our primary user group. Only this user group is authorized to track the performance data of all onboarded companies and sign-up internally.
Our next step was to collaborate with the product manager to brainstorm all possible metrics that could be insightful to the user, based on the current product features, including games, polls and psychometrics. By determining the data users want to track, we can continue to explore ways to visualize the data and provide our users with the details that serve their needs.
Understand the Data Visualization Methods
To gain a deeper understanding of how to present data more intuitively, I created a FigJam report that consolidates my findings on the most common data visualizations, types of dashboards, and B2B dashboard best practices.
Since KPILY has a lot of information and features, it is important to know which type of graph works best when presenting certain kinds of information, so that it’ll help the user understand the information quickly. After we got to know various types of visualization and data types, we started to ideate on possible visualization to ensure a visual diversity.
Challenges and Compromises
Time constraint
We diverged when ideating on possible data types and visualizations. Meanwhile, our client kept adding design requests for extra data types that were not specified in the project requirement document. As a result, the Google Doc listing the data to track spanned over 100 pages. It was also becoming increasingly difficult to keep up with the frequent changes that arose. We realized that we would not be able to complete the high-fidelity design for all of the data requested by our client within a month.
Narrow down the scope of work
To ensure the quality of our designs, we had to determine which data would be primary and prioritized. This allowed us to prioritize the list of requirements and design the MVP within our limited timeline.
Recognizing this, we chose to simplify and condense the information into a new PRD of two pages. This document will serve as our agreed-upon list of requirements and will provide clarity and focus moving forward.
Visualize the Data
Determine the visual proportion and hierarchy
To give an overview of our initial ideas, we created wireframes to gather quick feedback from our client on the overall layout and structure of the dashboard.
Since different sizes of graphs affect the layout of the dashboard, wireframing was particularly helpful because we were able to determine the visual proportion and hierarchy of each view, and balance the content of the dashboard.
Standardize the style of our designs
One of the biggest issues that we came across was that our deliverables wireframes seemed to be disconnected and scattered. As each of us was responsible for several types of visualization, we designed those graphs separately. To establish a visual coherence, we followed the current design system of KPILY to keep all the text, colors and visualizations consistent.
Pay attention to level of details
To present the data for different modules clearly, we requested our client to clarify the information architecture of the super admin dashboard. Based on the current site map, we updated the sidebar menu and headers accordingly. This enables users to easily assess different types of data by clicking on sub-categories in the sidebar menu, thus creating a simplified information structure that does not overwhelm users.
High-fidelity Designs
Monitor the overall performance trends of onboarded users
Access the details of sign up and users that subscribed to KPILY
Get a quick overview of website performance without having to check Google Analytics
Reflections
What would I have done differently?
Although our high-fidelity mockups of dashboards provided a solid foundation for visualizing data for the super admin, we could have conducted more usability tests to further validate and iterate our designs if we had narrowed down the scope of designs from the beginning.
Next Steps
Since the latest iteration of the dashboard we designed won’t be the final version, there are still improvements that can be made.
Switch to various views of visualization type
Provide benchmarks and comparisons
Present Actionable Suggestions
More projects
KPILY
This is a industry design project that I worked on for Valourline Technology with two other designers.
KPILY is a web application performance management tool developed by Valourline Technologies. Its purpose is to improve employees’ performance and provide real-time feedback for companies.
Role
Product Design
Industry
Human Resources
Platform
Web App
Timeline
06/2023 - 07/2023
Project Overview
Track real-time performance of onboarded companies and landing pages
The goal of this particular project was to design a data visualization dashboard that allows the KPILY admin to view performance data of sign-ups, landing pages and usage data for all companies that subscribe to KPILY.
By conducting rapid research and utilizing the current design system, we created a high-fidelity mockup of the dashboard.
Client and Story
The Goal of Building KPILY
Companies conduct performance appraisals quarterly, but it may be too late to improve staff performance if feedback is delayed. Real-time feedback helps employees improve their performance with daily efforts. Staff are evaluated based on team KPI completion, completion rate, and innovative task completion.
KPILY was designed to help companies manage employees' performance in a gamified way. The platform features game-like responses and rewards system, which encourage both employees and managers to improve their overall work performance and productivity.
Understand User Needs
This product feature is designed for the admin of KPILY (also known as the Super Admin).
The Super Admin has access to all performance data for each onboarded company that subscribed to KPILY, as well as the landing pages and sign-up details. Due to the platform's nature, the Super Admin needs to track various types of data on a daily basis. This enables KPILY to analyze user behavior more thoroughly and identify any usage or sign-up issues.
Define the Problem
💡 How might we assist the KPILY administrator in monitoring the performance of all the onboarded companies and landing pages?
Our Final Deliverable
Enable KPILY Admin Spot Trends & Patterns of Complex Data
The dashboard contains two primary types of data: an overview of onboarded companies and site data. It includes various widgets that display different types of information, such as the monthly number of onboarded companies, overall task completion rates, webpage visits, average bounce rates, and conversion rates.
Explore ways to present the data
Identify User Groups and Data Types
KPILY has several different user groups, including line managers, company administrators (HR), and employees. To establish a clear user goal for designing the dashboard, we identified the KPILY admin as our primary user group. Only this user group is authorized to track the performance data of all onboarded companies and sign-up internally.
Our next step was to collaborate with the product manager to brainstorm all possible metrics that could be insightful to the user, based on the current product features, including games, polls and psychometrics. By determining the data users want to track, we can continue to explore ways to visualize the data and provide our users with the details that serve their needs.
Understand the Data Visualization Methods
To gain a deeper understanding of how to present data more intuitively, I created a FigJam report that consolidates my findings on the most common data visualizations, types of dashboards, and B2B dashboard best practices.
Since KPILY has a lot of information and features, it is important to know which type of graph works best when presenting certain kinds of information, so that it’ll help the user understand the information quickly. After we got to know various types of visualization and data types, we started to ideate on possible visualization to ensure a visual diversity.
Challenges and Compromises
Time constraint
We diverged when ideating on possible data types and visualizations. Meanwhile, our client kept adding design requests for extra data types that were not specified in the project requirement document. As a result, the Google Doc listing the data to track spanned over 100 pages. It was also becoming increasingly difficult to keep up with the frequent changes that arose. We realized that we would not be able to complete the high-fidelity design for all of the data requested by our client within a month.
Narrow down the scope of work
To ensure the quality of our designs, we had to determine which data would be primary and prioritized. This allowed us to prioritize the list of requirements and design the MVP within our limited timeline.
Recognizing this, we chose to simplify and condense the information into a new PRD of two pages. This document will serve as our agreed-upon list of requirements and will provide clarity and focus moving forward.
Visualize the Data
Determine the visual proportion and hierarchy
To give an overview of our initial ideas, we created wireframes to gather quick feedback from our client on the overall layout and structure of the dashboard.
Since different sizes of graphs affect the layout of the dashboard, wireframing was particularly helpful because we were able to determine the visual proportion and hierarchy of each view, and balance the content of the dashboard.
Standardize the style of our designs
One of the biggest issues that we came across was that our deliverables wireframes seemed to be disconnected and scattered. As each of us was responsible for several types of visualization, we designed those graphs separately. To establish a visual coherence, we followed the current design system of KPILY to keep all the text, colors and visualizations consistent.
Pay attention to level of details
To present the data for different modules clearly, we requested our client to clarify the information architecture of the super admin dashboard. Based on the current site map, we updated the sidebar menu and headers accordingly. This enables users to easily assess different types of data by clicking on sub-categories in the sidebar menu, thus creating a simplified information structure that does not overwhelm users.
High-fidelity Designs
Monitor the overall performance trends of onboarded users
Access the details of sign up and users that subscribed to KPILY
Get a quick overview of website performance without having to check Google Analytics
Reflections
What would I have done differently?
Although our high-fidelity mockups of dashboards provided a solid foundation for visualizing data for the super admin, we could have conducted more usability tests to further validate and iterate our designs if we had narrowed down the scope of designs from the beginning.
Next Steps
Since the latest iteration of the dashboard we designed won’t be the final version, there are still improvements that can be made.
Switch to various views of visualization type
Provide benchmarks and comparisons
Present Actionable Suggestions