Together with my teammates Kris and Kalynn, we were tasked with redesigning microinteractions in receiving and sending text messages. We could choose any OS system that we preferred, but we had to stick tot he manufacturer's design guidelines. After identifying the microinteractions we wanted to change or improve, we had to create a flowchart and prototype.
Research
We started the process by observing the current iOS messaging system and looking for micro-interactions we could improve. We found it difficult at first to find microinteractions that we wanted to redesign, so we went to Android messaging systems to find anything we liked from their systems that we could implement or improve on iOS.
We found that Android has micro-interactions and features that we wish were available on iOS. Or more easily accessible on the messaging app. The micro-interactions that we identified and wanted to redesign were (1) scheduled messages from the messaging app and (2) the ability to reply to messages from the lock screen quickly.
Another micro-interaction arose when we shared the iOS systems' screen recordings to demonstrate to the members who did not own an iPhone. We were toggling between apps and the predictive text feature that was located next to the message input, and Kaylnn was asking how we were doing that. Kalynn doesn't have an Apple phone, so she relied solely on visual feedback to know what was triggering what, and there wasn't any visual feedback for that interaction. We decided to (3) give the toggle feature for the messager app and predictive text visual feedback.
Sketches
After we decided on our microinteractions, we each chose one to sketch out what it could look like. With the sketches, we also had to know how the microinteractions would work, what the feedback would be if any, and what the flowchart would look like. After coming together and discussing our sketches and ideas, each design was approved, and we moved on to creating flow charts and prototyping.
Flowcharts
App and predictive text mode toggle flowchart by Kris Bumford
Scheduling message function flowchart by Sofia Nilsson
Quick responses to messages on the lock screen flowchart by Sofia Nilsson
Prototype
We crafted the prototype of our redesigned micro-interactions in Figma. First, we have the re-design of a quick reply that will appear on a user's lock screen. We drew some inspiration from the Android designs where options for quick responses and the option to type your own message if the quick replies were too short. When new a new message is received, the user can tap that message to display quick responses. The user can then either choose one of three suggested responses or type in their own and send. The notification will disappear from the lock screen once replied to.
We also decided that the application and text suggestion button needed to show some feedback when switching between toolbars. So, we designed a button for the text suggestion, added some color to the app button, and also made it a toggle button to give it some movement. That way, it is much more apparent to the user that they can press the button to do something, and it also clarifies for the user what toolbar they are using.
Lastly, we decided that message scheduling should be accessed directly and more quickly in the messaging app. So we redesigned this function as well. We added a schedule messaging button in the application toolbar. We also thought that just like how it suggests text and emojis, the suggested text could suggest scheduling messages by having AI identify the kind of message being sent. Once a scheduled message has been sent, a little time icon on the right of the message will indicate that this message is pending and has been scheduled.
Annotations