Our client approached us with a unique challenge: develop an engaging and intuitive editing experience that would not impede the creativity of their diverse user base, ranging from experienced technical creatives at large production studios to eager children aspiring to create their own mini-games.

The first version of the Creator Studio served the early content production well and supported Hellosaurus’ growing library of interactive media. However, to bring it to the larger network of producers, they needed to increase the level of familiarity and ease-of-use producers expect in video production. We worked with the Hellosaurus team to create a holistic design language that would support dozens of types of interactives, a video editing experience, and more.

The new Creator Studio launched in 2022 to positive feedback, and Hellosaurus was acquired by leading edtech software company Brilliant Worldwide at the end of 2022. Brilliant plans to utilize the Creator Studio to produce more interactive lesson content for its 12 million users.

However, the studio lacked the user-friendly interface that a wider audience of producers needed to feel productive, happy, and enthusiastic about the Hellosaurus ecosystem and experience. The core objective of this redesign was to move the Hellosaurus episode editor from a divided Unity & Javascript hybrid experience to a unified, fluid in-app WYSIWYG (“what you see is what you get”) editorial experience.

The unified interface needed to allow producers to work directly within the app that their audience is using, providing a more fluid create-to-publish experience. Unlike the web-only builder of v1, the Hellosaurus team wanted to allow editors to work on friendlier platforms, from desktop (Unity for Windows/Mac) to mobile (built as an iOS app for iPad). Our goal was to design a friendly cross-platform experience.

We began the work by first planning out the immense number of sections, screens, and components that we needed to take into consideration.

The elements that we developed for the kit were a reflection of other, familiar user interfaces that producers would regularly be working within, such as Final Cut Pro and Adobe After Effects.

We used the information architecture and wireframes we developed to identify all the element and component types that would be necessary throughout the application. This list became an extensive array of adjustable components that could be seamlessly integrated, combined, and remixed while remaining consistent. This allowed the Hellosauraus team to easily expand upon what we had created collaboratively and rapidly launch new tools for their users.

We collaborated with the client to enhance all of their existing "do-its", while ensuring the design patterns could be easily adapted to future versions without major revisions. We took a solution-agnostic approach, focusing on creating a framework rather than a specific tool. This framework underwent rigorous testing against Hellosaurus's defined use cases, and ultimately proved successful when we integrated the various components into a consistent and functional application.

We extensively prototyped, tested, and refined the video editing and creation workflows to ensure that the application was intuitively designed for both scenarios. Simultaneously, we took care to avoid oversimplification that could hinder the experience of power users frequently updating their content library.

The framework's key features included an easy-to-navigate timeline, a highly adaptable form system catering to all types of input, and accessible in-line editing tools for a real-time, on-canvas editing experience in addition to all the standard management and control features that one would expect in a modern web application.

In response, we focused on making the new studio accessible and user-friendly. Our design included in-app guides, intuitive interfaces, and industry-standard workflows that felt natural to both novice and expert users.

Through various iterations, we prototyped and tested the core experience, examining user interaction with the canvas and optimizing the limited viewport space. We designed the video player to act as the creation space, integrating sidebar drawers and in-line action panels that allowed for editing directly on the video for a near real-time WYSIWYG experience. The client's request to ensure the application would also translate well to larger touch devices, such as iPad Pros, added an additional layer of complexity. However, this aligned well with our objective of developing a simple yet powerful editing experience across devices and screen sizes.

Utilizing the modular system and interface kit we developed, we built out a system of user flows that afforded the Hellosaurus team a clear outline for each key use case, and references for future needs as they continued to grow the product.