Tse-Yun Chaung
UX Research/Design
UX Case Study
Curve Editor Feature in Nuke (A Digital Compositing and VFX Application)
Photo by Foundry on Foundry.com
Project Goal
To assess the current implementation of the Curve Editor in Nuke and consider design solutions that could improve the user experience.
Timeline
27th May - 5th Jun. 2022
Deliverables
Competitor analysis, Task flows, User journey map, Sketches, Wireframes and Prototype
My Role
Product Designer
Curve Editor in Nuke is a feature for precise control in animation production.
Process
For the initial research, I conducted expert interviews and competitor analysis to empathize the users in real context and understand domain knowledge. To have enough scope to solve, I defined the users that are the artists who used curve editor before in competitors and are potential users in Nuke based on the previous interview.
​
During the definition phase, I discovered the current problems with user testing and then generated the user journey map to analyze the pain points and determine priorities. With framed problems, I ideated initial design solutions via Lo-Fi sketches and Hi-Fi wireframes. Ultimately, I validated the iterated design solutions with users with the clickable prototype and ensured the redesign improved users' experience.
You could access to full references of this study here.
Understand Domain Knowledge
Expert Interview
To understand the domain knowledge about Curve Editor, I interviewed experts specializing in animation production.
It is an efficient way to realize their major tasks and working process using Curve Editor. By doing this, I can empathize with the actual users.
​
​
Competitor Analysis
Besides, I conducted competitor analysis to understand competitors' UX strengths and weaknesses in Curve Editor.
This research also helps me become familiar with the design patterns and get inspiration for later design solutions.
Define User & Goal
The research leads me that figure out these potential users have similar contexts using curve editor on competitor's products, e.g., Unreal Engine and Maya.
​
To have enough scope to solve, I defined the user and goal as follows:
-
User: The potential users are not the experts using Nuke but used curve editor on other competitors before and now are new to shifting to Nuke.
-
Goal: Expect similar performance and less friction when doing major tasks in Nuke.
Identify Problems
Expert Interview
I conducted user testing to investigate the usability and learnability issues in Curve Editor in Nuke.
​
-
Research Goal:
Figure out how potential users user Curve Editor in Nuke.​
​
-
Research Participants:
​Artists who have experienced in using Curve Editor in other animation softwares.
​
-
Research Tasks:
-
Create a simple object's movement animation.​
-
Adjust keyframes and their tangents to create a specific pattern movement animation.
-
User Testing with One of the Participants
* The previous expert interview inspired the design of tasks design so that the participants could perform basic skills (e.g., adding keyframes and selecting keyframes) and advanced skills (e.g., inputting interpolation) based on different tasks.
​
User Journey Map
I organized collected data and developed a user journey map to identify where users were having trouble in the process.
There is no problem when users set & add keyframes and review the animation's final result. However, there are two places where users have some frictions:
-
Adjust keyframes and their tangents
-
Adjust part of a curve
User Testing with One of the Participants
Users have small frictions when selecting keyframes in Curve Editor initially. They tended to use the function learned from other competitors to select keyframes. For example, they were clicking and holding the mouse to drag-select the keyframe without clicking on it precisely. However, after becoming familiar with the size of the keyframe, the frequency of this issue happened less.
​
The most frustrating part of the journey is adjusting the part of the curve, especially when using interpolation functions (a method to efficiently set the slope of the curve by setting specific values and formula). Unfortunately, this problem impacts most users in the test.
​
​
​
​
​
Problems
Based on the frequency happened and the level of the severity impacting users, I decided to focus on the following problems in the interpolation function:
​
Problem1: ​
Difficult to discover the interpolation functions.
​
The interpolation function is hidden in the right-click menu. Therefore, users couldn't quickly access it. Some even thought there are interpolation functions in this software.
The discoverability of interpolation function is poor.
Problem2: ​
The name of each interpolation function in the menu is confusing.
​
As users found the function in the menu, they were confused about which function worked as they wanted to apply due to different naming conventions.
The names of the interpolation functions in the menu are inconsistent in different software.
Problem3: ​
The status of each keyframe is unclear.
​
Users could drag-select keyframes to understand which keys use interpolation functions by different tangent's styles, but they were confused about what kind of functions were used if the curve change is not significant, like Catmull-Rom and Cubic.
The visibility of interpolation function status is unclear.
How Might We...
I used How Might We to transfer these pain points to frame the design challenge on the correct problems so that I could focus on the requirements and goals instead of functions.
​
-
How Might We help users easily and quickly discover the function?
-
How Might We make users feel confident they are selecting functions correctly?
-
How Might We show users the differences in keyframe status significantly?
Design Solutions
Lo-Fi Skeches for Initial Design
Based on framed problems, I sketched different design solutions and tried minimizing the impact of changes and improving the user experience. I started from the existing feature - right-click menu.
​
Firstly, I discovered that users always describe the shape of interpolation instead of mentioning their names from previous user testing. Therefore, I created the icon with matching colors for each function so that users can feel confident when selecting the function (Problem2). Furthermore, I built a checkbox before each name as an indicator to show keyframe status (Problem3).
​
Right-Click Menu, Icon and Toolbar Skeches
Validate Initial Design
I ran a quick test with users and received some attitudinal feedback. First, they love the icon idea, but some functions are still too complicated to understand, like Catmull-Rom and Cubic. They also feel visual stress from the colorful icons.
​
Furthermore, for the indicator, when they need to check the status of the keyframe, they have to right-click it, which is annoying to have this repeated step every time.
Right-Click Menu and Icon Wireframe for Users' Initial Feedback
Redesign & Iteration
To fix the problem with complicated functions, I recalled how official documents and video tutorials teach users via images/short clips. But the menu doesn't have enough space to display this information. So I have to think outside the right-click menu and create something that won't bother existing users' behavior.
So I came out with the idea to design a toolbar on the top of Curve Editor so that users can quickly access the functions. This toolbar is also an excellent place that can have the tooltips to display detailed information.
​
Toolbar with Cubic Function Tooltip Wireframe
At the same time, I redesigned the icon using fewer colors to ensure it doesn't violate the WCAG principle and follows the design pattern in Nuke.
I kept iterating the design and making different design decisions, like changing the image into a short clip as better tooltips and using different colors on icons in the toolbar to show indicator status.
.png)
Toolbar and Tooltip Redesign
Hi-Fi Key Wireframes
Moving forward to the process, I created Hi-Fi wireframes and developed clickable a prototype. Below are the screens showing key design solutions with annotations.
Key Wireframe: Toolbar
Key Wireframe: Tooltip
Key Wireframe: Right-Click Menu with Icons and Checkboxes
Clickable Prototype
The prototype is created to help me validate the design solutions with the users based on specific tasks. I could understand what works well and requires further improvement with user feedback collected from the test.
*This prototype only covered the aspects of tasks that I planned to test with users on.
Outcome
-
Users can easily find and switch the interpolation function from the toolbar.
-
Most users can identify the function correctly via the icons and the tooltips.
-
Users also can tell keyframe status significantly by indicators in the toolbar and the right-click menu.
😃 Positives
" It is easier for me to switch the interpolation from the toolbar. I don't need to access the right-click menu anymore repeatedly! "
" I didn't know there was an efficient interpolation I could use. The presentation of the tooltip is clear enough for me to understand now. "
🤔 Questions
" If other functions like Weighted Tangent can be integrated in the toolbar, that would be better!"
" I love the new way to check the status of the keyframe from the icons in the toolbar, but it may not work when I select multiple keyframes simultaneously."
Conclusion & Reflections
Conclusion
After 10 days of research, analysis and design iteration, I can validate my assumptions and the changes I made with users from the test. Users have a more efficient way to switch between different interpolation functions and understand them with clear visual hints from the toolbar and the tooltip design, reducing the friction of doing major tasks when these users shift to Nuke.
What I learned
-
The value of domain experts' interviews is powerful:
VFX and animation are domains that I am not familiar with. Therefore, instead of spending much time reading the resources such as official documents, artists and compositors as domain experts help me efficiently gain knowledge of their working processes and contexts. It is also a great inspiration for me to design more practical tasks for the test.
​
-
Prioritizing issues in a limited time is essential:
There are several issues discovered after testing. For delivering design solutions in a limited time (10 days), deciding which issues should be fixed first based on the severity of the impact and frequency of the problems on user experience is important.
Next Step
From users' feedback, I would like to investigate further if any functions can be integrated into the toolbar section for future study. Furthermore, I would like to see how experts in Nuke work and look into the differences between the potential users from other software and these experts to fill the learning gap.
Note: I don't work for nor represent the product designer of Foundry's product - Nuke. This case study is a design challenge for me to learn from the product I am interested in.