Long story short

This project was my first experience involving the UX design process from start to finish. The goal of the project was to create a tool that assesses the career level of employees within the company. The company wanted an intuitive and easy-to-use application that allowed them to evaluate each employee’s skills and experiences accurately.

Final Design


When I joined the project, the UX and UI had already been initiated by the developers involved. As a new member of the team, it was challenging for me to catch up on the business specifications and requirements quickly. Despite this, I made a concerted effort to learn and understand the project’s objectives.

One of the most challenging aspects of the project was dealing with some details that could have been handled better in the existing design. However, I took a proactive approach to address these issues and collaborated closely with stakeholders to ensure that their requirements were met.

Design Made By The Developers

To begin the design process, I established a simple and coherent design system, which included the components utilized throughout the web application. The decision on UI colors and fonts was made by stakeholders based on the existing software used by the company. As a result, my role was to ensure that the chosen color scheme and fonts were applied consistently to achieve a cohesive design.

Brand Kit

These components, which you can see in the picture, are the final versions that were developed following an iterative process of research and interviews that were necessary to complete the project. Throughout this process, we tested various design iterations and collected feedback from users to ensure that the final components were intuitive, user-friendly, and met the needs of the company and its employees.


During the design process, user testing was a crucial step in ensuring that the dashboard met the needs of its intended users. With at least 15 users participating in the testing process at various stages, I created usable prototypes for each role within the company and prepared a script to ensure that users completed all necessary steps.

After the interviews, I thoroughly reviewed the results and comments of each user, taking care to remain impartial and consider the perspective of the final user, rather than my own preferences. The results of each user’s testing were compiled in a spreadsheet, which my product manager helped me to review. This allowed us to compare and analyze feedback on each feature to determine what was working well and what needed further improvement.

Process in Detail

To provide a more comprehensive view of the project without making it overly long and complicated, I have decided to present the dashboard and matrix pages. These two pages showcase the design process and iterations that were undertaken to develop a final product that was both visually appealing and user-friendly.


First Look At The Dashboard
Upon joining the project, I observed that the design aspect had not been given ample consideration, as it was crafted by the developers who primarily focused on the backend functionalities. Their main objective was to create a visually appealing frontend that could complement the backends’ features. As the project progressed, it underwent significant changes. However, I was able to preserve certain features that were initially developed by the previous developers.
First Versions

Initially, the design attempts focused on providing a basic layout and functionality for the dashboard components. Effective communication with the stakeholders and domain experts played a crucial role in this exploratory phase.

While most of the envisioned features aligned closely with the initial project requirements, certain key elements required additional attention. For instance, it was vital to cater to different user roles by providing distinct views of the dashboard, as each role had unique information needs.
Fourth Version

After the initial round of user interviews, it was clear that improvements could be made to the dashboard design. These improvements included enhancing the functionality of the dashboard by adding features such as the ability to reschedule meetings directly from the dashboard, a help button to assist unfamiliar users in understanding icons and colors, and easier access to the matrix. The goal was to improve the user experience and streamline the process for the end user, ensuring that the design was intuitive and user-friendly.

Final Version

To arrive at the final version of the dashboard, we conducted further interviews to gather insights on what features users expected and what they felt was necessary to include. The feedback we received from these interviews helped us to identify certain details that needed to be refined in order to improve the user experience.

For instance, we made changes to the dashboard to include a more intuitive way of indicating whether the matrix was delivered, and we also switched the order of the list of meetings and the selected meeting to make it more user-friendly, as users tend to read from left to right and would select the meeting from the list before viewing it.


Contrasting the dashboard, the matrix was not given due consideration at the project’s inception. Despite this oversight, the matrix has emerged as an integral component of the project. It serves as a framework, based on the Dreyfus model of skill acquisition, that enables the company to evaluate the knowledge of its employees. This, indeed, is the primary objective of the project.

First Versions

Upon starting the project, I was faced with the challenge of having no existing framework or design to work from. This allowed me the freedom to explore creative possibilities but required me to collaborate extensively with project stakeholders to fully understand their needs and expectations.

