SundaySky · UX/UI Design Lead
Custom scene
From template to total freedom: start from blank.
Pendo, first 90 days · FullStory, 23 sessions
Goal
Let marketers build their own scenes inside the platform, instead of hacking templates or leaving for other tools.
The challenge
Give them freedom without scenes that look or animate worse than our designed templates.
Discovery
3 findings01. Inspiration & benchmark
Users expect Canva-like editing: alignment, layering and asset libraries.
Not a competitor review: I looked at how six editors handle stacking elements, asset libraries, layering, hidden elements and alignment, to borrow patterns users already know.
Internal review · 6 editors
02. Behavioural observation · FullStory
Only 4 of 23 used overlays as intended. The rest hacked them into whole scenes.
Overlays were meant for text over media. Users bent them into custom scenes instead, and some duplicated scenes just to align elements. That behaviour, not a feature request, made the case for a real blank canvas.
FullStory analysis · 23 sessions
03. Scene actions · Pendo
The 3-dot menu was the main entry point, so its key actions moved onto the canvas.
Click data showed what users reached for most. Those actions left the menu for a new scene toolbar, which later hosted the placeholder popover.
Pendo click analysis · user interviews
Design
4 decisionsMain user flow
Four steps from empty canvas to a finished scene. Each one needed a decision.
- 01Add a custom scene
- 02Add a placeholder
- 03Position and scale
- 04Refine
- ✓Scene ready
Decision 01 · Add a custom scene
A sidebar button, as a compromise
How do we make it visible without restructuring the library or over-promoting a layout not built for animation? Product wanted it below the fold, a fair worry about quality. I pushed back: it hid what users came for. The sidebar button was our compromise.
Decision 02 · Add a placeholder
A popover, not a left panel
A left library would match our other libraries, but placeholders only apply to custom scenes, so the panel would either vanish or sit disabled. A popover from the new scene toolbar appears only when it’s relevant.
Decision 03 · Position and scale
More canvas, less chrome
For the first time, canvas space mattered: users had to align, see guides and zoom. I cut every unnecessary gap: a shorter scene lineup, a shorter voice-over field and tighter margins.
Decision 04 · Refine
A drag frame and dual-colour guides
Live rendering made dragging lag. Users drag a light frame that snaps to guides, and the scene renders once on drop. Guides are drawn in dark and light blue, so they stay visible on any media.
Design system
Built inside SundaySky's design system, extending it only where the feature demanded it.
- Worked within SundaySky's design system (MUI).
- Added new components: flexible placeholders.
- Added a Popper / Popover component.
- Updated components still using the old system.
Testing the concept · 4 studio users
What we learned, and what we changed.
Guides hard to seeDual-colour guides
Dragging felt slowDrag a frame, render on drop
Nobody pressed previewAssumption revised
Internal test · pre-release
Analyse
5 findings01. Adoption · Pendo
Account adoption grew from 20% in week 2 to 35% by day 90.
Teams that tried it kept using it. Visitor adoption grew more slowly, so it spread within teams more than to each person.
| Checkpoint | Accounts | Visitors |
|---|---|---|
| Week 2 | 20.3% | 9.1% |
| Month 3 | 25.6% | 13.3% |
| Day 90 | 35.0% | 15.8% |
Pendo · exposure wasn’t uniform from day one, so the slope is approximate
02. Usage · Pendo
Creating a scene isn’t a stopping point: users go straight to adding placeholders, mostly media.
After creating a scene, users went to
“Open the placeholder library” events, not confirmed insertions.
Top placeholders added
Pendo path and placeholder events · last 90 days
03. Usability testing · Flexible Scene
A related feature, tested with 9 users, showed the same gaps.
- Multi-select
- Layer panel
- Copy / paste between scenes
- Guides hard to notice
- Font size tied to the box
Fixed in phase 2
Usability testing · 3 internal + 6 external participants
04. What I’d measure today
Three of six goals weren’t tracked. Next time they ship with the feature.
RetentionAdopting accounts still active at 30 / 90 days
UsefulnessPublished videos with at least one custom scene
CompletionCustom scenes published vs. abandoned
05. What users told us
Used in most videos, often several per video.
Reported by a colleague about a year after launch: anecdotal, with no instrumented data behind it. Pendo feedback pointed to what came next:
“Need a way to align multiple items in space evenly.”
“Multi-select for bulk placeholder actions, like I can do in PowerPoint.”
No CTA button option, so the workaround was going back to a template.
Pendo feedback · anonymised
Lessons & next steps
The biggest lesson: user behaviour got this built. People hacking overlays into whole scenes was the argument, and it became an internal case for listening to users directly. Feedback then shaped phase 2: multi-select, layer management, bullet and CTA placeholders, and copy/paste between scenes.