HP Rewards and Recognition website

My illustrator-colleague designed the theme with nice abstract drawings.

Major colors were around Browns and Blacks. I decided to use lot of White space in between. Responsive grid layout worked well with Blockish elements such as
Profile pictures, Numbers, Forms. Main Page had infinite scroll depending on the amount of content (recognitions) generated. More the Recognitions, Larger was the scroll. It gave the page a Social-media’ish, long-scroll look. How the interaction behaved, is shown at the top of this page.

Background

UX blueprint

Few User Stories

As a User, I should be able to use the R&R website like a
mini-social Media application where Users can Like, Share and Comment
The website should allow me to Recognize colleagues through Ratings, Stars, Likes, Comments
As a User, I should be able to see the recognitions I gave and received
As a User, I should be able to upload company approved media such as animated Gifs, static images, videos, etc.

UI Design

I created multiple sketches for Brain storming sessions with the Product Team. That helped in refining the design structure.

Visual Treatment

The website had to be visual-heavy. We identified the following pages important for the R&R website:

User-personalized dashboards to check how many recognitions were received and given
Champion Recognizers – dedicated segment
Mini-dashboard components showing Recognitions, Comments and Shares
Hall of Fame - Best Recognizers and Recognized
Customized Gifs to be turned into Picture Frames

High Fidelity Wireframes

Impact

To recognize and felicitate the high-performing employees, HP's HR wanted to design an event. But instead of giving Certificates and bunch of goodies, they wanted to bring in fun and make it memorable.

Creative Solution

Our creative team conceptualized the campaign called A Pat On The Back. We suggested to involve employees only to recognize the winners. The idea was to appreciate your own colleague(s) who you think is doing great in his/her work. So the ask was to Pat On The Back of your deserving colleagues.

Users highlighted the need for good Visual Appearance in the website.
Personalized web-portal

Simple messaging

Pain points

I interviewed 10 randomly selected Users from different departments. This was to understand Users’ expectations from a Rewards and Recognition (R & R) website and what was missing in the previous campaign websites.

Platform

Earlier websites were built on Share Point

User talks

“The R&R websites never looked like one. Very dull and boring.”

“There was a R&R website for last Quarter. It’s easily forgettable.”

The month-long R&R campaign had already grabbed attention with its vibrant designs all across the HP campuses.
With a post-event survey, we identified that The Pat On The Back website increased
User-engagement by 40% than the previous quarter.
A general feedback was to keep the R&R website up and running as a perpetual property
for the future R&R Programs.