Captions That Connect:
Elevate Engagement
in Stories Ads!

Highlight.

After a successful 100% rollout of ad placement on Instagram profile reels chain, I moved to Stories monetization team, working on 0 to 1 caption experience that improved the overall Stories ads engagement and conversion.

Skills Involved

Product thinking, ideation, prototyping & interaction design, cross-functional collaboration, design iteration

Time: Dec. 2023 to Nov. 2024
Role: Product Designer
Team: Instagram Stories Ads
Platform: iOS/Android
Product Launch Target: H1 2025

tl;dr

What I did:

  • Initiated PRD (product requirement document) and drive the discussion with engineers, PM, and product marketing manager during the early stage to understand the product.

  • Dived deep into caption experience from other surfaces like Feed and Reels and understood the constrains of our surface.

  • Ideated 3 distinct directions of caption experience and actively seek feedback from design peers to get different perspective.

  • Closely worked with IG design system partner to ensure the caption experience align with the IG Business system pattern.

  • Attend IG Business Design Review to seek alignment on Stories MVP caption experiment plan and received an approval to test.

  • Kicked off the implementation with engineers and closely work with them to ensure the development aligns with the design spec.

  • Drafted the iteration strategy with clear problem framing & hypothesis to investigate the observed regression.

  • Worked with PM and product marketing manager to align on the final Launch candidate/proposal.

Results & Impacts

  • Although there was some observed regression for the initial testing candidates, the iterative experiments that I led successfully mitigated the regression.

  • The caption sheet & browse outperforms the current static caption sheet, and will be scaled to non-9:16 Stories ads.

  • The recent experiment (as of Nov. 2024), show +0.12% Global Ad Score, and +0.22% Stories Ads conversion.

There are captions on other ad surfaces but not on Stories ads.

Captions on other
Instagram Ads

Caption help users better digest the message being conveyed in an ad and tend to perform well on every engagement metrics, such as impression, conversion, CTA click through rate, and likes

The caption format for both Feed ads and Reels ads are the same as their non-ad counterparts.

Previous tested ad captions on Stories

Caption on 2nd Carousel

We tested putting full captions on 2nd card but the ad metrics stayed neutral.

From users' perspective, they have to go back and forth to view the ad media.

Portal Caption for Non-9:16 Media

There is such precedence of putting caption for non-9:16 Stories ads, without obstructing the media.

Caption on 2nd Card Carousel

Previously tested experience
Neutral Ad Performance

Portal Caption for Non-9:16 Media

Already Shipped
With positive performance improvement comparing to ads without captions

Problem brief

People Problem

When coming across an ad on Instagram Stories, people need additional information, such as caption, to better digest what's being conveyed in ad media.

Business Problem

Currently, 9:16 media (images + videos) do not show their caption. However, these ads make up about 40% of Instagram Stories.

How Might We

introduce a new caption experience on our Stories ad surface to better help our consumers digest ad media so that they can make a informed purchase decision?

The approach

We often use a hypothesis-based approach in product design, which is a scientific thinking to validate our design decisions instead of solely based on intuition or past options. For all projects, the team often seek alignment on testable hypothesis to gather data to make the decision whether we would like to launch a particular design or not.

Our Hypothesis

Enabling caption for 9:16 media will help people comprehend and digest ad media better, generating 0.3% IG event based revenue (EBR).

Hey! If you are still here, let's talk about how we get to the final design.

Caption Placement Explorations & Considerations

Based on our unique Stories design pattern and IG business design system, I explored how caption can be presented in 3 major categories.

Category 1: Caption as a part of Stories' UI

Leveraging existing components/patterns from IGB design system and place captions in a container as a part of the UI.

Category 2: Caption on ad creative

