Hellosaurus wanted to grow their creator ecosystem and, to do so, needed to rethink their editor experience to be able to attract a wider audience of producers and creatives. They worked with Planetary to redesign the Creator Studio experience.
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.
Modular interface components designed
Screens, states, and user flows created
Of producers building interactive content
Hellosaurus’ initial Creator Studio experience was a productive “minimum viable product” that allowed the first batch of creators to build interactive content for the platform.
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.
As a first step, our team set out to identify the information architecture for the new Creator Studio. This included planning out all “happy path” user flows, as well as the number of Do It templates—what Hellosaurus calls its interactive moments—and the number of controls they would each contain.
In doing this, we could begin to identify common components and shared elements, which we would use to define the design language for the application. It also allowed us to begin identifying any button or view states and edge cases we would need to address in the design.
A “Do It” is an interactive moment in a Hellosaurus experience that allows the player to solve a puzzle, complete a task, or interact with the host. Creators need to be able to drop a Do It into the video and customize it to fit the moment.
We designed a series of components that allowed us to build 14 Do It templates as part of the Creator Studio. Each Do It template has several customization and adjustment options that a creator can apply.
To ensure we had a consistent brand and user experience throughout the Creator Studio, we developed a User Interface Kit.
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.
Given our client was a rapidly expanding startup, we needed to design the application in a modular manner.
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.
The existing Creator Studio was functional, but lacked the user delight factor and required extensive training for potential users to fully utilize its offerings.
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.