Shortcuts in Instagram DMs

Enabling more organic usage of expressive features in content-driven messaging

ROLE
Lead Designer
TIMELINE
May - Aug 2022
TEAM
Messenger Expression
Messaging Discovery & Interactions
SKILLS
Interaction Design
Visual Design
Design Systems
User Research
TOOLS
Figma
Origami

Project Overview

Messaging on IG is feature-rich, but these features are infrequently used in chats.

Improving discoverability of expressive features in Instagram Direct through building out a Command System was a top priority in the company's H2 roadmap. Also referred to as “shortcuts,” the command system gives users the ability to type @ or / in the composer and trigger a sheet of actions that give them quicker access to the features they use the most—increasing feature discoverability as we add new features to the product.

As the lead designer for this project, I worked closely with XFN (Engineering, PMs, Content, and UXR) to help unblock the team and get design approval from Design & Messenger Leads to prepare for a public test/shipping later this year.

01

MOTIVATION

We’ve all had to venture beyond the keyboard in chats

What's the background?

On Instagram, conversations thrive off sharing content to break the ice and unite common interests

Communication is a top priority in Instagram, seen as a place to connect with close friends about what’s happening in the world
Image: Many chats consist of sharing content like posts or reels, and exchanging short replies or quick reactions.

Overview

How we structured our project.

But content-led conversations are hard to maintain — there is a desire for more expressive features

The Emerging Problem

In reality, there are a number of expressive features already existing on IG Direct. They are just infrequently used.

Despite releasing new expressive messaging tools like GIFs, power-ups, and stickers, Instagram is still currently behind the leading messaging apps (2 pp behind Messenger and 10 pp behind Snapchat) on new feature discovery, suggesting that users are having trouble discovering features within the messaging composer.
Thus, we asked

HMW help users bring more expression to content-driven conversations?

Digging deeper...

Reviewing MESSENGER metrics

Taking a look at some numbers, we identified that Commands on Messenger has led to users using expressive features over sustained periods of time. Shipped commands such as /gif and /silent have led to significant positive results on Messenger, suggesting that people find this useful.

+25 K

YA Daily Active Users

2.06 M

Command Sends

1.19 M

Command Senders
What does this mean for IG?
For IG, commands can provide native text-based entrypoint for surfacing relevant messaging features and a scalable IA, reducing burden on the thread composer. We can see that the composer is already quite crowded, with multiple tappable icons taking up horizontal real estate.

I also worked with a Data Scientist on my team to break down teen usage rates for each tap target of the chat composer (see right). Currently, all expressive features (aside from pictures and stickers) are located within the search icon button. However, this location is hard to access as it only reveals once someone starts typing, and clearly has a low usage rate of 1.7%.

TL;DR – How can we take our learnings from Messenger to successfully bring Commands to IG?

The Goal

Enable more organic usage of expressive features in content-led conversations that help start and keep the conversation flowing, through /Commands

02

UNDERSTAND

PART 2

Identifying

PART 3

Execute Phase

It Began with Research

1/ UXR REVIEW

I took a look at 4 existing UXR studies to understand users' feelings towards the current state of Instagram and Messenger features.

2/ COMPETITIVE AUDIT

I audited 5 different messaging apps to understand existing patterns and interactions around shortcuts and commands.
Reviewing Existing UX Research

IG Messaging Pain Points

To understand the current landscape, I reviewed 4 UX research study decks about the DM and expression experience in Instagram

1/ EXPRESSION lack

Sharing content helps start conversations, but users still have a hard time continuing them. A quick heart double tap isn't enough to fully express a response.

2/ POOR DISCOVERY

It can be confusing to know what features exist that can help users keep the conversation going or segue into a new topic.

3/ access friction

It's challenging to bring expression contextually and naturally to chat-based conversations.

4/ short-lived usage

It's easy to forget of expressive features when they might not be top of mind in a thread, which decreases retention of usage. A lot of digging involved to remember they live.
Source: Confidential UXR Report
How does messaging vary?

Competitive Analysis

Next, I sought to better understand the mechanics of existing command systems through a competitive audit of 5 messaging apps. Each app serves a unique purpose for messaging, which means unique approaches to how they imagine commands/shortcuts. I started by breaking down these different purposes...

Competitive audit

