Redesigning Stories For Social Media Power Users

Created in late 2018

Introduction

Here's a small project from late 2018 where I redesigned how stories are selected and viewed within a social media app to make the stories selection process faster for a user who follows many profiles.

User Discovery Notes

1. A decent amount of social media app users primarily utilizes the stories feature within their social app of choice (e.g. Instagram, Facebook, Snapchat, etc.). The stories are normally sorted by most recent post time. Some users prefer to view specific stories regardless of post time and would like to select them without endlessly horizontally scrolling. Simply, it would be more convenient if a user was able to quickly view the stories of user-profiles they desire without having to infinitely horizontally scroll; additionally,

2. If a user follows a lot of other users, the aforementioned problem is exacerbated.

3. Some users have large phones with tall displays that make it difficult to horizontally scroll to a desired story with a single hand.

Here's an example of the horizontal scrolling behavior within Instagram.

Use Case

From the user stories mentioned above, some minor changes can be made to the stories section of a social media app that can mitigate some of the aforementioned friction.

• Use Case: Users should be able to quickly parse through user profiles they follow and select a specific story without having to horizontal scroll.

Testing

I researched many front-end components to discover what minor changes in selecting a story could substantially impact how quickly a user can select and view a story. One awesome component I’ve discovered was the expansion panel. With this component, a user is able to perform a single action to expose additional information that is contextual to the containing container.

Implementation

From this use case, I’ve discovered that expandable panels have been often used to allow temporary information to be shown. As a result, I simply added a caret to the bottom of the stories section to open all of the available stories as an expandable panel. In the end, it allows the user the ability to quickly view available stories without horizontally scrolling.

Retrospective

One of the initial user stories was adding the ability for users to easily access the stories feature/section if they have a device with a large/tall display. The expandable panel does allow the selection of stories easier, but opening the panel still requires selecting the caret button near the top of the screen. If I were to recreate this panel implementation with this use case as the primary need, I would probably add a FAB near the bottom of the screen or add an additional menu button on the menu bar to allow the user to select and open the panel without needing to select the caret. However, both of these implementations would probably harm the discoverability of the feature.

Thanks for checking this out!

Check out more of my creations at jerelstarks.com and if you want, reach out to me here or on LinkedIn!

©2018 Copyright by Jerel Starks