Careem opera - Designing the System Behind Careem's Campaign Automation
Design Systems
.
Cross-functional Collaboration
.
3 Months
My role
Audited all campaign assets across the Careem app.
Defined guidelines in collaboration with engineering, marketing, and visual designers
Designed workflows for marketing teams, copywriters, and visual designers to collaborate on Opera seamlessly
Collaborated with
Design Engineers
Marketing team
Visual designers
Copy writers
About Careem
Careem is the Middle East's leading super app, operating across 8 verticals — Rides, Food, Quik, Pay, Electronics, Home Services, Shops, and Car Rentals. With millions of users across 10+ markets, Careem runs hundreds of campaigns simultaneously to drive growth across every vertical.
Problem statement
Campaign delays were costing Careem time and money — and the bottleneck was key visual adaption for different touchpoints.
At Careem, campaigns and ads are a major source of revenue. Once a KV was approved, adapting it across 40+ touchpoints was handed off to external vendors — purely mechanical work that required no creative thinking, yet caused significant delays in campaigns going live.
Designer creates one Key Visual per campaign
External vendor adapts it across 40+ touchpoints manually
Solution summary
To eliminate vendor dependency and reduce campaign delays, we built Opera — an internal Figma plugin that automatically adapts any approved KV across all required asset sizes. What used to take external vendors days now takes seconds.
😓
Before Opera
Key visual approved
Sent to external vendor
Wait days for delivery
Receive adapted assets
🚀
After Opera
Key visual approved
Run Opera in Figma
All assets generated in seconds
Auditing Assets to Find Inconsistencies
Before Opera could automate adaptations, the assets needed to be consistent. I audited every campaign asset type across the app and found significant inconsistencies in how offer bubbles, tags, timers, and font sizes were being used across verticals.
CTA Placement issues
Padding issues on carousels
Safe zone issues
No consistent use of offer bubbles
Building Scalable Components for Opera
I collaborated with the marketing team and visual designers to define guidelines across all campaign assets — covering font sizes, padding, colours, and offer bubble usage. This gave Opera a consistent foundation to build on.
Character limits, font sizes and safe zones defined
logo placement, offer bubble position and character limits set
partner logo guidelines, vertical branding and safe zones
font sizes, offer callout limits and discount tag rules defined
Integrating the Component library to Opera
Once the components and guidelines were set, we integrated the library with Opera — so every adaptation automatically applied defined character limits, font sizes, safe zones, and offer bubble rules.
🫢
Opera in action — book a call to see the full demo
Impact
Opera rebuilt Careem's campaign production pipeline — eliminating vendor dependency and putting creative control back in the hands of the team.
🚀 Vendor dependency eliminated — adaptations no longer outsourced, saving cost on every campaign
⚡ 1–2 hours of adaptation work removed per campaign, freeing designers for creative work
🌍 Multilingual support — assets generated in Arabic, French, and more with no additional effort
✅ Zero inconsistency across assets — character limits, font sizes, safe zones enforced automatically
Some KVs I worked on
Campaign visuals art directed and shipped for Careem — subjects generated with AI, composited and refined in Figma.
