SundaySky · UX/UI Design Lead

Custom scene

From template to total freedom: start from blank.

Editor SaaS Core feature User testing Jan – June 2025
The studio with a blank custom scene open: a placeholder library popover offering Heading, Sub heading, Media, Button and Logo, and the scene lineup along the bottom.
35%Account adoption
15.8%Visitor adoption
6Competitors benchmarked
23FullStory sessions reviewed

Pendo usage data · last 90 days · external users

Goal

Empower users to create fully customized video scenes directly in the platform without relying on external tools, while preserving brand consistency and simplifying workflows.

The challenge

Marketers and creative managers felt constrained by rigid templates and workarounds. They needed a more flexible creation experience that still aligned with brand guidelines.

My role
UX/UI Design Lead
Team
PMs, Engineers, QA, Copywriters, CS
Tools
Figma, FullStory, Pendo, Jira
Timeline
Jan – June 2025
Process
Discovery → Design → Develop → Analyse
Link
SundaySky Help Center

Discovery

4 inputs

01. Target user · marketer

Moves fast, and keeps hitting the edges of the template.

Goal

Build fast, simple, fully customized and personalized video while maintaining brand consistency.

Pain points

The templates are too restrictive and difficult to match with brand guidelines.

Tools

  • Canva
  • Adobe suite
  • Asana
  • Google suite
  • Pitch

Needs

Flexibility, control, freedom.

Portrait of the marketer persona.
I need to move fast, sometimes templates don't cut it. I want to build my own scene and get it out the door.

User panel · UX researcher · 4 participants (2022)

02. Behavioural observation · FullStory

Workarounds with overlays revealed the need for native, intuitive customization.

Before Custom Scene, overlays let users bypass template limits by combining media and text flexibly. They adjusted placement, opacity and layering for better readability: showing the need for native, intuitive customization to improve the experience and cut workaround use.

Session recordings showing users stacking overlays to work around template limits.

FullStory analysis · 23 sessions

03. Benchmark & inspiration

Benchmarking revealed the core features users expect: alignment, layering and asset libraries.

To refine the Custom Scene experience, I reviewed existing scene-editing patterns and common user workarounds to extract actionable insights for native implementation. I examined how other tools handle stacking elements, asset libraries, layering, hidden elements and alignment. This benchmark defined the essential controls for a smoother, more intuitive editing flow.

  • Canva
  • Powtoon
  • Pitch
  • Synthesia
  • Bitable
  • Google Slides

What I examined in each

  • Stacking elements
  • Asset libraries
  • Layering
  • Hidden elements
  • Alignment

Internal benchmark review · 6 competitors

04. Feature analytics · Pendo

3-dot menu data informed the shift to a dedicated scene action toolbar.

Click analysis confirmed the 3-dot menu was heavily used, but overloading it risked poor discoverability. This insight led us to introduce a new scene action toolbar, alongside the move to a popover library: see the design decisions below. User interviews then guided which actions stayed in the menu and which moved out.

The 3-dot scene menu open in the studio, beside a Pendo panel ranking all nine menu items by number of clicks. Counts obscured: client data.

Pendo click analysis · user interviews

What discovery told us

  • Users expect Canva-like familiarity.
  • They need fast, flexible, on-brand creation.
  • Overlays exposed the missing customization.
  • Benchmarks pointed to alignment, layering and libraries.
  • The 3-dot menu was the main entry point.

What made it hard

  • A new interaction model and asset libraries had to be invented for custom scenes.
  • Animations were optimized for templates, not for custom scenes.
  • The studio had limited support for responsive scene design.
  • No drag and drop, due to technical limitations.

Design

5 decisions

Main user flow

Four steps from empty canvas to a finished scene.

Flow: select custom scene, add placeholder, position and scale, duplicate or delete. Animation of a custom scene being built: adding a placeholder, positioning it and scaling it.

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.
Design system sheet: components, buttons, notifications, icons, labels, typography and colours.

Solutions

Step 01. Add custom scene button

Decision: button over thumbnail

The “Blank Canvas” was added as a button, not a thumbnail, to avoid overpromoting a layout not optimized for animation, and to preserve the structure of the scene library.

The Create scene dialog: the scene library fills the right, with the Custom scene button in the left sidebar beneath Your scenes, Scene Library and AI Generator.

Step 02. Add placeholder

Decision: popover over left panel

Since the placeholder library applies only to custom scenes, a left panel would create inconsistency across layouts. To keep UI access consistent I introduced a popover panel, and moved actions out of the scene option menu.

An empty custom scene with Add placeholder on the canvas, and the placeholder panel open at right offering Heading, Sub heading, Footnote, Media and Logo.

Step 03. Control size, position and placeholders

Decision: flexible placeholder frames

I added customizable frames with key actions: order, duplicate, delete. This let users move and stack elements easily while controls stayed accessible, making Custom Scene feel like the design tools they already knew.

A heading placeholder selected in the scene, with its toolbar showing type, size, alignment and visibility controls. A media placeholder selected in the same scene, with its own toolbar of frame, fit, alignment and audio controls.

Step 04. Interact within the canvas

Decision: larger, responsive studio layout

The studio was redesigned to enlarge the canvas for better alignment and responsiveness, while scene thumbnails and components were updated to match the design system.

Redesigned studio layout with an enlarged canvas and updated scene thumbnails.

Step 05. Align elements using guidelines

Decision: prioritized core guides

We delivered safe-area and frame alignment, centre lines and snap guides. Advanced features such as padding indicators and multi-element alignment were left for future iterations.

Alignment guides visible while a text placeholder is dragged over another, showing safe-area edges and centre lines.

Analyse

3 measures

01. Adoption & usage · Pendo

Strong adoption at launch, but it slowed where features were missing.

Adoption peaked shortly after release, showing strong initial interest. Usage then slowed over time due to missing capabilities: later confirmed through feedback and testing.

35%Account adoption
15.8%Visitor adoption

Pendo usage data · last 90 days · external users

02. Journeys & continuation · Pendo

Users naturally continue building after creating a custom scene.

Path analysis shows that creating a custom scene is not a stopping point. Most users immediately add placeholders, validating that the entry flow is intuitive and supports natural continuation.

Pendo path analytics · last 90 days · external users

03. Usability testing & feedback · FullStory and user testing

Users hit friction when editing and adding elements inside custom scenes.

We ran moderated usability tests on Flexible Scene with internal and external users. Findings showed similar behaviours and missing features affecting both Flexible and Custom Scene.

Bottom line. Custom Scene offers intuitive entry and strong flexibility. Usability tests still showed clear gaps in alignment visibility, advanced editing controls and placeholder variety, which need addressing for smoother workflows.

Usability findings grouped by the friction encountered when editing and adding elements.

Usability testing · 6 users · interactive prototype

Insights & next steps

Custom Scene quickly proved itself an essential and intuitive feature, giving users the flexibility they were looking for. Building on that, there are clear opportunities to strengthen it: better alignment tools, layer management, a wider placeholder set, and faster editing through multi-select and shortcuts. Together these would take Custom Scene from flexible to genuinely efficient.

Template prototype. Every word, number, source line and image here is from your existing page: nothing invented. Changes I made: the Analyse steps were numbered 1, 2, 4 and are now 1–3; “Analyze” is now “Analyse” to match your process line; and the 35% / 15.8% figures, which were buried at the bottom, also appear at the top.