Client	GritWorld
Sector	3D, Real-time rendering, AR, Animation film
My role	UX/UI design from research to conception, visualization and testing

Overview

GritGene (GG) Real-time 3D Engine is an innovative and cutting-edge 3D real-time engine designed to excel in rendering quality and workflows for Animation, VFX, digitized city management, and augmented reality applications.

Render Output is one of the important screens that users interact with when they want to render sequences with preferred output settings. The previous design was not intuitive and challenging to understand for the users. A new design proposal has been created to solve current issues after three rounds of user tests and to provide users with a better user experience. 

Goals & Challenges

One of the main challenges I faced when I first joined this project was the lack of design consistency, including the absence of a design system and UI style guide. In my role as a UI/UX designer, I collaborated with disciplinary teams, including 3D artists, developers (tool, system, and graphic teams), product owners, project managers, and scrum masters, to redesign a user-friendly interface for a large and complex real-time 3D software.

My tasks were:

• UI control library + design guide + font
• Render Output window redesign
• Inspector window redesign
• Asset Browser window redesign
• Scene Hierarchy window redesign
• Undo History window redesign
• Responsive Window layout redesign
• Sequencer window redesign (Node-based Editor & Curve Editor)
• Viewport menu redesign
• Toolbar redesign
• Gizmo redesign
• Launcher
• Animation Workspace
• Light Explorer
• Terrain Editor

Through my contributions, we were able to achieve a more cohesive and user-friendly design that improved the overall user experience of the software.

Design approach 

UX Design of GritGene Render Output follows a non-linear design thinking process of “Understand, Define, Ideate, Prototype and Test”. 

• Phase 1 – Understand: Empathise and learn about target users’ needs.  
• Phase 2 – Define: Construct a point of view based on users’ needs and insights and define the problems. 
• Phase 3 – Ideate: Brainstorm possible solutions. 
• Phase 4 – Prototype: Build a representation of the solutions.  
• Phase 5 – Test:  Test the prototype with target users and gathering feedback. 

Understand

Research and Discovery: I begin by understanding the project’s goals, target users, and the problem we’re trying to solve. This involves conducting user research, market analysis, and stakeholder interviews to gather insights and identify user needs and pain points.

Stakeholder Interviews: I engaged with GritGene’s product owner, artists, developers, and marketing team members to understand the company’s vision, goals, and unique value proposition. This would help me identify the desired differentiators, constraints, and requirements for the software.

Competitive Analysis

We selected the following popular engine to conduct competitor analysis: Unreal Engine, Unity, CryEngine and Godot Engine.

Persona

Information Architecture

Below is the IA of Render Output window:

UI Library

The UI library design, carefully chosen to align with the brand’s style and logo, creates a cohesive visual experience. This minimalistic design allows users to focus on tasks and workflow effectively, reducing distractions and promoting productivity. The seamless integration of the engine color and brand identity reinforces brand recognition and contributes to a functional, visually appealing user experience.

High fidelity (hi-fi) design showcase