Forma Editor

RT3D, the new norm of creating marketing content

Brands have increasingly adopted real-time 3D to create marketing assets for two key reasons. First, it’s immersive, enabling more engaging and emotionally resonant storytelling that drives sales. Second, it makes the production of traditional media—such as images and videos—faster and more cost-efficient.

It is difficult and expensive for brands to manage 3D data in a scalable way.

• Difficult to manage

• Lack of 3D experts

• Expensive to hire a team

To create a web configurator like above, companies needs to do is take the complicated CAD model, process it, and create digital assets like materials, lightings, stages that are optimized for the web. Usually, the process takes several months and costs hundred thousands to million dollars to make one configurator for a single product that contains complicated configurations.

Imagine a scenario there’s a new requirement to create a configurator for mobile. If you are a PM in Porsche, you’ll likely found all previous assets not reusable because smartphones do not have enough computing power to run those high-quality assets. 

There are two options, you’ll need to find a team to optimize everything for mobile or you could seek agencies for help and end up receiving a black box solution, which is even worse since the engineering team constantly released updated model parts, and you’ll have to pay the agencies for every new update. Therefore, it’s difficult and expensive to scale.

UX Designer - from scratch to launch

As the only designer on Forma, I work with a team across 6 different cities. Our timeline was tight, there was no user researcher that I could work with. I am account for user research, ideation, information architecture, wireframing, prototyping, and design evaluation.

Collaboration with:
1 TPM
1 BPM
4 3D Artists
9 SDE

Navigate Ambiguity:
How OEMs use 3D models to create configurators

Design in a holistic view

To design in a holistic view and help the team to shape MVP, I studied the objectives and pain points for each role in the pipeline, translate requirements into features, then into information architecture.

Target users are Technical Artists and Product Managers in the application stage.

We defined out main product values are: Speedy 3D visualization and 3d model management. We found the application stage of the pipeline is where we could bring the most value to in short term, which we’d be optimizing our MVP for.

1. Many of them are Unity users but do not have the right framework to manage and visualize content.

2. Many of them work with agencies on disposable solutions

3. Replacing business software has a high invisible transition cost, but the last stage is where switching tech costs the least.

Alyx (Technical Artist)

• The narrator of 3D experience

• Familiar with 3D tools like Maya

• Comfortable to learn new tools

• Efficiency matters

Eli (Product Manager)

• The gatekeeper of model correctness

• Used to text-heavy UI like BOM, Excel

• Comfortable with reading code

• Manage models across platforms

A double-edge design system

The strength of Unity’s design framework is a user can add blocks to the workspace, and still have reasonable usability in a packed UI. However, the cluttered elements contradicted with Forma’s need - an inviting interface.

Design Overview

Create product variations in seconds

Now Alyx could create product variations simply by dragging elements from the product outline, materials, or the object in the scene and dropping them to the variant table, there’s no need to code a single line to create product variation.

WYSIWYG, saving 73% communication overhead

In Forma, what you see is what you get, now teams could visualize and collaborate on the exact scene instead of talking through wireframes or long documents, saving hundred hours of communication costs across different department.

Single-source of truth model management

Now Eli could say no to disposable solutions. Scaling for multiple platform is easy, he could tailor rendering methods, models, environment, and material for target platform all in one place. Saving companies millions on recursive spending, a true budget saver. 

An easy entry to virtual photography

Now Alyx could curate configurator viewing experience and find the best angles to showcase product with our powerful camera system. We Provided an extendable interface letting Alyx to add on more features according current tasks. 

Iterate compositions on the fly

It’s 20 times faster to create compositions in RT3D, Alyx could reuse environment and fine tune look and feel to create a consistent brand identity across scene.

True-to-sales rules is a few clicks away

Creating rules true to sales is easier than ever, Eli can simply import from code or use our simple UI to expose the right product variation all by himself. No need for compare thousands line of rule code and excel sheets on two monitors and sending screenshots and emails back and force with the engineers. 

An innovation of workflow.

Forma saves hundreds hours in each step of the workflow. Users can create an immersive experience and export them into multi-channels all in RT3D with no code required. It is true workflow innovation that help small retailers to big companies making their transition into 3D content creation.

From months to hours

Before Forma exist, it requires a teams of 3d artists and engineers months to create configurators. Now, Forma does all the heavy lifting, making a configurator is only a matter of hours.

Dark/Light themes