Directly placing caption on ad creatives, making the experience more native like non-ad Stories (organic.

Category 3: Caption on 2nd carousel

Placing the entire caption as a 2nd ad card on an ad on Stories

Evaluating
Ideas

Here are a couple of principles in mind to evaluate design ideas.

Evaluation Criteria

Digestible: Caption conveys message from advertisers in a succinct, non-distracting way.

Native: Fits seamlessly into organic content (non-Stories ad content).

Flexible: Caption is flexible to place above or below the CTA sticker depending on its personalization and customization.

Familiar: Reuses pattern from IG design system library when possible

Feasible: Technically feasible and easy to build.

Initial Proposal

I brought this wide range of explorations to the design review and finally received test approval for caption as an overlay on ad creatives.

We aligned on this design because...

  • It works for 9:16 media (image and videos) in general.

  • This flexible component is compatible with advertiser customized CTA sticker.

  • The caption is aligning with organic text pattern (see reference below).

  • Ensuring the text is legible on its overlay.

However...
Results of the experiments didn't go well as expected

Initial Experiment Results

We tested another 2 additional variants in addition to originally proposed black/white overlay caption for the purpose of giving advertisers more creative options to display the text.

However... all variants show regression except black/white overlay caption performs slightly better than the rest of variants.

Key performance data insight & interpretation:

  • Ad swipe forward rate increases after showing caption, especially for accent/transparent color overlay variants. This indicates that people don't like jarring elements

  • People who open the caption sheet tend not to click Call to Action to further learn more about an ad. Instead, they dismiss the bottom sheet and swipe away.

Our iterative approach

Working closely with software developers, I gathered ad performance and user behavior data and designed 3 iterative, hypothesis-based experiments in order to mitigate the regression, aligning with user expectation to improve their experience.

Hypothesis 1: Shorter caption container can mitigate swipe forward rate, which might be caused by misclicks.

By shortening the width of the caption container, accidental tap forward behaviors could be mitigated, which ensures that the navigation/tap behavior is more intended.

Hypothesis 2: Reducing truncation link "...more" affordance

People seem not getting much value after engaging with captions, but would rather go to the advertiser's destination to find our the information they need.

Making caption feel less tappable by removing "more" can ensure users still get the value from caption but better focus on their primary action (CTA).

Hypothesis 3: No caption overlay on image ads only

Removing caption overlay for image ads only can ensure the ad looks more native and make users feel the text is the part of the creative.

Narrowed Solution

Caption Pre-click Experience

This hypothesis-based iterative experiment approach helped us understand the real root cause for the regression after introducing the caption component.

With hypothesis 2 and 3 validated, here are the designs we narrowed at this stage.

Insights from the iterative experiment

  • Reducing affordance (adjusting "...more" to "...") helped users focus more on the primary action when engaging with ads. We have seen better click through rate on the ad CTA (+0.11%).

  • For people who click to open the caption bottom sheet, over 75% of them still dismiss and swipe away the ad, without clicking the CTA on caption sheet.

Wait...
there is still one more problem to solve.

Caption sheet optimization

Caption Post-click Optimization

As we observed the ad performance becomes neutral from the narrowed pre-click solution, I also took the effort leading the post-click optimization, even it is a separate problem from caption pre-click experience.

The scope includes both image and video ads.

Existing post-click experience

When people open the caption sheet to learn more about an ad, they don't find value from solely reading the caption.

People problem

Like we previously discussed, people to open caption sheet feel hesitant to make their purchase decision.

Hypothesis

Giving people opportunity to browse the media and read the caption at the same time can improve their intent and help them make a informed purchase decision.

Solution

Scrollable caption sheet with max 4 line displayed, which allows users to digest caption and consume media at the same time.

    Before

    The caption sheet exists for non-9:16 ads
    ❌ Story pauses when users click to open caption sheet

    After

    Optimized Caption Sheet & Browse
    ✅ Allows users keep engaging with ad media while digesting caption

    Results and
    pathforward

    Stories ad is a challenging surface comparing to ad on Feed and Reels. As we discussed, the initially approved testing variant didn't learn to positive metics gain till we optimized the post-click experience allowing users to browse caption and engage with ad media at the same time.

    Technical Considerations

    Caption Pre-click: Stories caption can encounter challenges when placing on some media with busy background. As we are closely monitoring the experiment data, the engineering team is working on a better guardrail to ensure our caption does not obstruct ad media.

    Pathforward

    With positive ad performance improvement, the team will be seeking launch approval for Stories caption, both pre-click and post click experience.