how
UX Design
Interaction Design
UI Design
Emotional Design
when
2022
creating a tool
for the 360-degree evaluation of a large company.
Project done in co-creation with Jonathan Felipe.
This was a project where we had to adapt to a tight deadline. However, since it was an internal project for the company, we managed to streamline some of the processes.
Later on, we will discuss the requirements. But to make it clear, our objective was to reduce the time leaders needed to apply a 360-degree evaluation methodology.
Previously, the evaluation was conducted using separate spreadsheets, requiring the creation of a new sheet for each team member, which turned out to be an extremely laborious and costly task. We needed to utilize our expertise to create a web application that could address this challenge.
starting with
user experience
Benchmark
After introducing the problem, the first step as a UX designer was to conduct a benchmark of existing solutions. We found several paid solutions that offered various possibilities for facilitators.
Requirements Gathering
After an introduction to the topic, we moved on to defining the project requirements. This served to have a well-defined objective so that we could allocate design time more effectively in the project.
Essentially, we needed to create a tool that was easier to use than spreadsheets (the way it was done previously). There was no need for elaborate analysis tools or overly complex flows.
And we discovered an important point: the research results could be fed into a spreadsheet, but the significant issue from before was in the creation and sending stages to collaborators.
With that, we narrowed down the main scope:
-
Login page: to identify the user's team affiliation.
-
Selection page for the evaluated individuals: there was no need to "tie" the evaluator to the evaluated person; this would be done more organically.
-
Assessment page: divided into sections across multiple pages (soft skills, hard skills, ecosystem, among others...).
sketching and iterating
with wireframes
With the benchmark and requirements in hand, we moved on to creating the wireframe. We knew that the "core" of the project would be the assessment page, but we dedicated time to the previous stages to avoid generating doubts and the need to contact team leaders.
We sketched the wireframes for the above pages:
Some points were still unresolved, but we had information available at that moment:
-
Reset password: We probably wouldn't have the technical feasibility to implement this, but we were awaiting a response. In case it was not feasible, we had to come up with a clear message to the user.
-
Change evaluated person: We couldn't allow users to change who they were evaluating after they started. Thinking about the user experience, we recommended that team leaders address this issue when introducing the methodology.
-
Mobile: Even though it wasn't part of the initial scope, we needed to inform users in some way if they attempted to access the tool on their phones.
While we didn't complete all the wireframes, the main part had been resolved. We addressed the above issues throughout the project's progression.
validating Information with
card sorting
Unlike a rating scale evaluation, the 360-degree assessment uses parameters for each of the voting numbers. These could range from 1 to 5 or 1 to 10. Consequently, users needed to vote based on the description of what was said, not solely relying on the scale.
Considering this, we hypothesized that, despite the methodology's indications, users might correlate the parameters differently. Each number could have a different "weight" than what was stated in the description.
To address this, we questioned the team leaders:
“"If a user understands that the description for '4' is ideal but believes their vote should be a '3' on the scale, what should they do?”
The response was that they should prioritize the description. However, this issue was still something to be considered, as we cannot assume all users will have the same thought process.
To evaluate whether users perceived the descriptions to be consistent and correlated with the scale numbers, we conducted an "adapted card sorting." Here, we used a closed card sorting methodology. Users had 5 columns with numbers from 1 to 5 and cards with the 5 possible descriptions.
The result matrix revealed the identified problem:
We conducted the card sorting with 6 participants, and apart from the above result, we observed that most of the confusion between descriptions occurred between "2" and "3."
The only description that did not raise any doubts was for the "Ecossistema" section, where the questions were directed by the users' knowledge of the company's business rules and products.
Armed with this information, we provided the team leaders with a detailed report outlining the potential issues and the words that generated the most doubts.
After making some adjustments, we created new descriptions with simpler language and more distinct words. We conducted tests with these revised descriptions and were able to confirm an improvement!
front-end &
user interface
After the UX research phase, we began designing the interface of the tool.
It's worth mentioning that, during this stage, there was co-creation and synergy between Design and Front-end. We worked together throughout the process, iterating several times to ensure the project was both feasible given the available resources and a great experience for the end users.
We found diverse solutions together, even in areas that were not fully familiar to us. We supported each other, whether it was figuring out how to manipulate an SVG in Lottie or applying emotional design to a button 🙂
At this point, some of the insights from the Card Sorting phase were still being reviewed. However, as the impact would be greater on the content side, we decided to proceed due to the "tight" deadline.
Beyond the interface, another purpose:
addition to creating a good interface, we considered building a user experience area (see the case). Since it would be a tool used by the entire IT team, we wanted to combine UX and UI methodologies in new company projects, showcasing the potential of this combination in delivering better products to our users.
Home:
We structured the visual design to focus on the login fields, and we used Lottie animations to create a visual impact.
Change Password:
Users could not change their passwords directly through this application due to an API limitation. However, we knew this could raise questions if no information was provided.
To prevent a bad user experience, we maintained a "standard" flow, allowing users to use the "forgot password" functionality, which only provided information.
Following Don Norman's principles of Emotional Design, even if users don't have a positive experience on the behavioral level, we can explore other aspects. We disguised this negative experience with a good visceral and reflective design (through an animation of a frustrated koala, showing the user that we are disappointed in not offering this solution to them).
Evaluation Interaction:
We created the evaluation functionality as a "component" before finalizing the full-page layout.
It's the most critical interaction of the project due to the cognitive load required for users to evaluate a team member.
Additionally, we needed to provide explanations for each type of score. We focused on a few points:
-
Not taking up too much screen space: The explanation was placed in the blank area on the right, visible only after the user interacts with it.
-
Microinteractions: We reinforced the current system state with microinteractions.
-
Scannability: We created a structure that facilitated Western reading patterns, allowing users to easily scan the page.
Another aspect of emotional design:
The first time a user rates a team member with the maximum score, they are surprised with an animation and a sound feedback of a unicorn. This creates an immediate and positive visceral response, increasing user satisfaction with the experience.
Moreover, the interaction also leverages the reflective level of emotional design, encouraging users to reflect on their choices when giving top scores to other team members' skills. This helps promote more thoughtful and fair evaluations, increasing users' confidence in their assessments.
To avoid the experience becoming repetitive or tiring, we added an option to pause the sound feedback after the first use, ensuring the experience remained enjoyable and engaging over time.
See the complete interface and its microinteractions below:
Easter Eggs and Informal Character:
We included some Easter eggs in the tool, from secret codes (Konami Code - ⬆️⬆️⬇️⬇️⬅️➡️⬅️➡️🅱️🅰️) to cultural memes that the team members could relate to.
This had two main objectives:
-
First: to address technology limitations in a friendly way (e.g., the case of password limitations).
-
Second: to generate buzz within the technology sector, making the tool a topic of conversation before its use, known as buzz marketing.
As an example, the tool was designed to be used on desktops, and if someone accessed it from a mobile device, they were met with an unexpected message not commonly seen in an application 😏
conclusion
The co-creation between the designer and developer enhances both the process and the outcome of the project.
The company's Slack was buzzing with messages when team members started conducting evaluations. Some laughed, others wanted to know the secret codes, and some even posted screenshots of the tool on their social media. Others were curious about how to change their passwords. Hehe 😄
To achieve our goal, we needed to strike a balance between seriousness and playfulness. We collected feedback from leaders and team members to assess the ease of implementing the methodology and the reliability of individual evaluations.
Based on this feedback, we achieved the ideal balance that ensured a lighter yet effective approach to managing our team.
The 360-degree evaluation project showcases the benefits of a co-creative process. How about continuing the reading with a project on accessibility or another one about ergonomics?