Unomi
Unomi is a SaaS developer of software designed for animators and video game developers. By subscribing specifically to to their 2DLS software offering, animators are able to automatically sync sound and dialogue to a character’s mouth movements and facial expressions. While at General Assembly, I was contracted by Unomi’s CEO and co-founder to identify whether their software was solving the problems that 2D animators faced during this process. We shipped a prototype of optimized software capabilities with adjustments to the interface as well as adding new, necessary features to this patented voice recognition technology.
Duration
20 day sprint
Platform
Native software
Tools
Adobe InDesign, Figma, Trello, Miro, Google Forms, Sheets, Docs, Slides, Drive
Role
Research Lead
Synthesis Lead
Client Presentation Director
Team
KC Morris
Marilyn Novy
Mike Han
Deliverable
Interactive Prototype
Client Presentation
Problem
Currently, it typically takes an animator 2 days to animate 2 minutes of dialogue. While Unomi’s aim is improve the time this takes animators, the product was confusing to new users, and lacked the tools they wanted that would help to convince them to make the leap to using a new software.
Solution
In the span of 20 days, we designed an expanded upon the current 2DLS interface to allow new animators to learn how to use the program quickly, and to immediately entice them to switch from the software they currently use for this part of their animation process.
Research
“The inbetweens transitioned flawlessly!”
Understanding the Vision
Fun fact: I am not a professional animator!
But guess who had to become a subject matter expert in a matter of DAYS to not only design tools that veteran animators want to use, but also to understand basic jargon so that I wouldn’t sound like an idiot when talking to these professionals? You guessed it! Thank you, YouTube for your endless tutorials and online classes.
Now I can haughtily drop words like viseme and bezier during scintillating conversations (but they would have to be at a Pixar cocktail party, because let’s face it, it’s a niche vocabulary subset). Like I imagine Amy Poehler doing at the Inside Out premier…
Finding Inspiration in Another Man’s Software
Just like there are ardent UX defenders of Sketch, while others view Figma as their ride-or-die, it was no secret that each animator has a favorite software. Getting them to leave that software for another was going to be a big challenge, so making any new software as comfortable a transition as possible was something that always kept top of mind.
This lead to me being lovingly inspired by the book Steal Like an Artist.
Through a thorough C&C Analysis, each feature that was described as “can’t live without” by the tutorial’s conductor was deliberately plucked and integrated:
Multiple artists mentioned that quick clean-up tools like Toon Boom Harmony’s cutter tool are popular for their ease of use.
The way Adobe Animate displays visuals of mouth poses rather than only assigning text to each shape allows for a more intuitive editing process.
While not a direct competitor, Apple’s Final Cut Pro features clear, easy to identify icons for frequently used tools rather than hiding them in dropdown menus.
Understanding the Users’ Behavior
After getting familiarized with industry standard software, we interviewed 6 different animators whom had never used Unomi, but were familiar with the process of syncing mouth shapes to dialogue.
Goals:
Learn about pain points with the manual syncing process in their current workflow
Learn about their software preferences and why they use one program over another
Discover their favorite tools within those programs
Learn about the software industry as a whole
This is a screenshot of me conducting a user interview via Zoom with an animator with 15 years of experience bringing 2D and 3D characters to life.
He is most efficient animating with hot keys, so we were sure to include the ability to customize hot keys in our prototype, with the option to select presets from the software with which they are most familiar.
Talking to these animators allowed me to identify current pain points and preferences which provided validation that Unomi 2DLS was solving the right problem.
Discovering Patterns in our Users’ Behavior
The interviews were synthesized through 3 iterations of Affinity Maps, and illuminated opportunities for additional features while opening up other avenues to explore.
The interviews confirmed that animators need a way to speed up their current process and quickly lip-sync their projects.
The software needs to be feature-rich and robust, while being easily adoptable.
Animators are price sensitive when it comes to their tools.
Now, this data is all good and wonderful. But bear in mind that all of these interviews were conducted with animators who manually sync their mouth poses to audio. Because competitive software that automates the lip-sync process still leaves much to be desired, we were hard-pressed to find artists who know how this process works.
Learning How to Automate
Luckily, the interwebs contain a plethora of video tutorials available to study of other animators using auto lip-sync programs. We specifically honed in on Toon Boom Harmony and Adobe Animate, the two most popular industry-standard software tools available for 2D animators.
Toon Boom Harmony: After the animator showed the auto sync feature and played the results she said, “So that’s terrible -- I think it’s a great idea, but it doesn’t work.” She felt manually lip-syncing was a better practice for accuracy and even warned her audience, “Don’t use auto lip-sync, it’s so bad.” (Source: Stylus Rumble)
Adobe Animate: After clicking on the “auto lip-sync” button, he showed us how to scrub through and correct the inaccuracies. While the process was time-consuming, he had a positive experience and was happy with the result. (Source: Incredible Tutorials)
Synthesis
Defining the Problem
After interviews and analysis, there was a clear problem that needed to be solved:
A 2D animator feels insufficient when using the competitors “auto-sync” tool when matching dialogue to visemes because the animator needs to edit the unnatural matching due to inaccuracy, therefore the auto-sync tool provides little time and effort benefits when comparing auto lip-sync to the manual process.
Is it Shakespeare? No. Does it need to be? Not really.
Now that we’re oh-so-eloquently solving the right problem, let’s start digging deeper.
How might we reduce the time and effort it takes animators to sync movements to dialog?
How might we accommodate the unique and customized processes animators use to sync mouth and facial expressions with dialog?
How might we compel animators to leave the program they currently use to lip-sync for Unomi 2DLS?
Ideating on Features
Nailing down a Minimum Viable Product that optimized the existing UI, while also addressing animator pain points by enabling them to speed up their process, and that integrates seamlessly with their current workflow was our aim.
While we couldn’t alter Unomi 2DLS’s software to improve speed or accuracy, or even be sure that our prototype would integrate with anybody’s current workflow, we were able to validate the features that Unomi’s team included in their 2.0 vision board. We were also able to add a few features of our own, while optimizing existing flows.
Design
Unomi 2DLS mockup without any of the features tested or validated.
Our first stab at solving the problem. Our solutions: Optimize the UI of Unomi’s software, speed up process, improve accuracy, and integrate with current workflow.
Iterate
Adding Key Features
Seeing as animators spent the majority of their time in the Timeline, the majority of redesigns focused on this space.
We conducted Usability Tests with 7 different animators in a rapid iteration process testing these key features:
Connect Keyframes with corresponding words in the script
2. Adding a visual component for the keyframes
3. Test sound leading movement
Putting the Prototype in Users’ Hands
After testing our prototypes with our 7 animators, we were able to test our hypotheses repeatedly to refine features and find solutions.
Finding
Animators had different opinions on how the script should be displayed
Timeline looked cluttered, but animators wanted to see visemes while editing
Our assumption of “sound leading movement” was very incorrect, and we learned quickly that sound is the constant
Solution
Made standard view more legible, and added feature that highlights text to correspond with assigned keyframes
Developed “hover feature” which shows visemes while scrubbing through the timeline
Removed our new feature “audio frame rate” and switched our focus to matching movement to sound
Prototype
The End Result
Through the usability testing, we saw a theme that animators want to be efficient wherever possible, gravitating toward intuitively placed tools.
And so, we added more solutions to accomodate as many work styles and techniques as possible.
Audio Controls
Showing audio controls while scrubbing to make the software as accessible as possible
Zoom Sliders
Duplicating the zoom feature to two different places on the timeline so it’s readily available
Click Into the Frame Number
The ability to click into the frame number to quick-jump to a specific keyframe
Multiple Frame Number Views
Ensuring the frame number was easy to see in many different places
Make Highlighted Text Line Up With Keyframe
We kept the script in paragraph form, but also wanted users to see the highlighted syllable directly under the keyframe
Change “viseme” to “mouth” universally
The word “viseme” was lost on a few users, so we changed it to “mouth” so it is understood by all
Next Steps
Looking to to 3.0
Multiple animators voiced that they wanted the ability to export files in low, medium, and high quality. The ability to have a wide range of file options, zip, and cloud storage were also mentioned, and should be ironed out before launching.
Animators really like Adobe’s Dynamic Link in addition to having embedded files. Giving options for multiple file types, hot keys, and robust file management would all be really helpful. We’re unsure what the feasibility of building Dynamic Link would be, but we see this as a feature that should be considered for future development.
Multiple animators requested the ability to have customized layouts and save the way they’ve arranged their workspace to be able to have different workspaces for different projects.