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.
Product thinking, ideation, prototyping & interaction design, cross-functional collaboration, design iteration
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.
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.
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.
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.
There is such precedence of putting caption for non-9:16 Stories ads, without obstructing the media.
Previously tested experience
Neutral Ad Performance
Already Shipped
With positive performance improvement comparing to ads without captions
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.
Currently, 9:16 media (images + videos) do not show their caption. However, these ads make up about 40% of Instagram Stories.
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.
Enabling caption for 9:16 media will help people comprehend and digest ad media better, generating 0.3% IG event based revenue (EBR).
Based on our unique Stories design pattern and IG business design system, I explored how caption can be presented in 3 major categories.
Leveraging existing components/patterns from IGB design system and place captions in a container as a part of the UI.
Directly placing caption on ad creatives, making the experience more native like non-ad Stories (organic.
Placing the entire caption as a 2nd ad card on an ad on Stories
Here are a couple of principles in mind to evaluate design ideas.
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.
I brought this wide range of explorations to the design review and finally received test approval for caption as an overlay on ad creatives.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
When people open the caption sheet to learn more about an ad, they don't find value from solely reading the caption.
Like we previously discussed, people to open caption sheet feel hesitant to make their purchase decision.
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.
Scrollable caption sheet with max 4 line displayed, which allows users to digest caption and consume media at the same time.
The caption sheet exists for non-9:16 ads
❌ Story pauses when users click to open caption sheet
Optimized Caption Sheet & Browse
✅ Allows users keep engaging with ad media while digesting caption
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.
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.
With positive ad performance improvement, the team will be seeking launch approval for Stories caption, both pre-click and post click experience.