Ironhack Prework Challenge 2: Wireframing

Facebook Messenger

Facebook may not have the best reputation right now due to privacy concerns linked to their first application and also more recently in connection with Whatsapp. I was even contemplating about choosing Spotify or Coinbase which I use quite often.
However Messenger’s usefulness and seemless user experiences makes it such a versatile tool for communication and a great app to closely examine.

The main reason I still use Facebook today is simply to stay connected to a big network of international friends. Ignore the ethical backlash for a second and let’s focus on the simple flow of finding a friend and starting a conversation. — arguably the most natural thing to do especially while quarantined and missing the face to face value.

The Flow always finds its way..

While it is satisfying to have one logical flow through any app the way FB Messenger solves approaching a problem from multiple angles is extremely noteworthy and simple to achieve.

Let’s say I want to communicate with a friend regarding my music label and his upcoming release on it. He has been switching numbers a lot and I know I can find him best on Messenger.

Problem: Finding his Chat

Solution 1: Searching directly in Chats
Solution 2: Searching in People / Contacts
Solution 3: Starting a new Message
Extra: Check for correct Account Login

UI Elements

- The first thing I notice when opening the app are the account notifications (hihglighted red on top of my round profile picture which is positioned on the top left corner — eye-catcher!)
- Similar chat notifications on the bottom left (same red bubble with number of new chats on top of the Chat Icon)
- The same “new” chats are highlighted with bold writing
- Another helpful UI element is a classic search bar right below the personal picture to search for chats.
- Similar usefulness brings the carousel feature under the search bar to find active/online users.
- A small green button included in the profile picture signifies that the user is currently online.
- Below the most recent chat overview are sub category Icons Chats and People — currently active page is highlighted black whereas the inactive page is greyed out → Personally that’s a subtle yet effective way to let the user know further options
- When finally clicking on a Chat (or creating entirely new one with the Pen Icon, top right corner) the chat window opens and many more icons and detailed chat feedback is available:

1. Calling, Video or more Information about the person in the chat
2. Interactive Chat bubbles of ones own messages that change colors when scrolling through (purple to blue / old to new)
   Other useful informations includes Dates, Direct Replies, Share button within the chat, and Read Status
3. Lower toolbar with options to Share, Camera, Gallery, Voice Note, Text bar, Smileys and the OG Thumps Up.
4. Something I noticed quite fast was also the Sound Experience while typing, receiving and sending messages to elevate the Visual Experience

Keep conversations going and pick up on old messages

Everything else is quite stripped back, the background is white and button are mainly held in a light grey. The focus is on the conversations with the personal profile pictures kept on the left.

Let’s have a go at the basic navigation of clicking on a chat, creating a new one and changing the Login in the main menu.

Lo-Fi Wireframes

Basic Prototype

Design Prototype (including colors & styles)

Summary

Looking back at this challenge I was very keen on going into the details with all the styles and colors in the design phase and noticed how many useful visual triggers the app contains despite it’s stripped-back logical or “cold” white background.
On the other it was very vital to focus on the end goal and not getting lost in all the details. For that reason I left out the individual profile pictures for a final prototype testing.

Simplicity yet a sense of urgency is the focus of the Facebook Messenger app which helped it propel to one of the most used apps in recent years. With a strong hook of appealing design elements and subsconscious triggers messaging flows and files, moments, emotions can be shared.
The similarities with its sister App Whatsapp can certainly be seen in the Chat window and location of main navigation icons. Looking forward to the merger!