ghaida zahran

Improving Roblox Moments adoption

Capture was hard to find, so I led design on new capture controls, and they shipped.

role
Design Lead
company
Roblox

Finding capture was one of the biggest barriers to Moments adoption

We learned it in the initial launch of Moments, where 800 TestPilots helped us stress test the experience. Screen capture is a critical step in Moments creation.

We mapped the steps from playing an experience to posting a Moment

Most of the steps needed more awareness, less friction, or both.

  1. Play an experience where Moments are enabled (awareness)
  2. Consume Moments (awareness)
  3. Enable captures (awareness, reduce friction)
  4. Capture a video (reduce friction)
  5. Create a Moment (awareness, reduce friction)
  6. Give the developer permission to access the gallery (reduce friction)
  7. Edit and post a Moment

Users thought the video capture icon was a coffee cup

A phone in landscape playing a Sonic experience on Roblox, with the photo and video capture buttons on the right edge. The video button, a bracketed camera, is circled in red, with a callout that reads 'Current video capture icon'.
The video capture icon at the time, circled

Capture buttons elsewhere are abstract

The figurative approach was inconsistent with what users expect. We audited a variety of capture tool UIs as well as mobile camera app UIs, and a more abstract, modern treatment is the established visual language for capture buttons.

Screenshots of the capture controls in NVIDIA GeForce Experience, Xbox Game Bar, a Nintendo Switch controller's capture button, and AMD Radeon ReLive.
Capture tools: NVIDIA GeForce Experience, Xbox Game Bar, Nintendo Switch and AMD Radeon ReLive
A row of mobile camera screens from apps including Instagram, WhatsApp, Messenger, Pinterest, Snapchat, Behance, ChatGPT, TikTok, Zepeto, Microsoft Copilot and Google Gemini, each with a round capture button.
Mobile camera apps
Capture screens from PlayStation 5, Windows 11 and Xbox.
PlayStation 5, Windows 11 and Xbox
1 / 3

New capture buttons

We explored abstract buttons for photo and video, and how they look while recording and once a video is saved.

A phone in landscape in a city racing experience, with the first exploration of the capture buttons on its right edge.
Icons, exploration 01
The second exploration of the capture buttons on the right edge.
Icons, exploration 02
The third exploration of the capture buttons on the right edge.
Icons, exploration 03
The fourth exploration of the capture buttons on the right edge.
Icons, exploration 04
The fifth exploration: a white photo button over a red record button on the right edge.
Icons, exploration 05
Recording: the record button has become a red ring with a timer under it.
Recording
A banner at the top right reads 'Video saved to your gallery.'
Video saved to your gallery
1 / 7

Where the buttons sit

We tried the buttons along the right edge and along the bottom, in landscape and portrait, and designed a way to drag them to other areas of the screen, with a tip that says so.

A phone in landscape with the capture buttons side by side at the bottom middle.
Landscape, along the bottom
A phone in portrait with the capture buttons stacked on the right edge.
Portrait, on the right
A phone in portrait with the capture buttons side by side at the bottom.
Portrait, along the bottom
A tip beside the capture buttons reads 'You can drag these controls to other areas of your screen.'
The tip: you can drag these controls to other areas of your screen
The capture buttons moved to the top of the screen, side by side.
A new position
While the buttons are dragged, the screen dims and shows places to drop them, with 'Drag here to dismiss' in the middle.
Drag here to dismiss
1 / 6

Teaching capture

We designed a tip for the first time the buttons appear, empty states for the gallery, and an upsell for players who had taken photos but never recorded. Holding the record button saves the last 30 seconds, and leaving an experience offers its highlights to share.

A tip beside the capture buttons reads 'Share your highlights by capturing videos up to 30 seconds!'
The first time: share your highlights by capturing videos up to 30 seconds!
The gallery, empty: 'Photos and videos. Capture your first moment and share with others.'
An empty gallery: capture your first moment and share with others
The empty gallery with capture turned off, and a 'Turn on captures' button.
An empty gallery with capture turned off
A banner at the top of the gallery reads 'You can now record your experiences and see your captured videos here.'
For players with photos who hadn’t recorded: you can now record your experiences and see your captured videos here
A tip beside the record button reads 'Hold down the recording button to capture the last 30 seconds.'
Hold down the recording button to capture the last 30 seconds
The record button held down, with a 'Long-Press' label beside it.
Long-press
The leave screen: 'Are you sure you want to leave the experience?' with Leave, Change servers and Don't leave, and under it 'Share your captured highlights' with a row of clips.
Leaving: share your captured highlights
1 / 7

When capture is off

Both photo capture and video recording can be disabled when there’s a constraint, so we designed a turned-off look for the buttons, and a popover that gives the reason.

The capture buttons dimmed to show they're turned off.
Recording disabled
A popover beside the dimmed buttons reads 'Recording is temporarily turned off for experience-initiated capture.'
Recording is temporarily turned off for experience-initiated capture
1 / 2