Sprinkling Delightful Details in Roposo’s New Live Experience

Strategies to enhance engagement with the Stickie board to create a product beloved by all

Lavanya Gopalaswamy
Roposo Design
10 min readSep 19, 2023

--

Who doesn’t like a little fun?

A recap about the Activity Board

This is the story of how we sought to add a little ‘oomph of fun’ to a new world of comments on live shows…a world we fondly call the Activity Board. 😊 To know all about it’s conception and how it translated to design, you must check these out!

The Activity Board is a hub for consumption & expression on live shows. It allows consumers of live shows to freely express themselves using text, GIFs, and someday, maybe even doodles! With this fresh take, we sought to make consumption and exploration of comments a lot more fun!

What’s the problem at hand?

While designing the Activity Board and using stickies as a medium to express one’s opinions, the next challenge was:

  1. How can we enrich our user’s stickie consumption experience, so that even if they aren’t creating stickies, the process of reading them is enjoyable?
  2. What are the ingredients that can add a dash of zest and zeal to make the Activity Board more lively?

A play on progressive disclosure

One of the key aspects of the Activity board is the play on progressive disclosure i.e. as we zoom into the board, we discover more data and actions associated with the stickie.

Progressive disclosure of data when zooming in

To engage consumers with the Activity Board…what if we could add pockets of liveliness across different zoom states? So as our consumers zoom in, they gradually explore more kinds of meta-data.

Areas to explore in depth

Elevating the stickie to greater heights:

Currently, the main data showcased on a stickie include:

  • Content: Containing text, text + GIFs, GIFs (based on how the user chose to express their opinions).
  • Stickie creator’s name: To shed some light on the creator of the stickie.
  • Preview of their profile photo (if any): To act as supporting data to the stickie creator’s name.
Structure of a stickie

We identified 3 key areas which could enhance consumer engagement with the stickie, while improving the experience:

  1. Minimizing the unknowns about the audience
  2. Making a stickie creator feel special
  3. Building a community that appreciates each other

1. “Who is that? ”

i.e. a solution to minimize the unknowns about the audience.

After analysing past data, we noticed that:

Nearly 60% of consumers on the app may not be logged into the app, and hence may not have assigned profile image. But, what’s the impact this may have?

Avatars manifesting into the UI
  • Lack of user identification: Profile icons silently establish trust. They reinstate the feeling of interacting with a real person. Without this, it’s not uncommon to feel that there are several unknowns about a person that a newbie may need to navigate through.
  • Lack of engagement: Using a default image or a placeholder can often feel like it’s a lost opportunity to build a connection with a real person. The nature of the default imagery for ‘default avatar’ can be bland and devoid of personality.

To stray away from that, we needed to push beyond the obvious and try something more fresh and playful, like an assortment of playful avatars, that were more in line with Roposo as a brand.

To truly imbibe the mantra of striving for a community-first approach, it was essential to add a playful face to the stickie creators using Avatars.

Our adorable, gender neutral avatars

Avatars add a lot of value in:

  • Fostering community and connection: When consumers are united by similar faces and icons, it can create camaraderie and together-ness, making it easy to feel like we are connected to one another.
  • Humanising the experience: This would emphasise the feeling of trust, authenticity, and would build an association between different people.
  • Creating an emotional appeal: Avatars are cute, playful, and can certainly add a touch of delight to the consumption experience.

And what should the vibe for these avatars embody?

  • Playfulness
  • Gender neutrality
  • Simplistic form

Fun fact: Little did we realise that these avatars would become the perfect canvas to handle other use cases as well! Here, we’ve used the playfulness of avatars to gently ask consumers to share their names, if they have missed providing it.

2. “Playing on pride and bragging rights”

i.e. a solution to making stickie creators feel special.

Let’s face it human beings like to brag, in some form or the other. We enjoy feeling like special little snowflakes when we do something we are proud of and like to feel good about ourselves. Applying this principle to our live show world…

When a consumer decides to share their opinion with others, they may want to craft their content in a way where an emotion is evoked: be it excited, happy, or even funny.

When someone’s pride is on the line, they most definitely want bragging rights for their creations. How can we make the creator of the stickie feel special?

In order to make a stickie creator feel special, we sought to evoke the emotion felt when receiving a prize: the way the trophy glistens in gold and the sash feels against our skin.

Not only would this solution make someone feel special, it’s also very easy to identify one’s stickie when it’s visually distinct.

Here’s how it evolved:

3. “Adding a splash of Zing”

i.e. building a community that appreciate one another.

Likes and shares serve as indicators of popularity and can influence individuals’ self-esteem and self-worth. How can consumers show appreciation to one another for sharing creative, one-of-a-kind stickies?

a.) How it started:

So when we began ideating on what Roposo’s signature reaction should be, there was one thing we were certain of:

We wanted to innovate beyond the obvious choice i.e. using hearts as a metaphor for showing appreciation. Yes, it’s the obvious first choice. But when it’s overused and templatised, does it lose its charm and uniqueness?

Why not shoot for the stars and try something innovative instead? We’ll find a middle ground later, but let’s try.

Obvious is easy

b.) Ideas along the way:

Instead of having 2 reactions, would having only one reaction that lends support towards other consumers work better?

