Messenger Element Redesign
For the Students Who Design UX exercise, I focused on improving one aspect of the Messenger app. I decided to make the app cleaner and easier to use and solve the problem of accidentally texting the wrong person.
I began by identifying the people problem.
I’ve determined my people problem as such:
I want to text my close friends without accidentally sending the wrong message to the wrong person. I can’t do this well because:
Messenger puts every contact in one continuous list with no way to differentiate between friends and acquaintances.
I then went on to the next step: conducting user research. I conducted a one-on-one interview with three people.
Person A stated that they used Messenger every day primarily to talk to close friends. They also use the app to keep in contact with or reach out to aquaintances and academic/professional groups. They noticed that they often text or almost text a message to the wrong person, causing embarassment. They also pointed out that Messenger doesn’t allow users to hide their active status which can be irritating at times.
Person B, a computer science student with a wide variety of professional and academic circles, stated that they also used Messenger every day primarily to speak with friends. They also noted that while they don’t frequently text the wrong person, it is still a point of anxiety. Mostly because they maintain a long list of acquaintances that they frequently talk to for school, a few of whom have the same names as their friends. Other pain points mentioned were the inability to hide active status and the inability to save pictures to their camera roll through the photo gallery.
Person C is involved with many clubs on campus, internships, and various other professional activities that use communication apps like Messenger. They pointed out that like the other two interviewees, they also preferred to use Messenger for both friends and professional/academic acquaintances. They have experience with a variety of communication apps such as Slack because of professional or academic necessity, and have noted that they preferred to use Messenger over other communication apps because of its simplicity. They noted that because they use Messenger for both professional and personal use, the problem of accidentally texting something meant for a close friend to a professional group chat is a concern. Their main concern is simplicity.
Conclusion: My user research found that people are concerned about texting the wrong person usually because they have various different uses for the Messenger app. The people I interviewed use it primarily for talking to friends, but have many other people/groups they keep in contact with through the app.
User Flow of Current App
If you look at the above user flow of Messenger as it is currently, you can see the pain points include users accidentally clicking on the wrong name from the list and thus sending a message intended for someone else. This happens often enough that it causes embarrassment for users. This is possibly a result of Messenger’s lack of categorization for different contacts.
I began by coming up with a few solutions.
My main idea was to incorporate the ability to differentiate between close friends, acquaintances, and professional/academic groups.
I created a list of potential ideas on how to go about this:
Add an option (when you swipe left on a friend’s name on the Chats screen) where users can click an icon to put that friend in a close friends list. Everyone in the list has a red (or other color) circle around their profile picture to allow users to differentiate between close friends (and friend groups) and everyone else.
Add a bar underneath the search bar featuring the names of the categories. The home screen will open onto the “Friends” category. The other categories will include “People” (for everyone not selected to be a close friend) and “Professional”. The professional section will give users the option to change the color of the group to one that corresponds with the kind of professional group it is (academic, work, etc.)
The same as # 2, however, instead of the color system, have a separate bar underneath the categories bar with even more specific categories such as “academic”, “work”, etc.
Same as #1, but instead of having a red circle around a close friend’s profile picture, have a red heart on their profile picture. Also, incorporate a categories bar underneath the search bar with the options: “❤”, “People”, and “Groups”.
Have an option to remove friends that the user does not frequently contact from the main screen into a separate category.
Below I’ve listed my sketches of the possible solutions:
In brainstorming these solutions I ran into a few obstacles with some of the ideas. For idea #1, the concept of putting a red circle around a friend’s profile picture could conflict with Messenger’s existing use of a blue circle around profile pictures to indicate that that user has a story. For idea #2, this might be overly complicated and requires too many steps for a user to take. This idea might frustrate users who would now have to manually categorize every professional/academic group. Idea #3 is also too complex and can be confusing for users. Idea #5 is too much work for users. My user research indicates that people have many acquaintances and professional groups that form through time and it might become too difficult for users to constantly have to manually place these acquaintances/groups into a separate list.
My solution is based on idea #4, which is essentially a combination of idea #1 and idea #2. My user research indicates that users appreciate the simplicity of Messenger and do not wish for it to be disturbed. Thus, my goal was to have the simplest possible solution that will only require minimal manual adjustment from users. This way, the design will not hinder the app’s simplicity or functionalities.
The solution, as mentioned above, is to create a bar underneath the search bar indicating the options: “❤”, “People”, and “Groups”. I decided to use a ❤ instead of the word “Friends” for this category because Facebook uses the term Friends in a different way. This could potentially confuse users who might have many acquaintances listed as “Friends” on Facebook. I also decided to go for a “Groups” category instead of a “Professional” category because this way, the app itself can filter through a user’s existing contacts and separate them according to which ones are indiviuals versus which ones are groups. Users can choose to place friend/frequently used group chats in the “❤” list and thus, the “Groups” category will only be filled with professional or less frequently visited groups. The only manual adjustment a user must make is to choose their close friends (by swiping left on a friend/group’s name on the Chats screen and selecting the red heart button). This can be reversed as well. Once a friend or group is chosen, their name dissapears from the “People” or “Groups” list that it was originally on and appears in the “❤” list.
The above picture indicates the following user flow:
User opens onto Chats screen which is automatically on the “❤” page → User chooses the “People” category → User swipes on a name from the list → User clicks the heart button → The heart button turns red to indicate that the person is in the “❤” category now.
My main concern was creating a solution that is actually usable and doesn’t slow down people’s daily use of the app. According to my user research, users want to maintain the ease and simplicity of the app. I had many different complicated ideas, but the one I chose focused on improving functionality while keeping simplicity and usability in mind. I think my design ties in with Messenger’s current look and feel while reducing the chance that a user will send the wrong message to the wrong people. It also reduces clutter and makes it easy for users to navigate the app. Instead of manually searching a name or wading through a list of acquaintances mixed with groups mixed with friends, users can now see all their regular contacts on one page and everyone else on a separate page. Overall, I spent a total of 6 hours on this project.
This project was a really fun way to dip my toes in the design world and I’m excited to see what comes next!