Imgur Accolades • Celebrating the best

Accolades

Accolades are a special way to give thanks and celebrate the best of Imgur's community. This feature was introduced as part of the Imgur Emerald benefits.

We've seen an increase in engagement, high usage and positive feedback since launched.

Check out Accolades live on this Imgur's post.

// Launched on desktop & Android in 2020
iOS coming soon!

Launched on web in 2020
at Imgur
[coming soon to apps]

// My Role
Leading end to end product design—
UX Research, concept and ideation
Interaction + visual design
Prototyping, user testing, usability testing
Brand & creative direction

My Role
Leading end to end product design
UX Research, concept and ideation
Interaction + visual design
Prototyping, user testing, usability testing
Brand & creative direction

// Tools
Figma, Figma prototype, Framer, Maze, Google Forms, Discord

Launched on web in 2020
at Imgur
[coming soon to apps]

Through research findings we identified and validated our hypothesis that people are super enthusiastic in supporting and giving extra appreciation to the "best of the best" content.

On Imgur, one of the core engagements for content is an Upvote, which gives a point to a post. There hasn’t been a way to give extra appreciation beyond this. How can we extend the ability to give a special recognition to the best posts, in a way that makes sense to Imgur and its community?

Giving an Accolade in action

I wanted to create and foster more positivity within the Imgur platform—by making the act of giving appreciation—extra fun and an enjoyable experience.

Accolades adhered to the three levels of emotional design principles: visceral with the eye-catching icons, behavioral during all the interaction process, and lastly reflective—the post-interaction—where the human brain reflects on these past experiences, by rewarding their efforts with simple celebration.

I wanted to create and foster more positivity within the Imgur platform—by making the act of giving appreciation—extra fun and an enjoyable experience.

Accolades adhered to the three levels of emotional design principles: visceral with the eye-catching icons, behavioral during all the interaction process, and lastly reflective—the post-interaction—where the human brain reflects on these past experiences, by rewarding their efforts with simple celebration.

Accolades iconography

Working closely with the community, I designed and tested several concepts and iterations. The Accolades background and shape were inspired by the Emerald gem, shiny and valuable. The icons were a collection of different categories, here I've chosen to include the trophy stand to make it clear they are special awards, and that they can be used on its own in different contexts.

Visual cue

The entry point is intentionally placed on the top left to show the visual hierarchy between the different available actions, indicating that Accolades is the top interaction to reward a post. It's close in proximity to the Upvote icon because it contributes to the same points as the Upvote.

Giving an Accolade

Choosing an Accolade will be the main interaction people do when giving Accolades. The grid layout works well between different platforms.

With this interaction model, I made sure that we support all the different types of interactions that mobile and desktop users might be using.

First and foremost is the cursor interaction with hover and click, second is supporting keyboard interaction with hotkeys and arrows that’s 100% popular with the power users,  as well as the third interaction with desktop touch screens and mobile.

With hundreds of millions users on Imgur, I strived to make accessibility and inclusivity both primary focal points during the design process and execution. It's especially important at the human interaction level.

For more inclusive designs, one of the things I prioritized every step of the way is designing for color blindness, considering that color blindness affects approximately 1 in 12 men and 1 in 200 women worldwide. The overall designs need to meet the needs of different things, providing clear visual indicators between the different states, efficient and satisfying.

Success & delight

The confetti animation happens right after people finished giving an Accolade. These are the special moments that I want to recognize, to amplify the celebration!

Onboarding

Any new or updated feature releases need a good user onboarding—it's part educating, part marketing, and part building awareness. I designed a new feature tooltip for Accolades that will be part of Imgur's design system for onboarding new or updated features.

After a few months, I improved and iterated on the designs for these reasons:
1. drive awareness of Accolades by changing the animation entry point
2. drive sign ups by reducing the steps for people to join from 3 clicks to 1 click
3. test the idea of seasonal Accolade

Check out the Spooktober Halloween onboarding here. This prototype was done in Framer and was available in the month of October 2020.

Entry point animations

There are four different states within the Accolades entry points. Each one is different and dynamic, indicating whether a post has zero all the way up to three Accolades.