Design a feature for Apple’s Messaging app that allows users to save messages within text conversations.
Figma
Miro
UX Designer
UX Researcher
Wireframing
Prototyping
Usability Tester
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.
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.
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:
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.
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.
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.
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.
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.
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:
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.
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.
I added a "Go to Saved Message" button within the Saved Message list providing context to the saved message.
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.
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.
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!
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.
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.
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.