VD Peer-to-peer Recognition
About the project
Peer-to-peer recognition, also known as peer recognition, is a genuine expression of commendation and appreciation between co-workers. Positive feedback is given to a colleague, e.g. for skills they have shown, results they have achieved or for their collaborative attitude in a project.
Corporate values are principles that drive a company: who it is, what it stands for and what it does. Encouraging employees to acknowledge someone who stands out for promoting and living by these values is a great way to motivate everyone to continue to do the same in their day-to-day work. As a consequence, this is then reflected in the climate and culture of the company.
Needs
Develope a versatile reactions component that enables users to interact with content through quick, expressive feedback. This component is designed for reuse across multiple pages or products, ensuring consistency and enhancing user engagement throughout the platform.
Workflow
- The user sees a list of available reactions (e.g., 👍, ❤️, 😂).
- They click on the emoji they want to use.
- The front-end sends the selected reaction to the backend.
- The backend stores this reaction in a database associated with the content and the user.
- The reaction count updates immediately, and the selected emoji is highlighted.
- Other users connected in real-time see the reaction count increment as well.
- The user can either click the same emoji to remove their reaction or choose a different one.
- The backend updates the stored reaction, and the UI reflects the change.
Technical Challenges
- Users can click or tap on an emoji to react. The UI often shows an animation (like a quick burst or bounce) to acknowledge the selection.
- Users should be able to undo or change their reaction easily, which typically involves clicking the same emoji again or selecting a different one.
- After users react, the component should display the total count of each reaction type. For example, 5 👍, 3 ❤️, 2 😂.
- Ensure that the component can be navigated and used via keyboard shortcuts.
- Provide descriptive labels for each reaction so that users with screen readers understand what each emoji represents.
- Ensure that the filter system works well on mobile devices and adapts to different screen sizes.
- Implement keyboard navigation, screen reader support, and ensure that all interactive elements are easily usable without a mouse.
- Guarantee people with different abilities can access, understand, and navigate web content, regardless of how they’re accessing it.
Results
