Balancing Speed and Accuracy
PARTNERS
Cross-functional team including 1 product manager, 1 researcher, 5 engineers
ROLE
Lead and independent designer
SKILLS
End-to-end product design
Interaction design
Visual Design
OVERVIEW
How might we add functionality to the activity feed to make it easier for streamers to recognize viewer actions, without compromising their ability to focus on their stream?
The activity feed enables streamers to manage notifications and alerts triggered by viewers' actions, such as following, subscribing, or donating, on their channel. Redesigning the feed required finding a balance between helping streamers identify their viewers while simultaneously allowing them to concentrate on their stream and its content. Here's how I did it:
The activity feed before our redesign
PROBLEM SPACE
"There is nothing more frustrating than when you're watching someone else's stream, and you interact with them by following or donating, only to have the streamer completely miss the event."
Through user research and prodding at streamer's use cases for the Activity Feed, we came to the realization that streamers struggled with the following:
(1) Streamers struggle to recall their last position in the activity feed
(2) The rapid movement of notifications during busy streams makes it difficult to keep track of updates
(3) New streamers find it challenging to associate the icons with their corresponding action type
The struggle that creators face when managing their activity feed has a direct effect on their relationship with their viewers
VISION
The activity feed, not just as a laundry list of notifications, but as a platform that encourages action and supports reference.
The metaphor that came to my mind repeatedly was that using the activity feed is akin to using note cards during a presentation. Note cards are not read out loud but are utilized as a reference when you require assistance, serving as a support system during a stream.
INITIAL RESEARCH
A quick audit of the activity feed revealed that retrieving information at a glance was difficult due to the point-form structure of each event.
The activity feed's point-form structure presents information in a flat list without a clear hierarchy, leading to a cognitive overload that challenges the streamers' ability to process information quickly. We started to think about how we could rearrange critical elements in a more logical sequence aiming to make the event box more digestible at a glance.
RE-GROUPING PROPERTIES
To enhance the feed, we needed to re-architect the foundational component from which the feed is constructed—the event box.
The visual treatment we landed on utilized the pill pattern to effectively distinguish the object and descriptor. This allowed important information to surface, enabling streamers to quickly find answers to important questions such as the type of subscription, the number of channel raids, and the amount of money donated by a specific user with just a quick glance.
Before undergoing our redesign, it was beneficial to assess the elements comprising the event box in order to diagnose the problem effectively.
We focused on rearranging elements within the event box and experimenting with different visual treatments to enhance scanability.
The visual treatment we landed on !
REFINING THE INITIAL VISION
With the structure of the event box established, we began to think of ways we could bring organization to the activity feed and help users recall past activity.
I lead a mapping exercise to get a breadth of ideas that would help take the activity feed from its current state to a preferred state. With a small engineering budget, I then mapped out the ideas on a scale of engineering cost to grok the complexity of each proposed feature. Small changes + big impact were favored.
A new notification system that organizes notifications by date, replacing the previous exhaustive list format. Streamers now have the convenience of browsing notifications by specific dates, with the additional ability to collapse non-essential dates to minimize scrolling.
When browsing through the activity feed, you can now click on any event to grey it out. This feature addresses the feedback we received from our streamers, who found it challenging to remember their position in the rapidly updating feed. By greying out selected events, newer notifications stand out prominently, making it easier to identify and focus on the most recent updates.
ACCESSIBILITY
We included accessibility improvements for keyboard users that would allow them to jump directly to a specific date and then tab through events that took place on that date.
These improvements ensure that keyboard users will have a faster and more seamless experience navigating through events in the activity feed.
FINAL THOUGHTS
This project was a delicate challenge of identifying and thoughtfully eliminating extraneous elements.
Initially, this project seemed daunting. However, we found a way to overcome the challenge by breaking down the problem into smaller, manageable parts. Instead of approaching the task as fixing one giant component, we tackled it by addressing individual pieces that collectively formed the activity feed. This approach allowed us to bring clarity to the project and make significant improvements, as we focused on fixing smaller elements that ultimately contributed to the overall enhancement of the feed.