In an attempt to explore a new experience, we brainstormed the appropriate name for this reaction before immersing ourselves into it’s visuals.

Brainstorming on what to name the reaction based on the gen-z user group

Some key characteristics the word needed to embody (keeping our Gen-Z user base in mind):

  • Fun & playful
  • Concise in length
  • Understandable

c.) Capturing the essence:

After much thought, we landed on the emotion tied to the word ‘Zing’.

‘Zing’ is representative of excitement, energy, and life! It also has a feeling of vibrancy, enthusiasm and delight associated with it. The phrase ‘that’s a zinger’ has for long been used to convey an underlying tone of wit as well.

So when we enjoy something, we simply zing it!

Coining the phrase: if you like it, you zing it

Keeping in mind the true emotion of ‘zing’ , I crafted a playful animation that captured it’s essence! Some of the characteristics I wanted the animation to capture were:

  1. Vibrancy
  2. Swiftness
  3. Energy
  4. Playfulness

Disney’s animation principles had always fascinated me. The more I thought about them, the more I was able to absorb and apply them to the design.

d.) What were the animation principles I adopted?

  • Anticipation: Preparing someone for what’s about to happen, usually captured in the form of a delay.
  • Subtle squash and stretch: When applied, it gives animated characters and objects the illusion of gravity, weight, mass and flexibility. When stretching something it needs to get thinner, and when you squash something it needs to get wider.
  • Staging: Keeping the focus on what’s important within the scene, and keeping the motion of everything else as an accompanying act.
  • Secondary actions: These support the main action going on within a scene. Adding secondary actions help add more dimension to your characters and objects.
  • Exaggeration: Adding a touch of drama to an otherwise ordinary animation to make it more dynamic.

Let’s break this down, shall we?

And here’s how it turned out…

The final animation containing step 1 & step 2

e.) Amping up the zing-factor:

How can we make people feel special when their stickie is gaining lots of eyes?

Fun fact: To crank this up a notch higher, levels of ‘zingy-ness’ were assigned to the stickies. The higher the zing count, the fancier would be the ornamentation to it. This rewards stickie creators for making good content that’s enjoyed by all.

So once a stickie attains ‘X’ zings, it looks visually distinct than other stickies. This makes it stand out in a crowd in the activity board.

3 levels of zing based on their trendyness

4. “Spread the word, shout it out”

With the impact social media has in our day-to-day lives, there’s a constant buzz about what’s new and what’s in trend! So, sharing opinions plays an integral part in:

  • Spreading the word on what’s on trend.
  • Seeking social validation and acceptance on something that seems exciting.

This will greatly benefit consumers and creators share their perspectives on different social media platforms, which in turn will drive traffic towards live shows.

Infusing joy at a macro level:

After we identified ways to elevate liveliness at an individual stickie level, we then began brainstorming ways to add more lively pockets in the Activity board.

We went back and forth to understand what may add value to a consumer when they are trying to consume multiple stickies in zoomed out states. Some of the key problems that were identified were:

1. “What’s lit”

i.e. a solution to quickly identify buzzing zones when zoomed out.

With a board full of stickies, how would one easily identify what’s in trend?

A play on the temporality of trendyness can make the activity board more engaging. Every x seconds in the live show, based on the number of zings a stickie receives, popular stickies are identified.

These popular stickies define clusters of interesting stickies which can be easily discovered.

Lit zones indicating what’s hot

To further crank this up and make the creator of a stickie feel special and proud of their creation when it gains popularity, we will send them this nudge:

“You’re zinging” nudge to direct users to their stickie when its trending

2. “Wait..what did I read again?”

i.e. a solution to distinguish between what I’ve read and what I haven’t.

Creating a visual segregation when a stickie has been read i.e. when it’s on the screen for over x seconds may help a user understand what they are yet to consume.

Differentiating between read & unread stickies

Things I learnt along the way

1. Balancing the dreamer and the realist in me:

My manager once told me, that it’s better to think unhinged, than to add constraints from the get-go. “It’s easier to dial down crazy, than to clip your wings from the start”. This project taught me to dream bigger, and to scale back if needed later.

2. Break down what you wish to animate:

Any animation can be broken down into its core principles involving: scale, position, rotation, opacity. Once we know bucket our animation into these basics, adding more frills on top will only jazz it up further. This along with the 12 principles of animation are very helpful when starting off.

3. Don’t be afraid to fall a 100 times:

The first idea may not be the best, and maybe far from ideal, nor would the second, and nor would the third. But if we keep at it enough, at some point, something will strike us which will start making the disconnected pieces connect.

The chaos that was my figma file..sigh

Finally, what’s next for the Activity Board?

The Activity Board is a fresh concept. The great thing with this is that there’s no right or wrong, there’s only a portal of opportunities to discover.

Ideating beyond what exists today can be both exciting and daunting, but as the designer for the activity board, it makes me smile that this is a world that’s new and different, just waiting to be imagined..

Conceptualising this new world was the first part of the tale, executing was the second, and the third part (where we make it work against all odds) is only just beginning.

Until next time friends!

--

--

Lavanya Gopalaswamy
Roposo Design

I enjoy writing about UX, culture, and personal experiences. Currently designing at Roposo-Glance | Ex Zeta