The Prototype

If you want to have a play with the prototype, I've included it below:


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.


Design a Messenger feature that allows users to easily find links they’ve shared with friends.

The Process


What already exists?

Beginning the research phase, meant first exploring what other applications were doing in order to solve this problem.

Snapchat Shared Links
Facebook Saved
Apple iMessage Shared

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 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.


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.


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.


Final Icons Used

Final Output of Icons

Icon Process from Shapes
Icon Process Overlapped on Screenshots
Icon Process Outlined

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.


These screens all came from the Messenger application and included:

  • Conversation
  • Conversation Details
  • The Browser
  • New Reminder
Screen Design in Adobe XD

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.

Prototyping in XD

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.

Messenger Back Button Inconsistencies


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.