Designing Microinteractions
A new way to experince text messaging.
How can I make text messaging more customizable for Apple watch users in a delightful way?
I drew inspiration from features found on platforms such as Snapchat, WhatsApp, and Facebook Messanger which empower users to personalize their text messaging experience. The task at hand was to devise a user flow that seamlessly translated to a smartwatch interface.
I began the design process with low-fidelity sketches and wireframes. I focused on layout, structure, and user flow, aiming to map out the core features and interactions in a way that was both functional and intuitive.
After presenting the idea to my class initially, I got valuable feedback on designing on a smaller screen.
Problem: The photo category selection was too small.
Solution: I bumped up the photos from 43px to 60px and took advantage of horizontal scrolling to see all contacts.
Feature 1: Change Wallpaper
Trigger: To change the wallpaper, the user must long hold on the text message they wish to change. This is an example of a hidden trigger.
Rules: The user must long hold for 1 entire second.
Feedback: There is haptic feedback to indicate that they can now update the background.
Loops: Condition-controlled loop
Feature 2: Parallax Scrolling
Trigger: To scroll through the themes, the user can use the rotary dial on the side of their watch or with their finger.
Rules: The user must scroll for the parallax effect to take place.
Feedback: The user gets visual feedback when the text bubbles slide into place.
Loops: Condition-controlled loop
Feature 3: Theme Chosen
Trigger: The user taps on the chosen theme.
Rules: The user must tap on the theme to select it.
Feedback: The user gets visual feedback that their theme has been selected when it expands the entire width of the smartwatch.
Loops: Condition-controlled loop
How can I encourage more regular use of animated messages on the Apple Watch, beyond just special occasions?
Animated messages are currently triggered when the user types keywords like: "Happy Birthday" or "Congratulations".
I conducted interviews with three users to gather their perspectives on animated messages. While all respondents expressed genuine enthusiasm for animated messaging, they also conveyed a desire for the option to send these special messages on occasions beyond just birthdays or congratulations.
Feature 1: Sending an Animated Message
Trigger: To send an animated message, the user can swipe down to see all options. One option is for celebrations, the other is to show amazement.
Rules: The user must swipe on the circle.
Feedback: The user receives visual feedback through the appearance of a new icon adjacent to the iMessage input field.
Loops: Condition-controlled loop
Feature 2: "Celebration" Animated Message
Trigger: Once the "celebration" mode is selected by the user, they can send their animated message.
Rules: The user must be in "celebration" mode to send this animated message.
Feedback: The user gets to experience a fun "celebration" animated graphic.
Loops: Condition-controlled loop
Feature 2: "Celebration" Animated Message
Trigger: Once the "celebration" mode is selected by the user, they can send their animated message.
Rules: The user must be in "celebration" mode to send this animated message.
Feedback: The user gets to experience a fun "celebration" animated graphic.
Loops: Condition-controlled loop
This was a really fun project for me because I got to dive deep into the subtle details that make apps engaging. It is fascinating to consider how seemingly small interactions can have a great impact on how users relate to an application. One of my favorite examples is the double-tap feature for liking on Instagram. This was a game changer for Instagram because it shot user engagement to the roof! Similarly, I find it fascinating how entire apps like Tinder were built on the swipe. Tiktok was made famous by leveraging endless video feeds to captivate (or addict) users as they scroll through content.When designing my own interactions, I really enjoyed understanding the complexities of smart animate in Figma and exploring how interactive components can elevate a design.