The Prototype
If you want to have a play with the prototype, I've included it below:
Overview
Frustrated by the amount of time it takes to find links you've sent a friend in Messenger, I decided to do something about it.
The Problem
If you’re anything like me, you’ve probably shared 100’s (if not more) of links with friends, family or colleagues through Messenger. You’d also know that it’s a mighty big waste of your precious time whenever you go searching for one of those links.
Goal
Design a Messenger feature that allows users to easily find links they’ve shared with friends.
The Process
Research
What already exists?
Beginning the research phase, meant first exploring what other applications were doing in order to solve this problem.
Screenshots of Existing Platforms
Facebook allows users to save posts and links they come across through Timeline. This feature works great, as it shows Most Recent saves, along with Collections the user has created.
Snapchat
Snapchat looks a little bit closer to the feature I envision for Messenger. When opening a the profile of the user you’re chatting to, the app shows you a list of Links and Images you’ve collectively saved throughout the chat.
Apple iMessage
iMessage lays out conversation details in a similar manner to Snapchat. Showing all attachments, links, and files shared throughout a conversation.
Findings
While Snapchat and Apple do a good job of showing links shared among conversations, they both lack the ability to categorise those links. A feature Facebook appears to do rather well.
Considerations
As this prototype is a function that should appear in the Messenger application, it’s important to analyse the design system currently in place.
Getting the components ready
Before I even began designing the link sharing feature, I first began, by tearing apart the Messenger application and breaking it down into components. Using screenshots from my iPhone 7+ and Apple’s Design Guidelines, I rebuilt the screens and icons relevant for the link sharing feature.
Icons
Final Output of Icons
Using Adobe Illustrator and the screenshots I’d taken through my Research phase, I began replicating the icons as close to Messenger’s as possible.
Screens
These screens all came from the Messenger application and included:
- Conversation
- Conversation Details
- The Browser
- New Reminder
Bringing it together
Using the created components, I began to flesh out the Saved Link screens. During this stage, it was also important to consider the micro-animations already built into the Messenger application. As this feature is a prototype for the existing Messenger application, I wanted to match the users interaction to their pre-existing expectations of using the application.
Final Thoughts
Inconsistencies in Messenger
During my research phase, I was a little surprised to find some minor inconsistencies in the Messenger application. Throughout the application, they use 3 slight variations for a back button.
Improvements
While the prototype solves the initial problem I aimed to solve, it could be further improved.
Global Categories
I designed this prototype to live within a single Messenger Conversation - however, it’s possible that some users might want the option to view links sent between multiple conversations.
Smart Finding through ‘M’
During my research phase, I noticed that most of the time I tried searching for a link I’d shared with a conversation, I’d send a message along the lines of: “Can you remember that link I sent last week about ui design?”. The Messenger smart assistant ‘M’ could be the solution to helping users find links they may not have yet saved, or can’t be bothered scraping through their collections to find.