Redefining In-App Commerce
I led the design for a new in-app shopping ad format at Meta, keeping users inside their host app and turning bounce-outs into purchases.
Problem: Tapping ads kicked users out to an external browser, which caused high bounce rates and lost purchase intent.
Approach: Keep the entire flow in-app using an expandable card and embedded checkout, add brand customization, and use ML to select high-performing layouts.
Outcome: This new format decreased bounce rates by 10%, increased user engagement by 15%, and generated +$30MM in incremental revenue in test markets.
My Role
Strategy
- Planned, organized, and led a design sprint to define the project's direction.
- Collaborated with PMs to define the UX strategy, deliverables, and timelines.
Team Leadership
- Organized and led weekly design and engineering review sessions to ensure alignment.
- Mentored and provided guidance for a junior designer on the team.
Design
- Collaborated with three cross-functional UX teams to ensure a cohesive experience.
- Designed the end-to-end final product, from wireframes to high-fidelity prototypes.
The Product
These shopping ads appear at natural breaks in mobile apps, like between game levels. The new format was designed to let users browse and shop for products without having to leave the app they are currently using.
Defining the Problem
Performance data showed a high bounce rate. When users tapped on an ad, they were immediately taken out of their current app. This interruption caused many people to abandon the process right away. This high bounce rate directly led to a lower conversion rate and, as a result, less revenue for the business.
Research
The research led me to a key persona, "Paddi," who represented our typical user. She was happy to discover new products but hated being interrupted or forced into a complicated process.
“I just want to see if I like it quickly. Don't make me leave the game I'm playing to go to a whole different app unless I’m ready to buy.”
This quote was a key moment for the project. It confirmed our old approach was wrong and that we needed a new design that let users see more details without leaving the app. Based on this, I sketched out three different concepts to explore with my team.
Concept A: Tabbed Modal
Con: This felt too complex and would overload the user with information.
Concept B: Mini-Browser
Con: This was slow to load and still felt like a major interruption.
Concept C: Expandable Card
Pro: This was simple, fast, and clear. This was the direction we chose.
Competitive Analysis
Before designing, I needed to understand the existing market. I analyzed several competitor ad formats to identify common patterns, strengths, and weaknesses. This helped us find opportunities to create a better and more unique experience.
| Rewarded Video | Interstitial | In-Feed Social | Our New Format | |
|---|---|---|---|---|
| Seamless UX | ||||
| Direct Purchase | ||||
| Multi-Product | ||||
| Brand Customization |
Key Pain Points
From our research, three major pain points emerged that became the focus of my design work.
1. Confusing User Flow
The user flow was confusing and disruptive. Our research showed that 7 out of 10 users were frustrated by being forced out of their app and into a browser, which felt like a disjointed experience.
2. Lack of Brand Identity
Advertisers felt the generic ad format did not represent their brand well. In fact, 9 out of 10 advertisers we surveyed complained about the lack of brand identity and customization options.
3. Lack of Scalability
The format wasn't scalable for advertisers with larger catalogs. 8 out of 10 advertisers said they wanted the ability to showcase multiple products at once, which the current single-item format did not support.
Mission, Goals, and Scope
Mission
To enable consumers to buy products directly within an ad, without being forced to an external page.
Goals
- Improve brand identity options for advertisers.
- Optimize the user flow to be seamless and intuitive.
- Increase user engagement and overall revenue.
Project Scope
The initial project scope grew after our research. We realized that to truly optimize the user flow, we also needed to support the ability for advertisers to show multiple products, which expanded our design and development work.
Initial designs and Experiments
To select the right format, we ran multiple experiments with different layouts, colors, and interactions.
Machine Learning
We then used machine learning to analyze the results of these tests. This data-driven approach allowed us to identify which design elements were most effective and use that knowledge to improve and select the final designs.
User flow optimization
Our primary goal was to stop forcing users to external web pages. To achieve this, we designed a seamless experience that rendered the entire shopping flow—from the initial ad to the product feed and payment—inside an iframe within the host app. This kept the user in their original context.
Old Flow
New Flow
To support this, we also created a system where advertisers could easily upload their product details via a spreadsheet. This data then populated an in-ad product feed, allowing them to showcase multiple items at once and giving users more to explore without leaving the app.
Payment
To create a truly seamless shopping experience, we incorporated auto-pay and autofill options directly within the ad. This allowed users to complete their purchase with minimal effort, further reducing friction in the payment process.
Wireframes
After defining the core user flow, I created detailed wireframes to map out the structure and layout of each screen in the experience.
The Solution & Validation
The final design was a simple, expandable card. It showed just enough information to be interesting and let users easily see more if they were curious. A major challenge was a technical limitation with our animation system. I worked closely with an engineer, and together we found a simpler animation that still felt smooth and kept the user oriented.
Usability Testing
To validate our design direction, I conducted unmoderated remote usability tests with five participants who regularly play mobile games. The goal was to assess the clarity and ease of use of the new in-ad shopping flow.
Scenario
You are playing a game and an ad for a pair of headphones appears. You are interested in them. Explore the ad to find out more information and begin the process of purchasing them.
Metrics to Track
- Task Success Rate: Were users able to successfully find product details and initiate checkout?
- Time on Task: How long did it take users to complete the flow?
- Satisfaction: A post-task questionnaire to gauge user satisfaction on a 5-point scale.
Success Criteria
The new design would be considered a success if at least 4 out of 5 users could complete the task without errors and rate the experience a 4 or higher for satisfaction.
The feedback was overwhelmingly positive. All five users completed the task successfully. The primary insight was a desire for even more product images, which we addressed by adding a swipeable image gallery in a later iteration.
User Feedback
“This was so much better than being kicked out to a website. I could see everything I needed right there and then get back to my game.”
“It felt safe and trustworthy because it was all part of the same window. I liked that I didn’t have to open a new browser.”
The Impact
We tested the new format for two months and the results were a clear success for users, advertisers, and the business, so we rolled it out to all users.
Constrains & Roadmap
Constraints & Trade-offs
- We de-prioritized some advanced features since we depended on other teams' expertise.
- One of the challenges for smaller advertisers was providing high quality images.
Future Roadmap
- Integrate more payment options to further streamline checkout.
- Enable advertisers to generate high-quality product images using AI.
- Explore interactive 3D models and AR try-on features within the ad unit.