Roblox
Building Roblox Studio Animation Tools that empower all creators to bring their imaginations to life with novel motion presets and delightful clip interactions.
Timeline
Role
Team
Tools/Skills
Summer 2025 (12 weeks)
Product Design Intern
1 Product Design Director
Figma, Interaction Design, User Testing, Animation Technolgoy
Summary and Impact
As a Product Design Intern on Roblox’s Engine team, I determined the user flow and designed two new features for Roblox Studio: animation presets and clips. These features aim to make animation more accessible and enjoyable for creators of all experience levels and fits into a larger high-profile, 0→1 initiative to revamp the current animation editor into a more robust and intuitive system.
02
Created a full preset-based animation workflow, introducing new drag-and-drop interaction patterns and a dedicated properties panel for presets.
03
Led user testing sessions with 3D artists to evaluate my workflows and authored a study plan approved by a UX researcher.
01
Designed core clip interactions, introducing new components in Roblox Studio for the animation editor timeline.
THE PROBLEM
Animation in Roblox today is nearly impossible for novice creators and too limited for advanced creators.
In 2025, animation became a major priority point for Roblox Studio. This meant revisiting an outdated system that needed both a functionality and visual revamp.
00 - BACKGROUND & CONTEXT
USER RESEARCH
Animation consistently ranks poorly compared to other creator jobs
Previous surveys on Roblox creators revealed that animation consistently ranked top three in the jobs that creators do not enjoy. And this is for multiple reasons—from not having the skills to animation's difficult tooling in Studio.
CONSEQUENCES
How does this effect our creators?
Decreased creation enjoyment
Having fun is the most important factor for creators when they build on Roblox.* However, the current animation tools is outdated and frustrating to use, making the creative process less fun and more tedious.
Slowed learning and growth
Isolated workflows creates friction for creators to build upon their past work and stifles creative momentum.
Reliance on external DCCs
Creators frequently turn to external tools and plugins to achieve the results they want—adding unnecessary complexity and slowing down their workflow.
THE OBJECTIVE
Animation in Roblox should be intuitive and comprehensive, empowering all creators to bring their imaginations to life.
With new animation features in development, design has the opportunity to elevate and enrich the creator experience.
01 - PROBLEM DEFINITION & BACKGROUND RESEARCH
STARTING POINT
Animation in Roblox today: scripts and keyframes
The current animation editor is limited to basic keyframing and avatar animation, making it difficult to bring game environments to life. Even simple animations require code to function within gameplay. Since many creators lack expertise in both scripting and animation, the process carries a steep learning curve.
UNDERSTAND
New animation foundations
To begin exploring the problem space, I focused on understanding the engineering and product effort driving this project. I set out to answer three key questions:
Why is animation for models possible now?
Animate Anything is allowing creators to animate all properties, not just avatar-specific ones.
Where are we currently in the overall process?
Very early. The animation designers are working on pitching feature concepts to executives, presenting the product roadmap for several features, and defining a net new animation editor (from color to function).
Where does design fit into this effort?
Design is establishing a new animation-specific design language, drawing from Foundations Design System and remaining open for new components. My project fits into v.2 of the animation editor.
RELEASE MILESTONES
Underlying architecture to support subsequent released. Includes compositing capability and a visual refresh of the animation editor.
v.1
Foundations
Sequence animation, audio, video, and code in a clip-based interface.
Presets make animation accessible to anyone.
v.2
Sequencing
Express more complex triggering through state machines, completely without code.
v.3
Expanded Sequencing
^ My project is here!
Competitive analysis on both 2D (Rive, Phase, etc.) and 3D (Unity, Maya, etc.) animation tools to understand existing tools and use cases
Workflow analysis of simple animations on Phase, Rive, and Unity to develop animation design taste
Ask product, animation, and engineering questions to align with product goals
EARLY RESEARCH PROCESS
Familiarizing myself with the world of animation
Coming into this project, I knew absolutely nothing about animation. To get up to speed, I watched a ton of YouTube tutorials, experimented hands-on with animation tools, and asked for clarification from others whenever I encountered confusing concepts.
TARGET USERS
Focus on 3D generalists, then animators
From user research, I learned that there are few creators who identify themselves as “animators”. Most creators are 3D generalists, often juggling multiple roles such as environment design, story writing, and simple scripting.
DESIGN PRINCIPLES
What principles will guide our decision making?
Created in alignment with my fellow animation designers to ensure the scope remains focused.
Pattern re-usage
Maintain consistency within different views in the animation editor, it should feel like one cohesive tool.
Multiple Entry Points
Accommodate for different creator workflows by offering multiple ways to access core functionality.
Novice-friendly first
Enable creators of all backgrounds to create animations for their gameplay.
Error correction
Animation tools should empower creators to experiment with confidence and backtrack whenever needed.
Encourage play
Presets make animation more approachable than any other engine or DCC. Highlight what creators love the most about Roblox Studio!
3D generalists
Familiar with environment and character design, but have limited experience with advanced animation techniques.
Goal: Easily create and customize animations to vivify gameplay without expensive expertise to get started.
Animators
Experts in animation and simple scripting, but have difficulty integrating animation into gameplay due to Studio’s limited functionality and isolated workflows.
Goal: Manage and sequence animation, audio, and video in one view with advanced clip controls to create nuanced animations.
What are animation presets?
Presets are customizable animation building blocks that can be applied to models, making animation accessible by simplifying complex concepts into easily adjustable parameters.
This would be the first 3D animation preset that responds dynamically to the game environment!
What are clips in animation?
Clips are a self-contained unit of data (animation, audio, video) that exist in a timeline. Clip-based editing gives creators an intuitive way to manage, sequence, edit, and repurpose data.
Roblox currently only supports keyframe animation, making a clip-based interface a completely new addition to animation in Roblox!
02 - DESIGN PROCESS
IDEATION - PRESETS
Rapid wireframing
The animation editor was going through some major changes throughout my internship—frequently changing toolbar items, buttons, and interaction patterns.
To stay focused on my features, I quickly wireframed multiple solutions, then checked their feasibility within the editor. When things are constantly changing, asking for permission can decelerate innovation and decision-making.
GOAL
Make animation for 3D feel as easy as 2D
From immersing myself in various animation tools, it was clear which tools were the most inviting and intuitive for novices like myself.
My key priority was to keep the feature approachable and lightweight.
ITERATION - PRESETS
Balancing discoverability, user comprehension, and affordances
After several rounds of ideation, I narrowed my options down to three potential layouts and weighed their pros and cons. At this stage, I also began considering how much emphasis the feature truly required and how it could integrate into the broader animation workflow.
Entire animation editor
1.0
Discoverability:
High
Comprehension:
Low
Novice experience prioritized
Easy to browse preset offerings
Unnecessary friction to access timeline for advanced creators
Unclear what happens after a preset is applied
Unclear if preset multi-selection is simultaneous or sequential
Modal
2.0
Discoverability:
High
Comprehension:
Medium
Novice experience prioritized
Connects presets to the timeline
Unclear where to add presets after modal is closed
Affordance mismatch
Unclear if preset multi-selection is simultaneous or sequential
3.0
Side Panel
Discoverability:
High
Comprehension:
High
Novice experience prioritized
Connects presets to the timeline
No multi-selection confusion
Separates presets from other clip types, creating an inconsistent one-off pattern
CHALLENGES
Expanding scope: designing within existing systems
The side panel layout was a favorite among a user flow critique with 3D artists, animators, technical artists, and fellow designers.
But to address the new issue... how exactly do presets fit into the larger animation workflow?
Presets are clips too—just like audio, video, and animation
Placing presets in a separate add panel isolates them from other clip types, making them feel disconnected from the rest of the editing workflow.
Unifying access without breaking existing patterns
We want a unified source for creators to access user-uploaded (Asset Manager) and marketplace (Toolbox) items. However, these assets already live in different established systems. How do I avoid redundancy?
ADD CLIPS PANEL DESIGN
Defining restrictions, then working within them
To avoid redundancy from Roblox Studio’s existing systems, I suggested a solution that would contain Roblox-provided items only, such as animation presets and Roblox-owned audio/video/animation clips. To access marketplace items, they would need to use the Toolbox. To access their own content or upload their own content, they would need to use the Asset Manager.
+
Asset Manager (user-uploaded items)
Toolbox (marketplace & Roblox items)
Add Clips Panel
=
PRESETS → CLIPS
What else can we do with clips to improve our animations?
I also reviewed my preset animation flow with a Senior 3D Art Manager, who encouraged me to consider the needs of creators seeking more granular control, such as advanced clip editing, blending options, and customizable presets.
CLIP PROPERTIES
Parameterized presets to fine-tune animations
Presets can be customized in the properties panel, with controls ranging from style to easing. Previously, the properties panel was limited to objects, but now, animation opens up local selection for clip properties.
Custom
0.5, 0, 1, 1.03
New linked fields
Custom Interpolation Graph Editor
Preset-specific properties
DESIGN & ITERATION - CLIPS
New UI and microinteractions
In my final six weeks, I focused on designing microinteractions for various clip behaviors in the timeline. Since clips were a brand-new feature in the animation editor, they demanded far more functionality than I had expected!
[ CLIP MOVE MODES ]
Push, trim, & blend UI
[ CLIP RESIZE MODES ]
Trim, repeat, & time stretch UI
[ ADDING CLIPS & TRACKS ]
Dragging clips from add panel into timeline
Double-click to add clips into timeline
[ POST EXTRAPOLATION ]
Transition & crossfade
[ MOVEMENT IN TIMELINE ]
Snap to track
Mismatch clip/track type
Clip & track reordering
New clip & track insertion
[ SELECTION IN TIMELINE ]
Drag to multi-select
Clip selection UI
Primary & secondary timeline selection behavior
Track hover
Presets User Story:
As a creator, I want to bring my gameplay to life without needing to know deep technical knowledge to get started.
Clips User Story:
As a creator, I want intuitive tools to fine-tune my animations and easily integrate them within the context of gameplay.
03 - DESIGN VALIDATION
USER TESTING
Feedback from 3D, animation, and engineering
One of my goals for the summer was to create a research plan and conduct user testing. With the help of a Principal UX Researcher, I had a study plan I authored be reviewed and approved. In my final week, I tested my new preset animation flow alongside six additional flows covering each clip mode, then led affinity diagramming with animation design team.
USER TESTING HIGHLIGHTS
Kind words from testing!
Overall, testing feedback was very positive. Users appreciated the attention to detail in the microinteractions, noting that these touches were essential to the workflow and made the experience more enjoyable.
04 - FINAL DESIGNS
CLIP DESIGNS
Preset clips
New tooltips, selection behavior, and defined clip modes to fine tune presets. View Clip Move Modes here!
Float
Float
03:30
Float
default
selected
on_drag
repeat
trim
time stretch
Float
06:30
2.0
Float
05:00
-02:00
Float
07:30
85%
[ CLIP RESIZE MODES ]
PRESETS FLOW
Simple object animation using presets
No more humanoid transformation or tedious keyframing—creators can now create their desired movement with adjustable and stackable presets. View the flow here!
[ ADD CLIPS: ANIMATION ]
Import assets through Asset Manager
[ ADD CLIPS: AUDIO ]
Roblox-owned music & sound effects
Roblox-owned video
[ ADD CLIPS: VIDEO ]
05 - REFLECTION
This summer, I led the realization of a v.2 release for Roblox’s high-priority animation editor revamp.
Taking it from this (May 30, 2025 - Animation Concept Review):
To this (August 15, 2025 - Intern Presentation):
Designing for tooling... challenging yet so satisfying!
It’s hands-down my favorite space in tech to design for. This is where I see the greatest opportunity to fulfill my goals as a designer: to allow human potential to be embraced, nurtured, then fully expressed.
LEARNINGS
A summer of growth, discovery, and a newfound love for the West Coast 🖤
Summer 2025 will always be one of the most fulfilling chapters in my life. It was my first time living completely on the other side of the country from my family, and I grew tremendously—both personally and as a designer—while learning from some of the best in the field.
[ 01 ]
Dig deeper
Don’t dismiss ideas on just one pass. By reframing and pushing explorations, ideas that once seemed completely unworkable or almost there can evolve into the best solution (source: presets side panel :p).
[ 02 ]
Don’t shy away from visibility. Create space for guidance
A lack of communication doesn’t necessarily signal you don’t need help. It’s professional courtesy to not only ask for help when its needed, but also communicate your wins and progress along the way. Use updates as invitations for feedback and collaboration.
[ 03 ]
True it up
A picture prototype is worth a thousand words. Bring your ideas to life through mockups and making them interactive whenever possible leads to more actionable and focused feedback!
golden-gate-bridge
sf-giants-game
intern-friends