UI/UX Case Study

Redesigning Clip-It for Young Creators

Redesigning Clip-It for Young Creators

Transforming a popular Roblox video creation tool to improve
usability, reduce drop-offs, and enhance the creative experience for
its primarily young audience.

Transforming a popular Roblox video creation tool to improve
usability, reduce drop-offs, and enhance the creative experience for its primarily young audience.

Neura Studios

8M+ Monthly Users

Project Overview

My Role

UI/UX Designer

Timeline

6 months (Jan - Jun 2025)

Team

Developers, Product Manager, UI/UX Designers

Tools Used

Figma

Miro

Discord

Project Overview

Clip-It is a popular social video creation experience on the Roblox platform with over 8 million monthly active users. The experience allows players to create, edit, and share short video clips of their in-game avatars, similar to TikTok but within the Roblox ecosystem.

I collaborated with Neura Studios, a small U.S.-based Roblox development studio, to improve the user experience of their video recording and editing interface. The project focused on identifying and addressing usability issues that were causing user drop-offs during the video creation process, with the primary goal of increasing engagement.

8M+

Monthly Active Users

42%

Editor Abandonment Rate

6

Month Project Timeline

Understanding Roblox Experiences

Roblox is a multiplatform game that consists of multiple game modes called "experiences." Developers of these experiences, like Neura Studios, earn money through in-game monetization within their experiences.

Clip-It is one such experience that recreates a social media platform within Roblox itself. Users record clips of their in-game avatars, edit these clips in Clip-It's own video editor, and then publish them for other users to see and interact with.

Target Audience

Understanding Clip-It's unique user demographics was crucial for designing an interface that would meet their specific needs and abilities. In this specific case, the target audience was primarily adolescents aged 9-12 years old. This led to some unique design challenges that I have not dealt with before:

Articulation Difficulties

Young users often struggle to articulate their thoughts and feedback about interfaces.

Research Challenges

Difficult demographic to reach for user research due to ethical considerations and access limitations.

Cognitive Development

Varying levels of cognitive development affecting understanding of complex interfaces.

Motor Skills

Still-developing fine motor skills requiring simpler and easier to understand interactions.

Project Goals

Despite Clip-It's popularity, Neura Studios was facing a significant challenge: a high abandonment rate in the video editor. Users would start creating videos but frequently abandon the process before publishing. This represented a major friction point in the user journey and limited the platform's growth potential.

The project initially began with a broad focus on overall UX gains, but through discussions with the client during our weekly meetings, we agreed to focus specifically on the recording and clip editor page, which was already a priority area for Neura Studios. The following goals were set:

Increase Engagement

Primary goal was to increase overall user engagement with the platform.

Primary goal was to increase overall user engagement with the platform.

Implement UI for Animation Support

Implement user interface for creating and editing animation keyframes.

Age-Appropriate Design

Create an interface suitable for the primary 9-12 year old demographic.

Improve the Clip Quality or Creative Depth of Clips

Improve technical clarity and the expressive, creative potential of clips.

Research & Discovery

To understand the problems users were facing, I conducted a comprehensive research phase using multiple methodologies to gather both quantitative and qualitative data, while being mindful of the challenges in researching with a young target audience.

Research Methods

Heuristic evaluation of various parts of the interface

Identifying usability issues through expert review

Limited scope qualitative think-alouds with representative users

Gaining insights from real-time user interactions

Competitor analysis of similar video editing tools

Benchmarking industry standards and features

Weekly meetings with CEO-Developer and designer

Aligning on goals through cross-functional syncs

Explorative low-fidelity prototyping

Sketching early concepts to test design ideas

The picture above shows a visual example of a heuristic evaluation conducted using Jakob’s Ten Usability Heuristics. The number on the left represents a scenario within the app that was tested. In this example, issues related to “Recording a Clip” were identified, along with comments and suggested solutions. In total, 13 scenarios were tested, which eventually made the board look like the picture below. While you can’t really see the details, I included it here just to illustrate the amount of data that can be gathered through the Heuristic Evaluation method!

The issue of finding test subjects…

In addition to these methods, usability tests were also conducted using the Think-Aloud method on the old UI of the Clip-it experience. The goal was to carry out these tests with kids, but as mentioned earlier, that age group is difficult to reach and often hard to fully understand due to articulation challenges. For example, one child I interviewed said that “everything was good,” even though I could clearly see them struggling to complete a task. Because of this, we decided to include some adult participants as well. While they weren’t the target audience, their insights still turned out to be valuable.

Competitor Analysis and Understanding the Target Audience

A common phrase that many designers should keep in mind is that you don’t always need to “reinvent the wheel”. In this project, we were working on a social media platform where users can edit their clips. There are already plenty of strong references to learn from in this space, TikTok, CapCut, Instagram, InShot, and even Premiere Pro.

The real challenge, however, was: “How do we make it user-friendly for kids?” Usability tests provided some helpful insights, but what also proved valuable was reviewing scientific papers on designing for children and identifying which design patterns work best. Some key examples included: using simple vocabulary, adding clear labels, incorporating fun colors, and avoiding clutter.

Key Insights

After analyzing the research data, we identified several key insights that would guide our redesign approach:

Non-Contextual Menus

The menu system was not contextual, causing confusion among young users who couldn't find relevant options when needed.

Missing Animation UI

Neura Studios lacked a UI for animation, making it impossible for users to create keyframed effects in their videos.

Inconsistent Interface

The user interface lacked consistency in styling and behavior, making it harder for young users to learn and predict.

