Snaps to dual-color guides, no rendering
Content renders once, in place
Custom Scene
From rigid templates to a blank canvas
SundaySky | Senior UX/UI Designer Project
Role: Lead UX/UI Designer for AI & Creative Tools
The company
SundaySky is a B2B SaaS video creation platform that empowers businesses to build scalable, personalized, and on-brand video content—no advanced editing skills required.
Context
Role and team
My role
UX/UI Design
Discovery > Delivery
Team
PMs, Engineers, QA,
Copywriters, CS
Tools
Figma, FullStory,
Pendo, Jira
Timeline
Q1 2025
01Discover02Design03Develop04Analyze
Context
Why only now
Why not before
- Originally an Internal tool, with workarounds in After Effects
- Templates optimized for animation and performance
- Technical limits unknown
- Risk: a blank canvas could look less polished than a designed template
What changed
- Internal tool
- Self service pivot
- Personalise ≠ demand 32% used it
- One stop shop strategy
Context
Freedom vs. polish
Today, every scene is a template.
Marketers wanted
Freedom
Move, delete, add. Start from blank.
vs.
Product feared
Worse-looking scenes
Less polished, weaker animation.
Our approach!Engineering constraint. Custom scenes ran only on the most popular animation themes, so the flow checks the theme first.
Freedom within smart limits
PlaceholdersBrand kitSafe areaGuides
Context
The feature
Context
Goals & success metrics
MeasuredNot measured yet
Business goals
Adoption% of accounts / users who create a custom scenePendo
Retention% of adopting accounts still using it after 30/90 daysPendo
Usefulness% of published videos with at least one custom sceneProduct data
UX Goals
Activation% of users who add a first placeholder after creating a scenePendo
UsabilityUsers can add, move, resize and layer placeholders without helpUsability, FullStory
Completion% of custom scenes that get published vs. abandonedProduct data
Discovery
Discovery
Prior Research
InsightUsers wanted to move, delete and add, not just fill in templates.
“Well, but you know, it'll be nice if I can just delete whatever is there.”
Krista, Marketing contributor
“I wish the text area on the template could be either movable or I could put a text area where I want it.”
Gigi, Marketing contributor
“I want to change them [the scenes] a lot and I don't have the flexibility to do so.”
Genesis, Marketing Manager
“In a perfect world, I would have just been able to add an additional bullet point on a free template.”
Deborah, Marketing Manager
User Interviews, May 2022
Discovery
Benchmark & Inspiration
Goal
Explore best practices for flexible scene editing
Explored
- Stacking elements
- Asset library structure
- Layering behavior
- Hidden/covered elements
- Alignment tools
Internal benchmark review | 6 competitors
Discovery
Behavioral observation
Goal
Learn about users interaction with media and text overlay (over media)
Found
- 4 of 23 used overlays as intended, everyone else repurposed one as their whole scene.
- No one kept the default position.
- Some duplicated scenes just to align elements.
FullStory Analysis | 23 sessions
Discovery
Scene actions analysis
Goal
Identify high-use UI entry points
Found
- Option menu used most
- Icons were understood, so they were candidates to surface on the main screen.
Pendo click analysis + user interviews · workflow study, 7 participants
Discovery
Discovery insights
01
Familiar
Users expect Canva-like familiarity.
So we used familiar patterns: drag, resize, layers
02
Customized
19 of 23 used overlays to build a whole scene
So we gave them a real blank canvas
03
Efficient
The 3-dot menu was the main entry point
So we surfaced its key actions on the canvas
04
Polished by default
Freedom shouldn't mean worse-looking scenes
So we added placeholders, a safe area and guides
Discovery
Assumptions going in
What we bet on before shipping, and what the data said back.
✓ Validated
Users need a responsive canvas
Not just freedom to build: users needed to zoom and drag smoothly. This pulled the project into performance and cleanup work.
✓ Validated
Surface the most-used actions
The scene’s 3-dot menu was the most-used entry point, so its key actions moved onto the canvas.
↻ Revised
Users would preview after building
We expected users to hit play to see the animation. They almost never did.
? Unconfirmed
Users confuse custom and template scenes
We added a visual indicator. The data never confirmed it was needed.
Design
Design
Main user flow
Four steps from empty canvas to a finished scene. Each one is a design decision that follows.
- 01Add a custom sceneTheme check first
- 02Add a placeholderPopover or empty state
- 03Position and scaleDrag frame, dual-color guides
- 04RefineLayer, duplicate, delete
- ✓Scene ready
Design
Feature scope
Core
The feature itself
- Custom scene button
- Blank canvas
- Placeholder library
- Add, move, resize and layer placeholders
Along the way
Had to be addressed
- Scene action toolbar
- Canvas responsiveness and browser zoom fix
- Alignment guides and safe area
- New Popover component
- Custom vs. template scene indicator
- Animations built for templates, not custom scenes
Phase 2
Scoped out to ship v1 faster
- Multi-select
- Layer management
- Bullet and CTA placeholders
- Copy/paste between scenes
- Entry-timing animation
Solution 01
Add custom scene button
How do we make it visible, without restructuring the library or over-promoting it?!Collaboration. Product asked for Option 3. I pushed back: it hid what users wanted. Option 4 was our compromise.
+
+
+ Custom scene
Solution 02
Placeholder library
A left library is consistent, but it’s only relevant on custom scenes. Where should it live?
Only on custom scenes
+ Add placeholder
Disabled on template scenes
+ Add placeholder
Solution 03
Canvas real estate
For the first time, canvas space was critical. Where do we find room?!Why it mattered. An unavoidable side project: without it, users couldn’t align, see the guides or zoom.
- Shorter scene lineup
- Shorter voice-over field
- Tighter top and bottom margins
+ Add placeholder
+ Add placeholder
Space removedCanvas
Solution 04
Drag without lag
Live rendering made dragging lag. How do we make placing feel instant?!With R&D. We explored drag-and-drop limits together and mapped effort vs. complexity to pick this workaround.
Design
Design system
- SSKY design system is based on Material UI (MUI)
- Ongoing addition of components (Example: new components (flexible placeholders)
- Added a Popper/Popover component
- Updated component using the old system
Testing
Testing the concept
4 studio users built a 4-scene video.
What we learned → what we changed!Also hard: aligning elements. Worked: reordering forward/backward, and the outline on a hidden element helped.
Guides hard to see→Dual-color guides
Dragging felt slow→Drag a frame, render on drop
Nobody pressed preview→Assumption revised
Real session: a participant aligning elements with the new guides
Internal test · 4 participants, pre-release
Design
Final solution
Analyze
Analyze
Adoption
35%
of accounts used Custom Scene by day 90, up from 20.3% in week 2.
What it means
Teams that tried it kept using it: account adoption nearly doubled. Visitor adoption grew more slowly, so the feature holds teams better than it pulls in new individual users.
0%
10%
20%
30%
40%
Week 2
Month 3
Day 90
| Checkpoint | Accounts | Visitors |
|---|---|---|
| Week 2 | 20.3% | 9.1% |
| Month 3 | 25.6% | 13.3% |
| Day 90 | 35.0% | 15.8% |
Pendo · caveat: exposure wasn’t uniform from day one, so the slope is approximate
Analyze
Usage patterns
After creating a scene, users went to
45%Empty-state button13%Toolbar42%Other actions
Creating a scene isn’t a stopping point: users move straight into adding placeholders.
These are “open the placeholder library” events, not confirmed insertions.
Top placeholders added · last 90 days
Media45.9%
Sub heading20.5%
Heading19.4%
Logo10.3%
Footnote3.8%
Media and text dominate. Advanced elements were rarely added, matching feedback about missing buttons and bullets.
Pendo · data path and placeholder events
Analyze
Usability testing · Flexible Scene
A related feature, tested with 9 users: the same gaps.!What worked: adding scenes and placeholders felt easy, resizing was easy to control, users could tell custom scenes from templates, and z-ordering was clear.
Top gaps
Multi-selectLayer panelCopy / pasteGuides hard to noticeFont size tied to box
Fixed in phase 2
Usability testing · 3 internal + 6 external participants
Analyze
What I’d measure today
MetricThe question it answersHow I’d instrument it
RetentionDo teams keep using it after the first try?Pendo cohort: adopting accounts still active at 30 / 90 days
UsefulnessDoes it end up in real, published videos?% of published videos with at least one custom scene
CompletionDo started scenes get finished?Custom scenes published vs. abandoned or deleted
ActivationDid users actually place something?A “placeholder added” event, not just “library opened”
I’d set these events up with engineering before kick-off, alongside the adoption dashboard.
Open circles match the “Not measured yet” metrics on the goals slide
Analyze
What users told us
Signal of use
Used in most videos, often several per video.
Reported by a colleague about a year after launch. Anecdotal: no instrumented data confirms it.
Pendo feedback
“Need a way to align multiple items in space evenly.”
#501070
Layers buried behind others are hard to find.
#493039
No CTA button option, so the workaround was going back to a template.
#484982
“Multi-select for bulk placeholder actions, like I can do in PowerPoint.”
#495021
Phase 2 · shipped next
Multi-selectEntry-timing animationBullet & CTA placeholdersCopy/paste between scenesLayer managementPhased delivery: v1 shipped value fast, feedback shaped phase 2 (reported secondhand, ~6 months after launch)
Reflection
Lessons learned
The bigger lesson
User behavior got this built: people hacking overlays into whole scenes.
19 of 23 users bent overlays into full scenes. That behavior, not a feature request, was the argument, and it became an internal case for listening to users directly.
Earn trust with smart limits and compromise
Smart limits made freedom safe for Product. The sidebar button balanced their risk with users’ need to find it.
Design for reuse
Placeholders and the popover went into the design system, so phase 2 could build on them.
Thank you
Questions are welcome.
Aviv Etgar · UI/UX Designer