Optimization Plugin Design For Unreal Engine
My Roles:
UX/UI Designer
Process:
Research
User Flow
Wireframes
Designs
Testing
Importing
Tools Used:
Figma
Maze
Unity
Google Sheets
Project Overview
In the realm of virtual production, tight deadlines and resource-intensive processes are prevalent. When a company is filming in front of an LED Wall, a common hurdle is ensuring that the 3D environments and assets displayed on the wall can operate at the required frame rate. Unfortunately this requires VFX artists to spend extra time going back into their files to make sure they are optimized for the stage they are running on. MOD Opti is an Unreal Engine application that helps fix that problem by using machine learning algorithms to find the most under performing assets in a project, and optimizes them to ensure they run at frame rate on shoot day.
MOD Opti is separated into 2 tools: The Stage Scanner and the Project Scanner. The Stage Scanner takes a profile of the user’s system and the stage that will be displaying the assets, then it creates a template that can be used to optimize assets to. The Project Scanner profiles the user’s system and the project files. Based on the stage that’s selected, the machine learning algorithm will choose the assets in the project that need to be optimized. The user can remove any assets they don’t want to be optimized, and the system will choose other assets that can be optimized instead to meet the requirement to ensure FPS. MOD Opti then goes ahead and optimizes those selected assets.
Research & User Insights
Research consisted of learning about the VFX industry and the pain point we were trying to solve. I downloaded Unreal Engine so I could get a feel for the user interface and other plugins that were available. I would also join prospect meetings where the CEO and CTO would talk to potential clients and sell the idea of the app to find product market fit. A lot of times they were speaking with executives (the people buying the product) and VFX artists (the people using the product).
Notes:
-
Typical user would be a VFX/VAD artist or someone who works at the stage.
-
Users need a way to quickly and easily optimize projects to avoid wasted time and money.
-
Typical user would be familiar with file systems and stage setup. Not a lot of technical explanation is required.
Flow Maps and Wireframes
The first step in designing this project was to understand the flow of the system, then we were able to make a flow for the user. My CTO and I had a few sessions discussing the needs of the system and the order that users should provide their content to be optimized. I created a flow along with some low-fi wireframes to help conceptualize what users would see.
Project Scanner Flow Map
Stage Scanner Wireframes
Designs and Prototypes
The design follows a “Wizard” approach, because the user needs to enter specific information in a specific order. I wanted to keep the design similar to the other software the users were utilizing (Unreal, Unity, Blender, etc). I incorporated a mostly dark/grey color scheme with bright blue call-to-actions. The font choice was also on brand with MOD’s guidelines.
​
Multiple tasks and scenarios were prototyped to be used for user testing. We wanted to make sure the initial design was liked, and we wanted to know if any parts of the flow were confusing to the user.
Project Scanner Hi-Fi Flow
Project Scanner Prototype
User Testing
We did user testing with 11 participants via Google Meet and Maze. Before user testing I prepared the play tests in Maze to track user thoughts and clicks. Most testers were potential clients but there were also some testers who had no experience in the virtual production industry. This provided us with a good range of users to test with.
Overall the response to the UI was positive and we received a lot of useful feedback in regards to changes that could be made to improve the experience. I gathered the feedback on a google spreadsheet that we could use to determine which changes could be made before launch or saved for the second version.
A Common Issue
During our user testing we were noticing that the "Profiling Error: Optimization Required" screen in the Project Scanner was causing some confusion with about 40% of our testers. The ERROR text and the pink color were making users want to go back instead of clicking "Next" to move forward with optimization because they thought something went wrong in the process.
The Fix
I adjusted this screen by removing the pink error color and removing the words "Profiling Error" so now the screen was seen as a notification that the assets need to be optimized, instead of an error message. This fix eliminated the confusion with our usability testers.
Import Design to Unity
Given that the project was under development in Unity, my responsibility included transferring the design files from Figma to Unity using a Figma to Unity Converter plugin. This required thorough cleanup to ensure alignment between the Unity designs and the original Figma files. Additionally, I took charge of incorporating certain UI functionalities in Unity and collaborated with the QA and development teams to address bugs and ensure a smooth launch.