Given the lack of a clear starting point, my initial approach involved developing low-fidelity mockups to share with the product manager and stakeholders, allowing me to communicate the overall concept and gather feedback. Once I had buy-in on the general direction, I transitioned to creating more refined high-fidelity designs and conducting UI testing to validate the usability and effectiveness of the proposed solution.

The matrix serves as the primary tool for assessing an employee’s skill level, as it is the form used to determine the need for skill level updates. The Maker (i.e., the employee being evaluated) and the Career Advisor (i.e., the direct supervisor who provides guidance and support to the Maker) jointly complete and submit the form. Thereafter, the People Advisor (i.e., the HR personnel responsible for analyzing and interpreting the results) reviews and compares the responses to ensure accuracy and consistency in the measurement of each skill.

Design presented in the first round of interviews

The matrix contains both numeric and open text questions that pertain to the current skill level of the Maker. During the development of the matrix, the stakeholders identified the need to add a feature that allows for the review and definition of goals for the Maker. In view of this, I opted for a navigation system that utilizes a wizard and separated the matrix into three distinct sections: the skill questions, the review of current goals, and the definition of goals for the next meeting.

The initial round of user interviews proved to be pivotal in the project’s direction, as it helped to ensure that relevant information was easily accessible to users. Participants in this round consisted of individuals from each role, including those with varying levels of experience in the method to ensure ease of use for all.

During the interviews, certain issues were identified, such as the lack of clarity in creating new objectives and the usage of gray on non-disabled components. After discussing the feedback with the product manager, we conducted brainstorming sessions and implemented changes accordingly, which were tested in subsequent rounds of user interviews.

Design presented in the second round of interviews

The second round of user interviews proved to be even more successful than the first, as I had a deeper understanding of the users’ needs. During these interviews, participants interacted with a high-fidelity prototype that guided them through the entire process of completing, submitting, reviewing, and checking the final results of a matrix, tailored to their specific roles within the company.

One noticeable change between the first prototype for the interview and the second one is the redefinition of what constitutes a goal from a business perspective. Initially, goals were categorized as either personal or career-related, which required distinct treatment of each category.
However, in the newer version, goals are classified into short-term and long-term objectives. The former is assessed on a scale of one to ten for completion and is due at the next meeting. The latter, on the other hand, is evaluated as a percentage and assigned a specific duration in days by the meeting participants. Despite these changes, certain aspects remain consistent, such as the inclusion of tags for easy identification and the option to add comments for future reference.
Final matrix submission form

After numerous iterations and adjustments made during the design process, we finally reached a point where all necessary modifications were approved by stakeholders. The development team who accompanied me during this process was also eager to begin working on the central part of the project.

Final Matrix Review Form

The matrix also includes two additional related sections that were not displayed in the previous visual representations. The first is the “review” section, which displays the answers provided by the Maker and Career Advisor before the meeting. This section is designed to provide a quick overview of the user’s answers and to help the user prepare for the upcoming meeting.

The second section is the “completed” view, which is available after the meeting has taken place. This section displays a side-by-side comparison of the Maker, Career Advisor’s, and People Advisor’s answers to each question and also includes any comments made by either party.

This completed view can be accessed at any time after the submission by the People Advisor and can be used to track the evolution of each Maker’s skills over time.


This project was a full-scale UX design process aimed at creating a tool that accurately assesses the career level of employees within a company. The objective was to develop an intuitive and easy-to-use application that would enable employees to evaluate each other’s skills and experiences accurately. The project was a learning experience for me, who gained invaluable insights from working with the product manager, stakeholders, and developers. The project involved several rounds of user interviews and iterations, resulting in a high-fidelity prototype that guides users through the process of filling out, submitting, reviewing, and checking the final result of a matrix. The final design was approved by the stakeholders and developers, and I am proud of the impact that the tool will have on the company. The project has transformed the way I approach UX design, and I’m grateful for the opportunity to develop this tool.

@2023 Portfolio – Sofia Nóbrega