Timeline Alignment Issues

Users struggled to align elements to specific timepoints accurately due to lack of visual indicators.

Progress Concerns

Users were concerned about losing progress despite autosaves being in place, indicating a lack of clear feedback.

Recording Time Visibility

Recording time remaining had low visibility without exact time indicators, causing

Cumbersome Editing

Editing elements was difficult due to small, closely packed UI options that were challenging for young users.

Missing Labels

Many elements lacked clear labeling, making it difficult for users to understand their purpose.

Explorative Prototyping

It was finally time for the best part (in my opinion): prototyping! At first, I wanted to explore a variety of different ideas and layouts, which I then discussed with the other designers to determine which ones made the most sense, both visually and based on the data we had collected.

Below are examples of different UI elements that were explored, for instance, how the contextual menu should look, or how the keyframing animation system should work. Other questions included: What colors should be used? How should the recording page be designed? Can the user add audio while recording? All of these questions were considered in order to find the best possible solution.

Please keep in mind that these are rough visualizations meant for exploration, and many aspects such as sizing, spacing, etc, were adjusted for the final version.

Solutions to the Problems

To further clarify the problems and solutions, here is a summary of the main pain points along with their corresponding solutions.

Problems

Solution

Users struggle to align elements accurately on the timeline which may lead to them abandoning the task early and lower clip quality.

Improved timeline precision with a clear time-line marker displaying exact time and snap-to feature.

Users found it unclear how to change element length, causing frustration which may be a source for early abandonment.

Improved affordance by using larger handles and directional icons, helping users understand how to adjust element length.

Lack of clear visual separators made it hard to distinguish between clips.

Enhanced clarity by marking clip boundaries in the recorder.

Menu placement for adding elements in editor require extra effort on mobile, reducing ease of use.

Bottom-aligned menu improves touch access and enables scalable side-scroll functionality.

Some users struggle to find element specific interactions such as delete and copy, causing editing friction.

Enhanced interaction by showing a contextual menu at the bottom with relevant options when an element is tapped.

Some users have a fear of losing progress and are unable to understand how and if progress is saved.

Introduced exit menu in the recorder with clear save/delete options, as well as labeled draft buttons.

Although music is key to clip success, users can only apply it after recording, possibly leading to reduced clip quality and increased time effort.

Enabling music in the recorder improves efficiency and supports early on creative clip creation.

Inconsistent top-navigation with layout issues on smaller devices may create friction for users.

Standardized top nav layout to ensure clarity and responsiveness on all screen sizes.

Manual animation is common among advanced users but is time consuming and difficult.

Introduced keyframing support, inspired by common patterns used in apps such as TikTok and CapCut.

Pro feature limits (like recording time or max elements) are not clearly communicated, which may lead to distrust and confusion.

Introduced clear visual indicators for max elements and recording time in free version.

Icon for number of players in scene may be unclear.

Improve labeling with a user icon.

Comparing the old and new Design

All of the solutions were then combined into the final design. Below is a comparison between the old and new clip editor, as well as a comparison between the old and new clip recorder.

Old Clip Recorder

Users struggled to understand icon buttons and lacked clear indications of clip length and other details.


New Clip Recorder

Improved navigation with clear labels and smoother workflow allowing to add music directly in the recorder.


Old Clip Editor

Users struggled to understand icon buttons and lacked clear indications of clip length and other details.


New Clip Editor

Improved navigation with clear labels and smoother workflow allowing to add music directly in the recorder.


Results & Impact

The editor recently launched (August 2025) and has seen some promising results in the beta-testing! If anyone reading this would like to test it out, here is the link. I will update this page once I get the new metrics :)

Reflections

This project was a valuable learning experience that reinforced several important principles of UX design while also presenting unique challenges related to designing for a young audience.

What Worked Well

Challenges & Learnings

Symbiotic Client Relationship

The working relationship with Neura was collaborative and productive, with regular meetings and clear communication.

Designing for Young Users

Creating interfaces for 9-12 year olds required special consideration for cognitive abilities and motor skills.

Iterative Approach

The iterative process of sketching, prototyping, and testing allowed me to refine solutions progressively.

Research Limitations

The challenges of conducting research with young users taught me to be creative with research methodologies.

Focus on Core Issues

Identifying and addressing specific pain points rather than attempting a complete overhaul led to targeted, effective improvements.

Platform Constraints

Working within Roblox's technical limitations required creative solutions and compromises. Certain features could simply not be executed.

Key Takeaways

This project reinforced the importance of understanding your users' specific needs and abilities. Designing for children is fundamentally different from designing for adults, requiring simpler interfaces, clearer feedback, and more guidance.

I also learned that small, targeted improvements can have a significant impact on user experience. By focusing on specific pain points rather than completely overhauling the interface, we were able to make meaningful improvements while minimizing disruption to existing users.

Finally, this project highlighted the value of a collaborative relationship with clients. The regular meetings and open communication with Neura Studios allowed me to align our goals and make adjustments throughout the project, resulting in a solution that truly met their needs.

Thank you so much for taking your time to read this case study! :)

My other case studies

Pet Adoption Platform

A qualitative research study exploring how digital platforms can influence adoption decisions through persuasive design.

Task Link

Designing a user-centered gig platform for the Romanian market that prioritizes trust, simplicity, and accessibility for everyday tasks.

Task Ease

A productivity mobile app, designed to help users manage their daily tasks efficiently with an intuitive and clean interface.

© 2023 by Klaudia Krakowiak