ENVLaunch
Redefining workflows for production studios
Making the hectic world of animation production a little simpler.
Twisted Mountain Animation (TMA) isn't just an animation studio; they're also known for creating custom tools that streamline animation production for major studios like Disney and Mercury Filmworks. In 2022, TMA decided to broaden its impact by releasing ENVLaunch, their first commercial product.
ENVLaunch tackled a persistent challenge in animation studios: managing complex production environments. The tool empowered technical staff to set up and distribute cloud-based environments to all artists, ensuring studio-wide consistency and enabling artists to launch these environments with a single click. While ENVLaunch successfully achieved its primary goal of saving time and reducing technical hurdles for studios, the team at TMA saw potential for even greater improvements.
When I joined TMA, redesigning ENVLaunch became one of my first major projects. I led the end-to-end design process, from gathering and analyzing user feedback to testing prototypes and overseeing the final implementation. I also established TMA's first design system, laying a foundation that is now used across our entire product ecosystem.
My Role
Senior Designer
What I Did
User Research
Design Strategy
Usability Testing
Design System
Prototyping
Interaction Design
Timeline
Q4 2023 - Q2 2024
THE CHALLENGE
Streamlining how studios manage their production environments.
Entering unfamiliar territory.
Entering the animation industry presented a steep learning curve. To contribute effectively, I had to quickly adapt to a new professional landscape - understanding how artists and technical staff collaborate, learning industry terminology, and grasping key concepts like production 'environments.'
Though challenging, this journey was supported by our exceptional in-house team. Their patient guidance was invaluable, helping me navigate the industry's complexities.
Environments are equipped with extensive configurations to support artists in their work
Uncovering opportunities.
As my understanding of the industry deepened, I turned my attention to a thorough analysis of both the Admin Portal and the Launcher. This exploration highlighted usability issues and inconsistencies in the UI between the two platforms.
Despite their shared purpose, these tools felt surprisingly disconnected, as if developed in isolation from each other. This not only underscored the disjointed nature of ENVLaunch but also emphasized the need for a unified approach in our design strategy moving forward.
The existing Admin Portal and Launcher
RESEARCH SUMMARY
But what did our users think of the platform?
The Launcher was too narrow in scope.
Conversations with in-house and external studio users revealed a crucial insight: while the Launcher excelled at its primary function, it fell short for our advanced users.
Of the 28 users I interviewed, 6 felt constrained by the Launcher's limitations. They often found themselves relying on technical staff with Admin Portal access, creating a bottleneck in their creative process.
Missing workflows that our advanced users wanted
The Admin Portal needed a massive overhaul.
Conversations with technical staff revealed another major issue - the Admin Portal was difficult to use. Poorly optimized and buggy features made the experience frustrating. The UI was especially confusing, with elements that looked clickable but weren’t, and others that seemed static but were actually interactive.
This confusion also led to a significant rise in support tickets, as external users frequently needed our team’s help to set up advanced configurations.
Feedback: dramatized
Putting it all together.
To steer the redesign, I consolidated key findings and identified crucial areas to address. I also collaborated closely with developers and the product manager on sprint planning, focusing on high-impact, low-cost improvements for our release.
I tracked my findings in Google Sheets and created Jira tickets with the dev team where necessary
What this all leads to: our North Stars.
THE DESIGN SYSTEM
Establishing our brand identity from within.
Crafting a unified design language.
Recognizing the need for consistency, I seized the opportunity to create our first design system. Building on components from early prototypes, I developed a comprehensive visual framework that included a full set of components, spacing guidelines, colour palettes, and typography rules.
My goal was to create a flexible, scalable system that could unify our entire product ecosystem, starting with the Launcher and Admin Portal. This approach improved user familiarity across our products, streamlined development by establishing a single source of truth, and enabled our design team to work more efficiently on new screens and prototypes.
Some buttons I created for our design system
I started with atomic elements and built outwards
Accessibility-driven light and dark modes.
I didn't just stop there with our design system. My commitment to accessibility also meant that I mapped our new colour palette to WCAG 2.0 standards for both light and dark themes. This ensures our interface remains functional and visually appealing across all user preferences and needs.
FINAL DESIGNS - LAUNCHER
Streamlining the old while adding the new.
Before - A frustrating experience.
All users of the Launcher shared a common pain point: excessive clicks and a loss of context when locating environments between teams and toolsets.
With artists needing to frequently switch between different environments when working on their tasks, the current design only added unnecessary steps.
After - Removing the friction.
The new design lets users access their desired environment directly without having to navigate back to the previous screen. This change resulted in users finding their desired environment 12% faster compared to the original design.
Prototype of the new Launcher
Empowering our advanced users.
By introducing advanced workflows, advanced users can now create local test environments and set up configurations directly within the Launcher, cutting down on their need to rely on technical staff.
Since many of these new workflows are also present in the Admin Portal, I kept the experience consistent by reusing the same components where applicable.
Several of the new workflows in the Launcher
FINAL DESIGNS - ADMIN PORTAL
A fresh take on a familiar tool.
Before - The guessing game.
The configurations page is the cornerstone of our Admin Portal, where technical staff create environments by writing commands, scripts, and integrating packages.
However, the current design posed significant usability issues, hindering the efficiency of the environment creation process and increasing the potential for errors.
After - Clearing the path.
I redesigned the UI with a cell-based table layout, clearly defining each field with distinct hover and active states for rows and cells.
Inspired by Excel and Google Sheets, I also added hotkeys for actions like tabbing, multi-selecting, and copying/pasting. These improvements streamline the environment creation process and offer experienced users options to speed up their workflows.
You can't see it here, but the hotkeys really speed things up!
New and improved side panels.
A significant issue with our old package releaser page was the loss of context when managing jobs. Users were redirected to a different page, causing them to lose their place in the process.
To address this, I introduced compact side panels that house all workflows and job-related information, allowing users to maintain context while freeing up valuable space on the main table.
Side panels allow users to maintain context while housing complex workflows
THE REFINEMENT
Not everything went smoothly. Here were some changes based on user feedback.
The package releaser took us a little while to get right.
Initially, I used a stacked progress bar to display package statuses within a job. However, this design was difficult for users to interpret, especially when there were over nine job-level statuses, with some having to share the same colours.
To make things clearer, I redesigned the table columns, separating the statuses into distinct entities. This adjustment significantly improved understanding of job and package statuses.
Another challenge was the high volume of daily job creations. Users often lost track of their existing jobs, leading to unnecessary duplicates. This not only caused confusion but also increased costs due to additional hosting fees for active jobs.
To resolve these issues, I introduced two key features: tabs to help users locate and manage their jobs easier, and an "Auto-Close Date" for inactive jobs to reduce table clutter and hosting costs.
Tabs and new columns were introduced to enhance scannability
Sizing down the Launcher.
User feedback indicated a clear preference for a more compact Launcher. Observing users with multiple windows open, I noticed the original Launcher design took up too much space. By reducing its width and condensing the top bar, we ensured the Launcher could remain open without obstructing other windows.
The top and side bars had to be condensed to accommodate the smaller size
THE IMPACT
Both our Launcher and Admin Portal saw substantial improvement across our key metrics.
-43%
USER ERROR RATE
+35%
ADMIN PORTAL ADOPTION
+16%
USER SATISFACTION SCORE
Looking ahead.
Building on this success and our established design system, we've begun design and development of our next product: Envisage. This upcoming product aims to streamline project and pipeline management for production tools.
Stay tuned for updates!
Some early mockups of Envisage
Our other products, such as our Maya tools, are also getting the design system treatment
