Improving Instagram With a Sorting System
Note: I placed the images at the bottom if you want to skip the reading.
Pain point.
Have you ever visited an Instagram profile with thousands upon thousands of images and videos and wanted to see the oldest posts only to discover no functionality for efficiently doing so exists? If not, check out a profile of a large brand and see for yourself. I dare you to scroll until you reach the oldest post.
If you don’t feel like doing that then I’ll spoon-feed you the results from when I scrolled the length of the San Francisco Giants profile on the desktop version of Instagram when they had 4,562 posts on February 17, 2017: getting to their oldest post took twelve minutes of continuous scrolling; lagging behind, the thumbnail previews appeared eight minutes after I reached the bottom. The process took twenty minutes! No app or website should force users to spend twenty minutes to complete fundamental tasks.
First solution.
Based on the information above, we can agree we need to build a sorting system. What must this sorting system accomplish? Answering this requires us to examine the ways in which users will likely search for posts not reasonably attainable within the current functionality.
We covered one already: searching for the oldest posts, which means users will need a feature enabling them to toggle between sorting by oldest first and the default setting of sorting by newest first.
Secondly, users may find searching by likes useful, whether they want to find the most popular post within a profile or simply want to gage historical interest levels of their own followers.
I vaguely recall hearing a recent story on a YouTube network I follow claiming that high profile Instagrammers want unique hashtags that other profiles cannot hijack. Considering the striking amount of pornographic posts I came across on seemingly innocent popular brand-related hashtags, I understand the demand. This inspires a feature enabling users to search by hashtag within each profile.
Finally, toggling between oldest and newest first on profiles with thousands of images ignores the remaining challenge of getting to the most median posts efficiently. A feature enabling users to sort by month should solve this.
Design process.
I created five iterations of annotated wireframe documents. Changes to a version made new versions necessary, whether a change required a major edit such as functionality or a minor edit such as grammar. Upon completing the first set of wireframes I realized users may also want to search posts by most comments, least comments, and type of post (image, video, etc.). These additional menu options presented a new problem: a menu with too many options, which looked something like…
- Newest First
- Oldest First
- Most Liked
- Least Liked
- Hashtag
- Month
- Images
- Videos
- Most Commented
- Least Commented
After combining some of the menu options, the final menu looks like this:
- Chronological
- Media
- Month
- Hashtags
- Likes
- Comments
Final product.
I combined “Oldest First” and “Newest First” into “Chronological,” where you, the user, can toggle between “Newest to Oldest” and “Oldest to Newest” on all devices. The “Media” section combines the “Images” and “Videos” settings, allowing you to toggle between the two on all devices. The “Month” function differs by device. On mobile you select “Month” in the dropdown menu, which takes you to the current month of posts where you then have access to an open horizontal scrolling submenu of additional months. On desktop you select “Month” and then select the arrow icon next to the active month to open a dropdown submenu of additional months. The “Hashtags” section functions identically to the “Month” section on both devices. I illustrated neither the “Likes” nor “Comments” sections since the functionality of each of the two categories acts the same as the functionality in both the “Chronological” and “Media” sections. Both the “Likes” and “Comments” sections allow you to toggle between “Most” and “Least.” For extreme interaction design nerds, feel free to read through the 39-page annotated wireframes document below.
In the redesign concept, notice the fourth icon in the row below the bio. Also notice the “NEWEST FIRST” title with an adjacent icon that allows you to toggle between settings. In this case, tapping the icon will switch the screen to “OLDEST FIRST,” which will sort the images from oldest to newest.
Originally published at raymondstone.com.
