Kudos CezanneHR

Web design | UX/UI Design | Figma | Illustrator

Kudos is a feature in Cezanne HR that allows employees to recognize and acknowledge their colleagues' good work and contributions. It allows for employees to send virtual "kudos" or compliments to each other in the form of badges, points, or awards. This feature is often used as a way to boost morale, improve team dynamics, and increase engagement in the workplace. Having been the lead designer for this module I followed a clear design process by speaking with marketing and development teams to understand what our users needed and what our team could deliver. Below you will see the initial sketches, Figma prototypes, and Illustrator designs for the badges and the choices behind them.

Initial Sketches

In order to understand how kudos was going to be used by our clients, I first spoke with marketing to gauge how users would like to view or give kudos to their team (or wider company) as a result I experimented with a filtering system (1) and drew inspiration from other parts of our system to ensure consistency. this led to three sketched designs where I included a month drop-down with immediate team filter options. But this progressed to adding a search bar to find specific individuals, to a filter button that provided a collapsible option depending to aid with different screen sizes. These three components allow anyone to find a person they want to give/view kudos for, whether it’s a general look or more a specific person in mind. You will also find brief designs showing how a comment would look (2), but I built upon this later when I knew how the spacing and layout would be around it.

The three timeline sketches (3-5) show the change and proposed the final idea of how the screen would look. what was clear was that the navigation/header would look the same, with the search bar and month on the same row and filtering below, for a clear hierarchical structure. But I experimented with having members’ names displayed on the left if a filtering option was selected (3) However, this was scrapped in the later two sketches as it took up valuable space that would be used for the kudos comment. Thus, I opted for the final design (5) where more attention and space would be given to the comments including the badge first for visibility, followed by the profile icon of the individual to give you kudos and the date and comment beside it.

Badges Design

Kudos is a recognition or reward system that allows coworkers or employees to show appreciation for each other's work or achievements. The idea behind kudos is to create a culture of positivity and encourage employees to acknowledge and celebrate their colleagues' successes. Thus we decided to convey this through badges, which would represent 12 different types of kudos and would be customizable. Badges provide a visual representation of an employee's achievements and contributions, making it easier for colleagues to see and acknowledge their accomplishments.

  1. Gamification: Badges can be used to gamify the Kudos system, creating a fun and engaging way for employees to recognize each other's achievements.

  2. Motivation: Badges can be used as a motivational tool, providing employees with a tangible representation of their achievements and encouraging them to continue to perform at a high level.

  3. Status: Badges can also be used to indicate status, with certain badges being more prestigious or difficult to earn than others.

This led to the initial sketch designs (1) I created, and then recreated with our design team in Adobe Illustrator (2-2) and tried out different variations that would keep this sense of individuality but still fit with the systems icons existing look.

Prototypes

Finally, before this was ready for production, I created mockups in Figma to showcase to all the teams involved to see what the final product would look like, and provide room for discussions for changes and future adjustments. The timeline screen retained the same design as the initial sketches, but the slide-over screen had been iterated several times to ensure we had the right information needed but also kept it consistent and in line with existing slide-overs in the system. This proved difficult due to kudos being a custom module but was achieved by ensuring the badge, message, and ability to post a comment was visible in a clear manner.

Previous
Previous

Document Rework Screen

Next
Next

Design System