Streamlining a Talent Management system: A full UX revamp
Streamlining a Talent Management system: A full UX revamp
📁 Project Overview
📁 Project Overview
This case study presents a project focused on addressing the low usage rate of an Enterprise Resource Planning (ERP) platform module. Although the tool was meant to help HR and talent management professionals with acquiring and managing talent, churn rates were very high and hardly anyone used it.
This case study presents a project focused on addressing the low usage rate of an Enterprise Resource Planning (ERP) platform module. Although the tool was meant to help HR and talent management professionals with acquiring and managing talent, churn rates were very high and hardly anyone used it.
🎯 Goals
🎯 Goals
Identify why employees avoided using the platform and “People” page
Identify why employees avoided using the platform and “People” page
Find methods of adapting the platform to user needs and requirements
Find methods of adapting the platform to user needs and requirements
Increase user engagement and adoption rates
Increase user engagement and adoption rates
👩🏻💻 Role
👩🏻💻 Role
Led research efforts throughout the entire duration of the project
Led research efforts throughout the entire duration of the project
Contributed significantly to the UX and visual design of the platform
Contributed significantly to the UX and visual design of the platform
Validated design decisions through a continuous iterative process
Validated design decisions through a continuous iterative process
Original design
Final iteration
Original design
Final iteration
Original design
Final iteration
getting to know the problem
getting to know the problem
What we wanted to discover
What we wanted to discover
Our main goals were to identify inefficiencies within the ERP platform and to understand their impact on users. We also wanted to find out what users expected from the platform’s functionality, and reach research-backed conclusions to guide the redesign process.
Our main goals were to identify inefficiencies within the ERP platform and to understand their impact on users. We also wanted to find out what users expected from the platform’s functionality, and reach research-backed conclusions to guide the redesign process.
What methods we used
What methods we used
We conducted exploratory interviews with stakeholders, which were followed by semi-structured interviews with employees. We also took a deep dive into internal user feedback.
We conducted exploratory interviews with stakeholders, which were followed by semi-structured interviews with employees. We also took a deep dive into internal user feedback.
What the outcome was
What the outcome was
Several issues relating to search functionality and interface clutter were discovered. Other important pain points identified were caused by problems with the filtering system.
Several issues relating to search functionality and interface clutter were discovered. Other important pain points identified were caused by problems with the filtering system.
Setting goals
Setting goals
As a team, we created research questions to establish clear objectives for our study. These questions also clarified to stakeholders what we aimed to uncover through the process.
As a team, we created research questions to establish clear objectives for our study. These questions also clarified to stakeholders what we aimed to uncover through the process.
1.
1.
What issues do users face when searching or using the search bar?
What issues do users face when searching or using the search bar?
2.
2.
How do the interface & layout affect navigation and task efficiency?
How do the interface & layout affect navigation and task efficiency?
3.
3.
How do these issues affect platform satisfaction & perception?
How do these issues affect platform satisfaction & perception?
Interviewing stakeholders and employees
Interviewing stakeholders and employees
I conducted a number of exploratory interviews with key stakeholders to better understand the problem space, followed by semi-structured interviews with 5 employees to learn more about their day-to-day challenges and priorities.
I conducted a number of exploratory interviews with key stakeholders to better understand the problem space, followed by semi-structured interviews with 5 employees to learn more about their day-to-day challenges and priorities.
Key insights
Key insights
Interview data validated internal company feedback and deepened the team’s understanding of why the platform wasn’t being used.
Interview data validated internal company feedback and deepened the team’s understanding of why the platform wasn’t being used.
general UX issues
Discussions confirmed that the interface and search function were contributing significantly to user frustrations.
Discussions confirmed that the interface and search function were contributing significantly to user frustrations.
unpredictable behaviour
There was a big mismatch between how the users expected the platform’s core features to work and how they actually worked.
There was a big mismatch between how the users expected the platform’s core features to work and how they actually worked.
filtering issues
Several issues with the filtering system were uncovered and valuable data was collected to better understand the problem.
Several issues with the filtering system were uncovered and valuable data was collected to better understand the problem.
expectations not met
Employee expectations were that using the platform would quickly lead to finding new candidates for projects.
Employee expectations were that using the platform would quickly lead to finding new candidates for projects.
Stakeholder confirmation
Stakeholders confirmed users were having trouble with the platform’s interface and search functions
Stakeholders confirmed users were having trouble with the platform’s interface and search functions
Onboarding troubles
New hires have a hard time learning how to use the platform and often need to ask for help from more senior colleagues
New hires have a hard time learning how to use the platform and often need to ask for help from more senior colleagues
Interview highlights
Interview highlights
These are some of the key highlights from the employee interviews. They reveal important insights into their experience when using the platform.
These are some of the key highlights from the employee interviews. They reveal important insights into their experience when using the platform.
“Honestly, it just feels really overwhelming sometimes. There’s so much on the screen that I lose track of where things are.”
“Honestly, it just feels really overwhelming sometimes. There’s so much on the screen that I lose track of where things are.”
“I usually can’t find the right filter. The screen also goes blank after searching, and I don’t always know why. It kinda makes me worried I’m doing something wrong."
“I usually can’t find the right filter. The screen also goes blank after searching, and I don’t always know why. It kinda makes me worried I’m doing something wrong."
"I was sitting there thinking, what am I even looking at? I just wish getting things done wasn’t so complicated.
"I was sitting there thinking, what am I even looking at? I just wish getting things done wasn’t so complicated.
defining the issues
defining the issues
Turning raw data into insights
Turning raw data into insights
We coded and categorized all the raw data we obtained from the research phase, revealing five distinct themes.
We coded and categorized all the raw data we obtained from the research phase, revealing five distinct themes.
Telling a story
Telling a story
I created a User Journey Map to point out user pain points and opportunities. My goal was to help inform our research conclusions and the redesign process. Stakeholders would also benefit from being shown visually how the issues we found obstructed employee workflows.
I created a User Journey Map to point out user pain points and opportunities. My goal was to help inform our research conclusions and the redesign process. Stakeholders would also benefit from being shown visually how the issues we found obstructed employee workflows.
Answering the research questions
Answering the research questions
We grouped our research findings and identified three key areas of improvement: searching, filtering, and the layout/UI.
We grouped our research findings and identified three key areas of improvement: searching, filtering, and the layout/UI.
Finding the search bar is hard and using it causes frustration
Finding the search bar is hard and using it causes frustration
Users miss the search bar because it’s not visually distinct
Users miss the search bar because it’s not visually distinct
There is no guidance or feedback when using the search function
There is no guidance or feedback when using the search function
Invalid searches lead to a blank page offering no explanations
Invalid searches lead to a blank page offering no explanations
Filters should help refine searches, instead they get in the way
Filters should help refine searches, instead they get in the way
Lack of filter visibility leads to confusion about which filter is active
Lack of filter visibility leads to confusion about which filter is active
Filter interactions are inconsistent and don’t work as intended
Filter interactions are inconsistent and don’t work as intended
Users can’t easily find out which filters they selected
Users can’t easily find out which filters they selected
The UI requires too much mental load to navigate
The UI requires too much mental load to navigate
Poorly constructed visual hierarchy, driving focus away from what’s important
Poorly constructed visual hierarchy, driving focus away from what’s important
Users feel overwhelmed due to the high number of elements on the screen
Users feel overwhelmed due to the high number of elements on the screen
The layout feels static and doesn’t adapt to user preferences
The layout feels static and doesn’t adapt to user preferences
prototyping and testing
prototyping and testing
From insights to action
From insights to action
Before coming up with solutions, we created a problem statement to better frame the challenges we faced.
Before coming up with solutions, we created a problem statement to better frame the challenges we faced.
Problem statement
Employees are struggling to use core features such as searching and filtering. The UI also requires too much mental load to navigate, making it harder to complete tasks. By restructuring the interface and adapting the core features to work in service of the users, we could ease daily frustrations and encourage adoption.
Employees are struggling to use core features such as searching and filtering. The UI also requires too much mental load to navigate, making it harder to complete tasks. By restructuring the interface and adapting the core features to work in service of the users, we could ease daily frustrations and encourage adoption.
An overview of the platform’s design
An overview of the platform’s design
Users missed the search and filter bars due to poor visual hierarchy and layout. For example, the filter bar was hidden behind a small and easily overlooked blue button near the search bar.
Users missed the search and filter bars due to poor visual hierarchy and layout. For example, the filter bar was hidden behind a small and easily overlooked blue button near the search bar.
The extent of the clutter
The extent of the clutter
With the filter bar extended, we can see how bad the interface clutter really is. All those filters crammed into two rows occupy too much of the screen and make it feel clogged.
With the filter bar extended, we can see how bad the interface clutter really is. All those filters crammed into two rows occupy too much of the screen and make it feel clogged.
Wireframing our solution: Iteration #1
Wireframing our solution: Iteration #1
We held workshops to brainstorm and explore solutions that could address the platform’s issues. As a team, we agreed on a number of changes and then moved forward with creating low-fidelity wireframes.
We held workshops to brainstorm and explore solutions that could address the platform’s issues. As a team, we agreed on a number of changes and then moved forward with creating low-fidelity wireframes.
Search bar improvements
Search bar improvements
The search bar should be made to stand out more prominently on the page, so users would have an easier time locating it
The search bar should be made to stand out more prominently on the page, so users would have an easier time locating it
Filter functionality refactoring
Filter functionality refactoring
The filter bar could be separated from the search bar and reorganized for easier access, improving overall interface clarity.
The filter bar could be separated from the search bar and reorganized for easier access, improving overall interface clarity.
Advanced search deals exclusively with filter management. We could integrate it into the filter bar for a more logical interface grouping.
Advanced search deals exclusively with filter management. We could integrate it into the filter bar for a more logical interface grouping.
The filtering system could be either customizable or based on a fixed set of default filters. We needed to determine which one users preferred.
The filtering system could be either customizable or based on a fixed set of default filters. We needed to determine which one users preferred.
Interface enhancements
Interface enhancements
We should strive to reduce interface noise and density as much as possible to make it less overwhelming to navigate.
We should strive to reduce interface noise and density as much as possible to make it less overwhelming to navigate.
We needed to redesign the empty state so users no longer thought they did something wrong when a search failed.
We needed to redesign the empty state so users no longer thought they did something wrong when a search failed.
The interface no longer overwhelms
The interface no longer overwhelms
We tried to maintain as much white space as possible. Filters would now be accessible via a new and clearly visible “Filters” button underneath the search bar.
We tried to maintain as much white space as possible. Filters would now be accessible via a new and clearly visible “Filters” button underneath the search bar.
Customized vs. standardized filter system approach
Customized vs. standardized filter system approach
We debated showing essential filters by default vs. letting users choose. I proposed a modal with checkboxes for customizing the filter bar, inspired by SAP Fiori Web Design Guidelines.
We debated showing essential filters by default vs. letting users choose. I proposed a modal with checkboxes for customizing the filter bar, inspired by SAP Fiori Web Design Guidelines.
Custom filter bar
Custom filter bar
This is how the main page would look like after the user picked a number of filters to be stickied to the main page.
This is how the main page would look like after the user picked a number of filters to be stickied to the main page.
Stakeholder and employee feedback: Iteration #2
Stakeholder and employee feedback: Iteration #2
While overall feedback was positive, users wanted less complexity when choosing filters, a clearer view of active filters, and a quicker way to remove them. Some confusion also remained around the filter bar layout.
While overall feedback was positive, users wanted less complexity when choosing filters, a clearer view of active filters, and a quicker way to remove them. Some confusion also remained around the filter bar layout.
Filter functionality refactoring
Filter functionality refactoring
We could add visual tags to the modal to make filters easier to manage, and help users quickly see and remove their selections.
We could add visual tags to the modal to make filters easier to manage, and help users quickly see and remove their selections.
An overflow indicator could be implemented to give users more feedback about active filters.
An overflow indicator could be implemented to give users more feedback about active filters.
A “Clear all” button could be introduced to make it easier to remove all filter selections.
A “Clear all” button could be introduced to make it easier to remove all filter selections.
Interface enhancements
Interface enhancements
If we made commonly used filters visible by default, the export button could be moved to the bulk actions bar to free up more space on the interface.
If we made commonly used filters visible by default, the export button could be moved to the bulk actions bar to free up more space on the interface.
Most users search using the magnifying glass icon or "Enter" key, so the “Search” button could be removed to reduce clutter.
Most users search using the magnifying glass icon or "Enter" key, so the “Search” button could be removed to reduce clutter.
Enhanced scalability
Enhanced scalability
We made key filters visible by default, implemented a "Clear all" button, moved the “Export” button to the bulk actions bar, and started work on an overflow indicator.
We made key filters visible by default, implemented a "Clear all" button, moved the “Export” button to the bulk actions bar, and started work on an overflow indicator.
Less complexity for the modal window
Less complexity for the modal window
Users preferred less customization, so we redesigned the page to focus on default filters (the most used ones), with extra filters accessible within the modal. We also explored implementing a tag-based system.
Users preferred less customization, so we redesigned the page to focus on default filters (the most used ones), with extra filters accessible within the modal. We also explored implementing a tag-based system.
High-fidelity designs
High-fidelity designs
With validation from users and stakeholders, we now moved on to creating high-fidelity frames. Before that however, we held discussions to see what additional improvements we could make.
With validation from users and stakeholders, we now moved on to creating high-fidelity frames. Before that however, we held discussions to see what additional improvements we could make.
Additional filter enhancements
Additional filter enhancements
Active filters could be highlighted with a contrasting color to improve feedback.
Active filters could be highlighted with a contrasting color to improve feedback.
Visual considerations
Visual considerations
We should polish the look of the interface to make it align better with the company’s branding and visual style.
We should polish the look of the interface to make it align better with the company’s branding and visual style.
The search bar placeholder text could be updated to make it more eye-catching and to draw attention more effectively.
The search bar placeholder text could be updated to make it more eye-catching and to draw attention more effectively.
Assigned or unassigned status could be color-coded for better interface feedback, improving clarity and interface feedback.
Assigned or unassigned status could be color-coded for better interface feedback, improving clarity and interface feedback.
Selected profiles could be visually distinguished using a contrasting color to enhance the visual hierarchy.
Selected profiles could be visually distinguished using a contrasting color to enhance the visual hierarchy.
Default state
Default state
The redesigned “People” page retained its original visual style and color scheme, but was adjusted so important elements such as the “Status” state would be highlighted better.
The redesigned “People” page retained its original visual style and color scheme, but was adjusted so important elements such as the “Status” state would be highlighted better.
Guiding attention
Guiding attention
Selected profiles are highlighted with a contrasting color to make them stand out, drawing the user’s attention and improving the visual hierarchy.
Selected profiles are highlighted with a contrasting color to make them stand out, drawing the user’s attention and improving the visual hierarchy.
Better feedback when filtering
Better feedback when filtering
We highlighted active filters with a contrasting color to make them easier to spot and added visual cues for quick feedback. The "Clear all" button only appears once filters are applied, keeping in line with the concept of progressive disclosure.
We highlighted active filters with a contrasting color to make them easier to spot and added visual cues for quick feedback. The "Clear all" button only appears once filters are applied, keeping in line with the concept of progressive disclosure.
Empty state
Empty state
A better empty state which gives users reassurance that their actions were correct and didn’t cause any issues.
A better empty state which gives users reassurance that their actions were correct and didn’t cause any issues.
“Add more” modal window
“Add more” modal window
The tag system and enhanced color contrast make it much more easier for users to identify which filters have been added. The tags also simplify the process of removing applied filters compared to the previous design.
The tag system and enhanced color contrast make it much more easier for users to identify which filters have been added. The tags also simplify the process of removing applied filters compared to the previous design.
PROJECT WRAP-UP
PROJECT WRAP-UP
Reflecting on the impact we generated
Reflecting on the impact we generated
Based on stakeholder feedback, the redesign of the ERP system successfully increased user satisfaction and platform approachability.
Based on stakeholder feedback, the redesign of the ERP system successfully increased user satisfaction and platform approachability.
What I learned from this project
What I learned from this project
There were a lot of valuable lessons I learned by being a part of this project. Here are a few that stood out to me.
There were a lot of valuable lessons I learned by being a part of this project. Here are a few that stood out to me.
📝
📝
Research is crucial to uncovering which issues users have to deal with on a day-to-day basis.
Research is crucial to uncovering which issues users have to deal with on a day-to-day basis.
👤
👤
Stakeholders can have important insights into the problem, which is why you should align with them early on.
Stakeholders can have important insights into the problem, which is why you should align with them early on.
🪜
🪜
Small but focused improvements are better than sweeping changes. They have a larger impact on user satisfaction and platform usability.
Small but focused improvements are better than sweeping changes. They have a larger impact on user satisfaction and platform usability.
🐙
🐙
Don’t get too attached to your designs or solutions. By doing so, you might miss seeing the bigger picture. Be adaptable!
Don’t get too attached to your designs or solutions. By doing so, you might miss seeing the bigger picture. Be adaptable!
🔍
🔍
Visual clarity is very important. It has a direct impact on how much trust users put in a platform or system.
Visual clarity is very important. It has a direct impact on how much trust users put in a platform or system.
🕹
Making users feel more in control is key to keeping them engaged. Clear feedback from the interface is a good way of achieving that.
Making users feel more in control is key to keeping them engaged. Clear feedback from the interface is a good way of achieving that.
🧪
🧪
Testing solutions with users and making design decisions based on their feedback is essential to creating good design.
Testing solutions with users and making design decisions based on their feedback is essential to creating good design.
Next steps
Next steps
As a team, we managed to deal with a lot of the major issues that were burdening the ERP platform. While we didn’t address every pain point identified, our changes allowed users to start trusting the system and rely on it more. Future work could focus on adapting the platform to new and emerging use cases. Additionally, improving the scalability could be very important for supporting future growth.
As a team, we managed to deal with a lot of the major issues that were burdening the ERP platform. While we didn’t address every pain point identified, our changes allowed users to start trusting the system and rely on it more. Future work could focus on adapting the platform to new and emerging use cases. Additionally, improving the scalability could be very important for supporting future growth.