top of page

Lavender Tech Performance

It's that time of year again--no, not the holidays, performance review time! Here at Lavender Tech, we want to make doing performance reviews as painless and easy as possible.

Project Analysis

Problem

Employees dread performance reviews. It's even worse when the performance review page is confusing to read and understand! Employees just want to do their job, not spend hours trying to figure out how to rate themselves on a job they know so well. How can we make this clearer and easier for the user, where they can quickly get this done, but also, have their comments heard?

Design Solution

Based off of complaints from employees, I want to make the performance page not only readable, but scannable. Readable, because there are so many areas in performance reviews, from sections to categories to competencies, let's be sure to emphasize the hierarchy of it all. Scannable, because the first run is always rough. We forget to put something that's been bothering us occasionally here, missed a large pain point there, we want the user to be able to go back and add more comments without having to read through every question again.

Target Users

Employees

Deliverables

High Fidelity Mockups

User Research and Personas

mary.png
Mona Grey, 26

Mona dreads performance reviews every time they come. Where has she improved? Isn't that a question that her team lead can answer? Every time she has a notification to start working on performance reviews, she just wants to get it done as quick as possible. She knows she does her job well, so just let her work. She doesn't want to spend time patting her back on her accomplishments, she's here to do her job and make money--so just let her make her coin! Every time she does it, it's so confusing. What's the difference between sections and categories? Are competencies a question? UGH, can she do this later? No? Because she's already started, she has to finish? You've got to be kidding .

Target Users
  • Age: 20-30

  • Demographic: New Traveler

  • Occupation: Soap Product Developer

Painpoints
  • Current Performance Review is difficult to read, being unable to differentiate between sections, categories, and hobbies. She also doesn't know how to rate herself well.​

  • She doesn't have much to say about herself, but feels pressured to write a comment about her work, even though she's more of a doer than a sayer.

Goals
  • Have a cleaner view with better hierarchy for her to quickly skim and answer​

  • Make adding comments optional and intentional

anne.png
Anne Patel, 45

Anne has a lot to say. She knows she's amazing at her job, and she wants to remind her employer that she's doing an amazing job. She wants to note that she's improved in every way to get that raise. But she's frustrated every time the system either times her out, or she runs out of time working and has to copy everything on a word document in order to get back into her performance review at a later time and copy + paste everything back in. 

​

She may love her job, but she wants writing about her performance review to be a lot more efficient than how it currently is, so that she can focus on other parts of her life. Like her goals, and hobbies!

Target Users
  • Age: 30-50

  • Demographic: Overachiever

  • Occupation: Tech

Painpoints
  • Current performance review doesn't allow a way to save and come back later. ​

  • A way to track goals for both her and her employer to see​

  • A way to see her improvement compared to prior performance reviews

Goals
  • A save along with save and finalize​

  • Goal tracker​

  • History

Mockups and Explainations

Performance Review Dashboard
Performance Web View – 1_2x.png

When the user clicks onto the performance page, their first stop is specifically on performance reviews. This is where they pick which one they should start on.

​

The most recent performance review is always on the top of the page, and the overdue performance reviews are always near the bottom. Reason being is that the most recent is always going to be the one needed more than the one that's overdue.

​

The page contains two tabs, one is for active performance reviews, and the other is for completed reviews for when the employee wants to revisit previous ones.

Performance Review Page
Performance Review User Using Full View.png

There's an overall progress on the top right corner of the page, to ensure that the user has answered all questions on the performance review.

​

A performance review is organized in three hierarchical sections.

-Sections

--Groups

---Competency

​

Each group can be expanded and minimized. I went with dropdowns because there are times a performance review can be extremely long, I want the user to be in control of the page. When they minimize a group, there's a progress bar that keeps track on whether or not they have answered each competency asked. 

After each competency, the user has a choice to tell their employer more about that specific competency that they've improved upon.

​

The overall score shows the following options

Total score (which is not available until the manger/supervisor reviews them)

Competencies weight (Average of all the competencies together)

Goals weight (Average of the goals included. Not on this page, but goals is something the user should be working throughout the year that is included)

Self rating: What they rated themselves the most

Performance Web View_2x.png
Performance Web Rating Scale.png

At the bottom of the page is a sticky footer. It should stay at the bottom of the page, always visible to the user, allowing the user to save at any moment in time.

Below the buttons is the text, "You may reference the rating scale during your evaluation" that when rating scale is clicked, it pops up a modal that shows the rating scale for the performance review.

Performance Web Finalize_2x.png

When the user has fully completed their performance review, the finalize button becomes active. The user is then allowed to click on it, and an employee acknowledgement pops up where they can sign and send the performance review for manager review.

Performance Review Read Only
Performance Review Read Only.png
Performance Review Read Only – 1.png

After the manager has reviewed their employee's performance review, the employee gets it back.

​

Manager review shows manager name, manager rating and manager comment. The reason why I made each area it's own row is for scan ability and readability. It's easier for someone to read up and down than right to left.

​

The dropdowns are kept for easy access for the user. In case they have a low weight on a particular group, they can open up that certain group instead of having to search the entire performance review.

​

The main difference between the read only version verses an active performance review is one is editable, the other isn't as well as the read only version not having a sticky footer. 

Goals Page
Performance Goal.png
Performance Goal –Completed.png

When the user clicks on the goals section of performance, it takes them to a page full of different goals that they (or their manager) has made for them, waiting for them to complete.
 

Each goal is on a card that gives them the overview of that specific goal: goal type, status, target completion date, weight, and description. The user then clicks on view to be able to view more.

Performance Goal.png

When the user clicks on "View" on the goals page, it takes them to a more detailed page about that specific goal.

 

This page also allows the user to change the progress of the goal or edit the goal. 

Performance Goal – 2.png
Performance Goal – 1.png
Notes Page
Performance Notes.png
Performance Notes – 3.png

The notes page is for both the employee and the manager to use.

​

The employee to use whenever they want to note something they want to write about in their next performance review.

The manager as a notice on things for the employee(s) to potentially improve upon in the future.

​

On the employee notes, the employee is able to edit or delete the note. They cannot, however, delete what the manager has sent to them.

Performance Notes – 2_2x.png
Performance Notes – 2.png
Performance Notes – 1_2x.png
Performance Notes – 1.png
bottom of page