A look at slash command & shortcuts across different apps...
I then conducted a competitive audit of command systems in 5 different messaging apps, analyzing how each system performs contextually within a chat. Unfortunately, the full competitive analysis deck is under NDA :(
Research concluded that,

Commands in the current market are geared towards power users or people who desire shortcuts to increase their productivity in the workplace or manage large established communities.

The forward slash mechanism is already an intuitive interaction for these folks, allowing them to access utility based features quickly.

Unlike its competitors, IG is uniquely positioned to build out a differentiated, content-driven messaging experience between a user and the people they care about.

Commands can be leveraged to scale the composer, bring awareness to expressive features, and increase access to features

03

IDENTIFY & SYNTHESIZE

Identifying Core Product Experiences

Product Principles

After reviewing past research on IG messaging and better understanding the competitive landscape, I generated a set of product principles with my PM to help the team guide the direction of the Commands product experience.

🧩 EASE of access

Provide a rich messaging toolkit that is easy to access and perform

🧠 MUSCLE MEMORY

Keep users coming back to using expressive features, and help them feel confident using them

🌊 Fluidity

Interacts with the contextual chat experiences while reducing steps without adding friction
Identifying the Types of Commands

product USE CASES

Next, to probe into how commands will fit into the Instagram ecosystem specifically, I brainstormed different types of command use cases that could best serve our target user. Although my project focuses more greatly on the function of commands, rather than building out specific commands, this distinction will help us understand what kinds of commands we need to design for.

✂️ SHOrtcuts

Provides quicker and more natural access to expressive features that already exist within the thread.
Examples include sending a /gif or /sticker, changing the chat /theme, or sending a /location.

🕹 Control

Controls how message notify others or when messages are sent.
‍
Want to notify the whole group? Mention all group members with @everyone. After 10pm? Suppress message notifications with /silent.

🦄 style

Adds a personal flare to messages to convey a sense of non text-based expression.
‍
Have a secret? Keep the surprise with /spoiler. Extremely frustrated? Let it all out with /tableflip. Need to be loud? Scream and /shout.
Identifying Mechanics

COMMAND TRIGGERS

After identifying the types of commands, it can be seen that two types of triggers are necessary:
Mentions
Entity mentions, mainly for people related mentions, channels etc.

@everyone, @admin....
Actions, shortcuts
Access to both existing features as well as unique text based actions.

Feature shortcuts: locations, pay, rooms...
Message control: send later, maybe, nickname...
Message style: shrug, spoiler, markup...

04

IDEATION

Reflecting on Research

how should we guide our ideation?

In the competitive audit done in the Understand phase, the following questions were asked for each app’s command system analysis. While beginning my explorative ideation phase, I kept these questions in mind to ensure that my designs aligned well the the project's goals.
How do I discover & find commands?
awareness & access 🧠
How can I learn & remember how to use features?
education & memory 📕
How does using features feel when I’m in a conversation?
FLUIDITY 🌊
UI Ideation

hypothesizing the designs

Keeping the above questions in mind, the next phase focused on exploring a wide variety of new approaches to creating an effective command system product experience. I generated ideas in 3 "buckets" that lay the foundation of the commands primitive, and evaluated each bucket on a set of metrics that each address the three product principles above, in order to land on the best option.

Bucket #1: The Picker

First, let's take a look the different variations of the command picker itself, which is triggered by typing @ or /.
Option 1
Floating, No Tabs
Option 2
Floating, Tabs
Option 3
Sheet, No Tabs
Option 4
Sheet, Tabs
To determine which options aligned best with the product principles (see above) and project goals, each option was evaluated against a set of metrics, specific to the ideation bucket. The metrics (x-axis headers) address the principles and themes found in the research phase.

Bucket #1: The Picker

size

elevation

discoverability

OPTION 1

Floating, No Tabs (Recommended)
🟢 — Shows multiple command options and is less bulky
🟢 — Feels lightweight easily dismissible with overlapping UI
🟡 — Eliminating tabs removes the visual icon of a “slash” which is presumed to boost discoverability.

OPTION 2

Floating, Tabs

OPTION 3

Sheet, No Tabs

OPTION 4

Sheet, Tabs
🟡 — This component shows less multiple command options and is more bulky due to the tabs
🟢 — Feels lightweight and provides greater sense depth with overlapping UI — more easily dismissible
🟡 — Tabs provide the visual icon of a slash command, which is presumed to boost discoverability
🟡 — Able to show multiple command options. However, the full-spanning width creates the illusion of bulkiness
🟡 — Feels heavier and confusing to know what the elevation is. Less obvious that there are 2 scroll windows
🟡 — Eliminating tabs removes the visual icon of a slash command which is presumed to boost discoverability
🔴 — Takes up the most vertical and horizontal space. The full-spanning width creates an illusion of bulkiness and the added tabs compete with the command cells
🟡 — Feels heavier and it’s confusing to know what the elevation is. Less obvious that there are 2 scroll windows
🟡 — Tabs provide the visual icon of a slash command, which is presumed to boost discoverability

Bucket #2: Input Mechanics

Next, I explored different ways to input commands, including how the command is applied and how arguments are inputted.
Option 1
Ghost Text
Option 2
Bubble Separator
Option 3
Sticky Modal
Option 4
Header Text

Bucket #1: The Picker

input confidence

natural

scaleable

OPTION 1

Ghost Text (Recommended)
🟢 — Exists inside the composer, providing clear input guidance for the necessary arguments in a location where the eye focuses on while typing
🟢 — Feels at home within the composer component, almost acting like a more specific version of the regular ‘Message’ placeholder
🟡 — Would not handle commands with multiple arguments gracefully. Ghost text disappears when typing, making it difficult to know when arguments start and end

OPTION 2

Bubble Separator

OPTION 3

Sticky Modal

OPTION 4

Header Text
🟡 — Clarifies what a user should type next in a sticky format so they won’t forget during typing. However, it is unclear if the bubbles will send along with the text
🟡 — Overcrowds the composer with non-text elements, especially for argument names with longer translations if localized
🟢 — Would handle arguments well, as static bubbles would separate argument inputs without ambiguity
🟡 — Clarifies the necessary argument input, but motivates a need to crosscheck with the modal and ensure correct input
🟡 — Feels mechanical and overly technical, like copying down a formula rather than following a description
🟡 — Can handle multiple arguments, but it would get increasingly complex and harder to follow as it scales, due to the formula-based guidance
🔴 — This text exists the farthest away from the composer, making it unclear that an argument is necessary
🟢 — This text feels at home within the gif picker, and acts as a description
🔴  — This component would not handle commands with multiple arguments gracefully

Bucket #3: Discovering Commands

Finally, I explored variations of command discovery, which generated ideas on how to make users aware of the feature.
Option 1
Attribution
Option 2
Delivery Feedback
Option 3
Admin Text
Option 4
Upsell in Sheets
Option 5
One-Time Alert

Bucket #1: The Picker

AWAREness

Actionable

non-intrusive

OPTION 1

Attribution
🟡 — Requires for at least one member of the group to already know that commands exist
🟡 — Requires the user to take initiative and perform the description text on their own
🟢 — Text fits well with the thread view and upsells the command in a subtle yet noticeable fashion

OPTION 2

Delivery Feedback

OPTION 3

Admin Text

OPTION 4

Upsell in Sheets
🟢 — Provides a natural entrypoint to discovering commands when a user accesses features using current flows
🟡 — Requires the user to take initiative and perform the description text on their own
🟢 — Fits well with the thread view and upsells the command in a subtle yet noticeable fashion
🟢 — Requires for at least one member of the group to already know that commands exist
🟡 — Includes a clear CTA that populates the composer with “/”, giving the user quick visibility of the command picker
🟢 — Fits well with the thread view and upsells the command in a subtle yet noticeable fashion
🟡 — Feature engagement is already low, and this option requires the first step of accessing a sheet feature
🔴 — This text is not actionable, and adding a CTA would interrupt the current process of sending a gif or sticker.
🟢 — The text fits well within the sheet and upsells the command in a subtle yet noticeable fashion
🟡 — Users are likely to quickly dismiss it without reading the upsell / text
🟢 — If the alert is not dismissed right away, the alert can prompt intentional discovery of the feature
🔴 — The text obstructs the entire screen’s view, which can be frustrating for a user

OPTION 5

One-Time Alert Dialog

05

EXECUTION

Here's how the command system works... 🥁

We learned from MSGR UXR that people need help discovering commands in ways that feel natural to them 🌱