A beta version of the social media feed “Highlights” was tested internally, resulting in some pain points. With a launch looming in the near future, I had one week to alleviate the angst while charting a path towards a future release.
The PAIN POINTS
1. Visual confusion between posts.
2. Navigation model was disorienting.
3. Detail to feed nav was confusing.
4. Entry into “Manage Followers” was hard to find.
5. Entry into “My Highlights” was unclear.
I developed near term, which kept their current version intact with tiny design tweaks, a medium version which implemented new interaction rules, and a future version which pushed towards a channel model.
Each version had an answer for each pain point. Each also offered a perspective on sewing in reactions and chat in order to make Highlights more integrated.
A- Near
Similar to original, with a few visual updates. The list gets a makeover, a white stroke, large type, and stronger color. Separates My Highlights from Manage Followers, and adjusts the visual design of the entry points to be more clear.
LIST
DETAIL
REACTIONS
NAVIGATION
B- Middle
Compartmentalizes the list into more tappable tiles. Focuses on reactions, surfacing them even at the list level. Also bumps the size of reactions in the post details to encourage reacting. Uses a push back transition to move between Highlights.
LIST
DETAIL
REACTIONS
NAVIGATION
C- Future
This direction uses a channel model. A grid contains followers and colorizes when there are new content. The top tile is a digest channel compiling the best posts of the week. Posts are ordered chronologically and auto progress as per a more channel-like approach. Highlight management moves to profile.
LIST
DETAIL
REACTIONS
NAVIGATION
Revised Highlights
The Skype team aimed towards a combination of the near and middle directions. The feed became a list of tiles. My Highlights and Manage Followers became one space. A FAB allows for easy access to adding a new post. Highlight details move in reverse chronological order and use a dot pagination indicator.
LIST
DETAIL
REACTIONS
