Exploring a Mystical New World of Stickies

How Roposo Design devised navigational principles for moving along the Activity Board.

Episode 02: Understanding how to move

A quick recap of the Activity Board

In our last episode, we looked into the tale of reimagining live show comments, for a world that stood for more creative freedom. Read all about it here. 😊

Standing for Self-Expression: A Departure from the Comment-Verse

But how would one move and explore this new world of stickies? Let’s find out.

The birth of the Activity Board

While the experience of tearing a colourful sticky, scribbling a note, and pasting it on a wall next to others is incredibly fulfilling, a few questions remained:

• How can we retain the authenticity of the sticky wall experience in the digital world?
• And how might one consume and read these stickies?

But why is this necessary?

• Stickies help consumers on live shows share their opinions freely with text, GIFs and maybe even doodles.
• So as the live show continues, the number of stickies continue to increase, so there is a need to aid our consumers with easy discovery.

Our first thoughts

Imagine a world of stickies that could be visualised like a map, with a capability of zooming in and out. Could this experience incite curiosity to explore and navigate through the depths of the board? Let’s find out.

Assigning gestures to the Activity Board

When exploring a museum or a shopping mall, we tend to rely on our instincts to guide us to new areas. Similarly, we created intuitive navigational gestures for Sticky discovery at various zoom levels of the Activity Board. Gestures will help users feel more comfortable and navigate in ways that feel familiar to them.

Being in an unfamiliar environment can often be overwhelming, and one of the first questions that come to mind is “How do I get there?”. With this thought, we sought to create a way for simplistic way-finding to discover new Stickies.

And why is this needed you ask? Because as the number of Stickies posted gradually increase, our humble Activity Board grows more and more in time, making it essential to allow easy movement across zones.

To understand what these gestures needed to do, gestures were assigned basis the intended action.

1. “Show me that”

Tapping a stickie on the board will focus on the stickie and zoom in. This helps users read content clearly when stickies are in a zoomed-out state and need to be observed closely.

2. “What’s near me”

When a stickie is partially visible on the screen at the default viewing state, tapping on it will bring it into focus. This aids in easy discovery of neighbouring stickies.

3. “Help me discover”: Idea 1

For easy discovery of new stickies on the board, zooming in and out effortlessly is necessary. By using the slider, one can zoom in and out of the board with minimum effort.

Fun fact #1: To ensure that the slider wasn’t covered by the thumb while in use, we added a sticky preview pane where the number of stickies vary based on the zoom state. This also visually educates the users on the change in zoom state.

4. “Help me discover”: Idea 2

As a secondary method to navigate across different zoom levels, 2 finger pinches can also be made. While this happens, the knob of the slider also moves up and down, indicating the change in zoom state.

5. “Help me move”

To easily explore the depths of the board, gliding along it helps discover new stickies. This will aid in addressing the question of “what’s new near me”.

Fun fact #2: Users have a fair understanding that UI elements should always be displayed fully inside the screen. So, when something is partially hidden and peaks out of the screen, the default understanding is that the drag interaction on screen would move the board.

Zoom levels and progressive data discovery

One of the key principles applied to the Activity Board was that of progressive disclosure i.e. as we zoom into the board, we discover more data and actions associated with the stickie.

While zooming into the board, the kind of data discovered would progressively increase. Zoomed in states would build engagement through consumption and reactions. Zoomed out states would showcase expanse & liveliness.

Initial thoughts on progressive disclosure

But to showcase different kinds of data at varying zoom levels, it was essential to define a zoom level framework for engineering to implement our vision. Here’s how we went about it:

1. Zoom level framework:

This defined guardrails within which a user could zoom in and out. It sets constraints on how much a user can zoom within the activity board. To achieve this, percentages were assigned relative to the stickie’s size.

So, if the default zoom percentage is 100% with a stickie size of 88 x 88px, assigning a max state (350%) and min state (25%) will allow the board to scale within these constraints.

To plan for scalability and possible tweaks in the future, we planned to keep all zoom percentages configurable from the back-end.

