From complexity to clarity: Visualizing required skills in competence matrix
4human HRM | User research, UI/UX design, implementation, user testing
UI/UX Designer
Product owner (covering for a colleague)
Role
Product owner
UI/UX designer
Front-end developer
Back-end developer
QA-tester
Team
2024-2025
Timeline
Workshops
User research
User flowsSpecification
Redesign of existing functionality
UI/UX design
Final designs deliverables
Deliverables
Summary
This project involved developing a module that shows the distribution of critical skills within a company, helping organizations see who has which skills and track compliance with internal or external requirements.
Matrix: working file
Design process
I started with customer workshops to understand their needs around managing work processes and skill requirements. The larger goal was to create a system where companies could define which skills were needed for specific work processes, then connect those requirements to their employees. The skill matrix redesign was a key part of this process. It needed to clearly show whether the company had the right people with the necessary skills.
In the next step, I worked together with Product owner to create user flows to map out how users would set up processes, assign skill requirements, link them to employees, and interpret the matrix results. We worked on verifiyng these flows together with the customer to ensure they aligned with business goals. Once the flows and overall approach were approved, I moved on to high-fidelity prototypes and redesigned the existing matrix functionality to support these new features.
Challenge
The project was going smoothly with clear direction and regular alignments. However, midway through development, the Product owner had to leave the project and go on extended sick leave. Without the key decision maker, the team quickly lost clarity on priorities. Questions about feature scope, technical trade-offs, and design decisions piled up with no one authorized to make final calls. The timeline was at risk, and customers were actively waiting for the module. At this point it was unclear whether we could move forward or if the release would be postponed.
Solution
Since nobody from the company was avilable to fill in as a Product owner at that time, I stepped in to keep the project going. I had taken on communication with the stakeholders, specification clarifications and task preparations. Working closely with developers and QA, I tried to help the team refine the workflows.
We focused on delivering a minimum viable product with core functionality before the deadline, postponing nice-to-have features to ensure we shipped a usable product on time.
Selected visuals
The matrix layout was difficult to work with, especially with large amounts of data. Users had to scroll across the screen to connect an employee's name with their skill results, losing track of which row they were on. Long skill names were displayed diagonally and often cut off, making it unclear what each column actually displayed.
Before
The redesigned layout uses rounded indicators and muted colors for a cleaner look. Hovering over a skill highlights the corresponding employee row and column, and tooltips provide additional context on skill status. I also introduced skill categories to group related skills, making it easier to navigate the matrix.
After
Making matrix readable
In the old solution, the legend consisted of a single line of rectangles hidden within a small dialog box, making it hard to understand. A legend is supposed to be a visual code that helps users read the matrix.
So I introduced a separate modal with a structured visual guide. Each color is displayed and explained individually, making it clear what it represents in terms of skill status and proficiency level. This change was positively received by both new users, just starting with the tool, and experienced users who had been using it for years, as it eliminated confusion and made interpreting the matrix faster and more accurate.
Outcome
The module launched on time and received positive feedback. Not everything worked perfectly at first, but customers had a functional product they could start using. Their feedback from real-world testing helped us identify what needed improvement, and we refined the functionality in the following releases.
I'm proud of what the team achieved under challenging circumstances. This experience gave me valuable insights into managing product responsibilities, making prioritization calls, and collaborating across teams to deliver results even when things don't go as planned.
