UX Case Study (Concept)

iOS Message Saving Feature

View Prototype

Project Overview

Scope

Design a feature for Apple’s Messaging app that allows users to save messages within text conversations.

Tools

Figma

Miro

Roles

UX Designer

UX Researcher

Wireframing

Prototyping

Usability Tester

About

Apple’s Messaging app is a common way of text communication with Apple users .  Unfortunately, they do not include a way to save  messages within conversations, leaving the possibility of losing important information within a text thread.  I designed a feature built into Apple’s messaging app that allows users to save specific messages within a text conversation, either in one-on-one or within group text conversations.

The Challenge

  • Design a feature within Apple’s messaging app that allows users to save individual messages within a text conversation.
  • Maintain Apples design system while integrating a new feature into their Messaging app.
  • Design a layout allowing users to easily access saved messages.

Research

Market Research

  • Most message systems, particularly those in mobile text messaging, don't have a "Save Message" feature.
  • Message saving features are more commonly utilized in messaging services such as Slack.
    • Facebook Messenger has Pin and "Bumping" messages, WhatsApp has a "Star" feature (similar to Pinning), and Slack has the "Save for Later" feature.
  • Both iOS and Android have a "Pinning" feature for messages that puts that conversation to the top of your text messages.

Competitive analysis comparing other text message and online messaging apps

Many instant messaging products utilize a "pinning" feature, which places the message or conversation at the top of the users conversation or list of text messages, but few utilize an actual 'message saving' feature. Saving messages gives the user the ability to save multiple messages within a conversation without filling up their text conversation and/or text messages with pinned messages. This is a novel feature for text messaging applications and would be an effective addition to iOS' Messaging app.

Interviews & Empathy Maps

I interviewed iOS users about their experience with texting on their Apple phones. All interviews were either done in person or over phone and all data was audio recorded and written down. 


My interview questions were:

  • What is your experience with Apple's texting system?
  • Have you ever lost or forgotten information from a text message?
  • Are there other messaging apps that you prefer? Why?
  • Have you ever use Message Pinning or Message Saving features on messaging apps and platforms?
Empathy Map built with data from my interviews

Primary User Demographics & User Persona

  • 16-34 years old.
  • Lives in the United States.
  • 51% female - 49% male.
  • 35% utilize an Apple Watch with their iPhones.
User Persona developed from interview data and market research

Ideation

Brainstorming

Based on preliminary research, I had a lot to unpack in regards to designing initial user flows and wireframes.

iOS’ Messaging app already had an existing infrastructure for copying, and manipulating text messages, so I found that utilizing this previously developed feature was the best initial approach to implementing a text message saving feature.


Sitemap

The ability of saving a text message within iOS' Messaging app uses architecture already designed by Apple. When the Apple user holds a message, the message's setting overlay appears, giving the user some options to interact with. I simply added a "Save Message" button to this overlay.

Sitemap of saving a message

Once the message has been saved, the user can find the saved message within the the text conversation's settings overlay. The saved message can be copied, deleted, translated and affected with whatever built in features iOS already has within iOS Messages.

Sitemap of finding a saved message

Wireframes

Paper Wireframes

From my interviews, empathy map, user persona & sitemap, I designed the initial paper wireframes of Apple's Messaging application and the newly designed Message Saving feature.

Lo-Fidelity Wireframes

From the paper wireframes I designed the first digital wireframes of the iOS Messaging app.  Since the application already exists, I digitally sketched out Apple’s Messaging app, with the inclusion of my newly designed message saving feature.

This first wireframe shows the design for saving a message

This second wireframe shows the design for looking at and deleting saved messages

Usability Study

Usability Study

My usability study consisted of ten iOS users ranging from ages 24 to 53.



The user goal was to save a message, find that message in the "Saved Messages" overlay, and then delete that message from the "Saved Messages" overlay.

In my first study:

  • Some participants did struggle with the user flow due to the interactions and animations of the buttons.
    • Particularly in triggering the settings overlays for both the Text Message Screen and the IOS Messages Landing Page.

To alleviate this, I adjusted the amount of time buttons must be held to trigger its settings overlay. I also changed the animation between screens to Dissolve rather than Push In/Out, giving the transition between screens a more smooth change.



  • Some participants associated the green color of the "Saved Message" button with Android's messaging app.

This brought a larger study into iOS' design system. I explored material design and iOS to get stronger understanding of the colors utilized within iOS' design system. To my surprise they don't use green. iOS does utilize blue for primary functions, but being that the message saving feature was a list item built in a menu, was not a primary function, and other list items in this menu were black, I concluded to keep the "Save Message" list item black.

Even though I didn't work with a developer on this product, I know if I went out of iOS' design system, it would have been more work for the developer.

  • One participant brought up a good idea to add a button in the message overlay that would bring the user directly to where the message was sent within the text conversation.

I added a "Go to Saved Message" button within the Saved Message list providing context to the saved message.

Design Process

Design System

This feature was developed on an application that already exists, so my goal was to replicate iOS’ Messaging app. I developed a UI kit that copied exactly what iOS uses for their text messaging app. Luckily there are many mockups and UI kits that have done this in the past and I was able to learn and use some of their already developed UI.

IOSMS Design System

I couldn't find some of the icons, so I replicated them through Figma.

I used iOS Message app templates accessed through Figma's Community as a precedent for my design. With the templates, I filled in the rest of the content reflected from my UI Kit.

IOS Templates

Hi-Fidelity UI

HiFi UI

Taking the design from my LoFi wireframes and combining the style and templates from my UI Kit, I was able to create the first mockups of the added feature. Now the design was truly taking shape!

User saving a message
User viewing and deleting a saved message
Next case study...
about me.
About me image

Debrief

Amidst a decade of nation-wide performance and touring in rock bands, I incorporate a computer’s keyboard to my collection of musical keyboards. With hands-on involvement in engaging audiences and bringing novel experiences to the stage, I bring an intense work ethic and an unsatiating thirst to improve and impress in web and product design.

Design

I design beautiful and useful digital products that guides the users intention and attention through your product and for your company. The contemporary business needs digital products to solve active problems, and a good website to promote and sell that product. I will make sure you have both.  Through Figma, I provide wireframes to prototypes on any level of fidelity, and can accommodate any quick adjustments requested before an approved development.

Develop

I build websites in Webflow where I can create fully responsive and customized websites, specialized for the needs of your user, viewer and client.  Plus, all Webflow sites have the ability for you and your team to edit content quickly and easily.