This would bring in a great deal of flexibility in the future if:

• The default zoom level needs to be changed for better engagement.
• New metadata is added at specific zoom levels.
• The maximum and minimum zoom states need to be altered.

2. Board expansion framework:

Stickies are posted in large volumes during the live show. So the next question was: how would this board expand? For this, we devised another framework to expand the Sticky Board gradually throughout the show.

By detecting the area occupied by stickies, the Activity Board expands along 4 directions when a new stickie is posted.

As the Live show continues, and more stickies get pinned, the board continues to grow like an organism, expanding from all sides.

Let’s visualise what happens at different stages of the show:

• T0 i.e. when the show starts: There will be zero stickies.
• T1 i.e. when one stickie is posted: It’s origin is identified and the board size is fixed. At this stage, the board and navigation gestures are activated.
• T2 i.e. when stickies start filling the board: When the stickie occupied area > 25% of available area, the board area increases.
• T3 i.e. when the board expands: At this stage, the board size expands in 4 directions, increasing the movable area and allowing more stickies to be posted.

3. The anatomy of a Stickie

Narrowing in on the visual design for the Stickie was an explorative journey. The key data we sought to showcase on our stickies at the default zoom state were:

• Content: Containing text, text + GIFs, GIFs. (based on how the user chose to express their opinions)
• Name of consumer: 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.
• Time of posting: To highlight when a stickie was posted.
• Reaction: To lend appreciation & support to the creator of a stickie.

Check out some of the iterations:

Initial iterations

Nerdy design decisions

And lastly, for all the design enthusiasts out there, here’s a tit-bit on how we arrived at the nuances of some design decisions:

1. The right amount of rotation

After lots of trial and error, we landed on an approach for how stickies look after posting: some would be rotated clockwise & some anti-clockwise. Stickies are posted randomly on the Activity Board with the following rotation angles: -7, -5, -3, -1, 2, 4, 6, 8. Why?

• No state for zero degrees rotation: Stickies are associated with playfulness..something that arises with slightly tilted states. Zero rotation may stray away from this vision.
• Max & min states: Beyond angles of -7 (i.e. anticlockwise) & 8 (i.e. clockwise) degrees reading becomes difficult.
• Rotating only in 1 direction: If all stickies are rotated only in 1 direction i.e. either clockwise or anticlockwise, the board feels imbalanced.

2. A splash of colour

We wanted stickies to imbibe playfulness and fun. We also drew inspiration from our pilot experiment and used that as a starting point to define a colour pallet.

• With this large a range however, the board started to feel like it lacked cohesion. So within one colour, only one hue was selected.
• Drawing inspiration from the experiment again, we observed the play of light and shadow on the stickie board. From this, we moved from flat colours to smooth gradients with shadows for some depth.

3. Weight of a stickie

From the stickie colour exercise, the next step was figuring out “the perfect shadow”. We observed the physical world and drew inspiration from the following:

• Materiality: Stickies in the physical world are made of paper. So, they are light in weight and can be easily moved.
• Layers of surfaces: Understanding where stickies fit in with the other UI elements was key. Since they’re pinned on a board, they’re likely to be very close to the surface.

4. Cornering that radius

From our first stickie iteration, we realised that the corner radius was crucial in determining the “stickieness” of a stickie.

• Too much roundness, and it would lose it’s essence.
• To little roundness, and it would instil too much structure and lack fun.

That’s a wraaaap! 👋🏼

Designing the Activity Board has been a labor of love, one that’s required me to iterate and redefine my approach rapidly 😇. It is certainly one of the most exciting and innovative projects I’ve been entrusted with.

Designing the experience for this with zero references and no prior examples has been challenging but a journey where our imagination could truly let loose. We are currently validating our experience with AB tests and understanding the analytics data behind this experience!

And I’m curious, anxious, and excited all at once for where the Activity Board leads me next! 😄

In our next episode, we’ll explore more on:

The design principles that governed how the live show would play.

Defining the next era of Live Show experiences

Until next time friends, Toodles!