Usually artistic tools that Alyx uses are in dark mode, and spreadsheets softwares Eli uses are in light mode. I design both mode to ensure both of them have smooth transition to Forma.

An on-site user testing in Poland during the rise of pandemic…

A journey won’t be completed if there are only hardships. We went on a trip to meet real-world Alyx and Eli in one of our potential customer's studios. The studio was a powerhouse in creating custom configurators, clients including BMW, VW, Honda, Nissan, and big brands outside automotives. We spent five days in the studio, every day from 10 am to 8 pm observing real work context and conducting intensive studies. It was during the rise of Covid-19, every morning, the news broadcast new lockdowns and travel restrictions. The night before our flight, U.S. announced plans to suspend all flights from Europe. I’m fortunate to return at the last minute that my flight landed 27 minutes before the travel ban was effected.

Improve runtime UI to support mobile and more general screen sizes.

After the on-site study alongside remote studies with four more companies, we reviewed Forma holistically and created a list of improvements. One of the major items is to rework the runtime UI.

Earlier Runtime UI isn’t mobile friendly

In the beginning, we were only targeting desktop users. Through user studies, we found there’s strong demand to build configurators for mobile devices.

Challenge: Expanding use case in the last minute

With limited engineering power, we need a generic runtime UI that scales for a wide range of screen sizes. 

Warning: We are neither building a responsive UI nor an adaptive UI here! Neither UGUI nor UI Element provides an easy way to create responsive UI that is so common in the web/mobile world. There’s no column systems, media query, sorts of things that make engineering responsive layout easy. Therefore, to maximize the outcome with the least time, we are creating a generic UI that detects device orientation and will work from a large TV screen to a small i-phone SE screen. 

What I did first is to analyze the configurator, identify finite and indefinite elements so we know how to create a layout that consumes and displays data well. For finite elements like logo and product name, there’s always one of each in a configurator, therefore, a fixed container would work well. On the other hand, for an indefinite list like product variants which users could make as many as the PC could handle, we need to define a container with a scrollable area.

Then I moved on to wireframe the basic structural interactions. The reason I used a layout where the scene is on top and the control sheet at the bottom is based on my research on multiple automotive game UI and configurators, this layout is optimal for car presentations.

Explore scalable solution in a tight timeline

Next step, I created mockups for both landscape and portrait views.

After discussion with the PM, we think our template should serve more products besides cars, therefore, I decided to use a more squared ratio scene. Also, I iterated on several different layouts to get to a UI that needs the least conditions in code but still works well for any sort of product.

Understand engineering to create efficient designs that balanced flexibility and usability

Below is the final layout, the difference between portrait and landscape is minimized:

• The control sheet is always vertical

• Using same navbar and header

• Using a card list so the behavior difference only lies in the scrolling direction.

• Price tag always centered at the bottom of the scene

• UI toggle always stays on the top-right

I tested out the design on multiple screen-sized as follows. with the same pixels (under the premise all UI runs on default system, scaling factors) The UI works fine from small smartphone screens to desktops. To run beyond a 4K screen, in the engineering end just need to specify multiplication by 2 for the UI.

Unity Forma officially launched in Dec, 2020

Unity Forma was launched in Dec 2020 right before the Christmas holidays. Volkswagen ends up being one of the first batches of early adopters of Unity Forma alongside various industry leaders including Luxottica (The monopoly of the global eyeglasses industry), Airbus, and more

Practice empathy as a team

As the only designer on Forma, I still have other products to work on. Therefore, I’m always strict on time management, but it is difficult to spec out all details or edge cases in the design. Engineers are my best allies that they would call out the major missing cases in my design. Therefore, it is important to not only understand users myself but also share the knowledge with the whole team. Therefore, after the onsite user study, I set up a recursive usability assessment meeting with the team, we talk about the context, user flow, examine each part of the system together and talk about why and how it is benefiting the users. Since we have this meeting, the team became more efficient in making decisions autonomously and have more conversations not only about how features should be implemented in the code end, but how the flow should be.

Design scalable solutions

Always try to design beyond requirement - in the journey of creating Forma, due to managerial decision changes, the scale of our product changed several times and I learn it in a hard way that even with requirements given, still try to envision how the system should work in a larger scale. For instance, the flow of authoring multiple products is very different from authoring only one product.

Improve visual hierarchy

In Unity’s design system, there’s currently only one font size specified with background colors that aren’t easily distinguishable from each other. As a consequence, If I got more time, I’d try to work on adding custom fonts and backgrounds to make the visual hierarchy perspicuous.