iMessage

App Screens

The Problem

“Oops! I didn’t mean to send that” is often the follow-up message that is sent after a message unintended for someone has been sent.

Good design minimizes errors and forgives mistakes. iMessage does not have the option to unsend messages especially when it’s direct competitors like WhatsApp & Messenger have that option.

I also explored the idea of adding a rewind/fast-forward option to the audio messaging feature. More on this below.

The Goal

To integrate a feature that supports unsending messages by leveraging Apple’s existing design system and patterns.


The Design Process

UX Research Plan

I fleshed out a UX research plan, which included a competitive analysis, secondary research and a survey.

My main research goal was to learn the percentage of iMessage users that were interested in the unsend message feature and the rewind/fast-forward feature for audio messages. In addition to that, I also wanted to learn how these features will help create a better experience for them.

Competitive Analysis

To get a better understanding of the instant messaging application field, I sought after iMessage’s competitors and compared their features to learn their areas of strengths and weaknesses. I identified multiple ways in which these competitors provide a better user experience:

  • Ability to unsend messages
  • Cross-device support
  • Rewind/fast-forward feature for audio messages
  • Ability to search within individual messages.

Competitive Analysis Chart

Survey

I surveyed 13 participants who were all iPhone users and my goal was to determine the percentage of users that have noticed the absence of the unsend message feature and rewind/fast-forward feature for audio messages.

My goal was to learn the needs and pain points of each iMessage user while comparing other messaging platforms.

Research Insights:

  • 69.2% of the participants would like the option to unsend messages.
  • The rewind/fast-forward feature on audio messages didn't matter to 53.8% of the participants.

From the results of this survey, it was clear that unsending a message was a higher priority than rewinding/fast-forwarding an audio message and so I decided to focus only on creating the feature to unsend a message.

To see the complete survey results, click here to view it in a new window.


Task Flow

Using FigJam, I created a task flow for the user’s action to carry out the unsend message process. As a result, this served as an outline for the required screens for the wireframes.


Sketches

I created some sketches of what I envisioned the flow of unsending a message would look like. I used this opportunity to visulaize and decide the most efficient user flows.

iMessage sketches
iMessage sketch 1
iMessage sketch 2

High-Fidelity Redesigns

When designing these wireframes, I made sure to stick with Apple’s already existing design system, while keeping in line with their Human Interface Guidelines and patterns/gestures familiar to iPhone users.

Good design minimizes errors and forgives users when they make mistakes and so I wanted apply these principles to iMessage’s design. The flow I designed for unsending messages is to long-press the message bubble. Designing this feature surfaced a question: “How long should users have before they can no longer unsend messages?”My competitive analysis showed a range of times and I put that into consideration when adding this feature.

iMessage high-fidelity design
iMessage high-fidelity design
iMessage high-fidelity design

This flow shows the process of unsending a message. The user long-presses a sent message, bringing up a preexisting menu. When the “more” option is pressed, it brings up the bin icon to delete messages. The user has the choice of selecting multiple messages to delete.

The research I did showed that a record of a deleted message is ideal, hence, the last 2 screens showing that.


Usability Testing

I conducted this test with 3 iPhone users who were familiar with iMessage to test the flow of deleting a message on the app. Overall, the flow was received well but some parts of the flow showed could use some improvement.

Usability Test Findings

Feedback

I have been waiting for this feature!

This is how I would expect this feature to look.

It would be nice to see the delete option right away.


Priority Revisions

I made revisions to the problem area that the majority of my participants pointed out. I explored the possibility of inserting the delete option within the menu that shows up when the message bubble is long-pressed.

iMessage Priority Revisions

Interactive Prototype

You can view and click-through the interactive prototype below.

Pro-tip: View it in full-screen to get the best experience!


Conclusion

Learnings & Next Steps

The goal of this add-on feature was to improve the user experience of the iMessage app by providing users with the opportunity to unsend messages. This project taught me how to work within an established design system. It showed me how preexsiting patterns could be built upon to create novel but familiar experiences for users. I was also reminded me of the importance of micro-interactions in design.

In addition to that, I learned how insightful usability testing is. The feeback I got from my tests helped me dicover ways to improve on this feature.

The design process is iterative and there’s always an opportunity to improve my designs. For the future, I will explore the rewind and fast-forward feature and test it out. I think it’s a nice feature to have.

Other Works