MICROINTERACTION
Messenger Links
PROJECT DESCRIPTION
Personal Project
DURATION
2 Months
ROLE
Interaction Designer
Personal Project
2 Months
Interaction Designer
Users
Aaron is socially active on Messenger.
Needs
He needs to save and find the links his friends shared in long conversations easily.
Uses
With Messenger, he can easily find what links him and his friend shared in the past
Features
using a page dedicated for shared content and a search bar
Products
in a way that’s effortless and native to Messenger.
I wanted to understand how people interacted with links within a messaging app and how they were retrieved and saved. Since current messaging apps had no way of saving links, my initial assumptions were that people used other apps to save the links they liked.
Links get easily buried in apps like mail, safari and notes. Your link that’s open in your Safari tab may get overwritten by another new link or your link in notes might be buried by 10 other new notes.
More importantly, when users look for a link shared in a conversation by a friend, they immediately associate that link to the conversation in their memory; NOT the other apps they saved them into.
Surprisingly, large chat platforms like Messenger and Messages (iOS) do not have a native way of saving links. Messenger allows you to save links, but they get saved to Facebook’s main App which takes users out of the Messenger experience.
Apps like Kakao and Whatsapp automatically save both shared images and links, but they are listed chronologically. This is not an issue in short conversations between 2 people, but it becomes difficult when the conversation gets longer or if more people are in the conversation. This causes users to scroll through a long list of links or images which is no different than scrolling through a long conversation of messages.
Aaron is always on his phone chatting with numerous people who send him interesting articles and links to cool sites.
He saves numerous articles in either his notes app, but they get lost. He scrolls through long conversations to find the links again.
Aaron wants some way to find and organize the links his friends send him.
Users should be able to save a link within the same app with less actions and be able to find it without scrolling through a long conversation.
Our users shouldn’t be using another app to accomplish their task. Our product should feel familiar to existing UI patterns and not conflict with other existing features.
There are many features that get added and updated for messaging apps. When adding features, it was a challenge to avoid interfering with current features and staying consistent to Messenger’s user interface guidelines. When ideating concepts, I was aiming for ways for users to both easily save links and retrieve them at a later time.
A bookmark button that saves the link to a collection that both you and your friend can see. Several questions arise: Should this be a private collection that only you can see? Should this collection be only tied to this particular conversation? Should you be able to make multiple collections?
Tapping on the user’s name at the top of the conversation will lead to the user’s profile where he or she can find all the content that was shared in the conversation.
A search bar that surfaces content within the current conversation. Users can type in keywords to bring up either content (images or links) and messages. Technical questions arise: How do images and links have keywords associated with them?
I learned several things that helped me design towards an effortless experience. First of all, a simple save button to save links was already too much work since users did not have time to manage links in general. Second, there were issues in finding links that were shared a long time ago. Users would scroll through a long list of links which did not made it different from scrolling through a long conversation.
I learned that a simple save button was already too much work on the user. 1 simple action may sound easy, but users mentioned that there was a high probability of them forgetting to save the link. They mentioned that they don’t have time to manage links for a conversation. They brought up an example of one’s browser history which allowed them to see links they have visited in their browser with minimum effort. This lead me to remove the save button entirely and move towards an auto-save feature which solved the “Finding Links” aspect of my project.
People found value in a section that had all the shared links in one page, but they mentioned that it was only practical if you wanted to find a recently shared link. A link that was shared let’s say months ago would take scrolling anyways. This lead me to experiment with a search bar that would be primarily used for finding really old links. Placing a search bar in the middle of the profile page would have broken the existing Messenger design pattern which would make the feature less native. The decision was made to place it in its own page which made the page simple and clutter free for the user.
Most of my pro users were familiar with the Shared Images feature found in Messenger so it was natural for them to see shared links grouped together with it. The only concern that was brought up by users was that the shared images were competing with the shared links and users would only be able to see one at a time.
I initially went with the title “Shared Content” for my button. When users read this, it was hard for them to digest due to the terminology used and the vague meaning of “Content”. It was also not easy to scan so users would often scroll past it. More simple words were used to allow the copy to be read more easily.
One major discovery caused me to change my decision: I learned that the pro users who knew about the shared photos section took forever to discover the feature and they happened to find it by randomly browsing the app. This lead me to move the button to the very top for better discovery.
My other design principle was to have an effortless design. My prototypes with just a button forced my users to drill in even if the link was shared a minute ago. This placed a lot of effort on the user which caused me to surface the recently shared content to the profile page. The problem of finding a recently shared link with ease was solved, but another question came up: How do I easily find a link that was shared a long time ago?
During user testing, I discovered 3 factors that had to be improved in the design. They were the following:
Looking back at our design principles, the entirety of the project was focusing on providing an effortless experience that was native to Messenger. In terms of saving links, users were no longer required to switch apps and they were able to save links without taking any action at all. When it came to finding links, users were able to find their shared links due to its familiar placement within the app, clear language and less drilling in.
The search bar is an element of the interface that needs a higher fidelity prototype. The issue with presenting a prototype of a chat app to users is that they are dealing with a made-up conversation that they are not familiar with which makes it hard for them to think of terms to search. The algorithm of the search bar also needs to be clearly defined so that it is not generating poor search tags.