Exploring concepts

The first step was developing a set of ground truths. We envisioned that spatial UI manifested a three-dimensional form and space, embodied responsive materials, and reacted instinctively to user presence. With these in mind, we went off to loosely explore how 3D UI can be presented.

01

STYLE GUIDE VERSION 0.1

We spent another two weeks on a design jam to develop our first draft of 3D style guide that contains a color system, material finishes and motion.

02

Rapid prototyping

Once we had a basic style guide, we jumped right into rapid prototyping land. This was where the real fun began. Here was also where my Unity skills were put to the test, picking up VRTK and Amplify Shader to aid in prototyping. We did not have any technical support at that time, so a lot of the creation process fell onto me, a responsibility I gladly took upon.

03

MAKING THE ASSETS

In the production phase, my responsibilities were to lead the visual collaboration with a 2D design team from our Taiwan HQ, writing style guides, all 3D visual asset designs, prefab setup, and animations.

There were many asset organization and process issues I had to figure out, juggling between design & tech, Cinema 4D and Unity, writing and visual creation. I was really thankful that I had such supportive teammates and management.

04

evangelism

Now that we have a basic offering of UI controls and style guides, we began organizing our design system offerings on a website.

On the writing front, we provided UI guidelines, style guides, and copy rules. Our UI kits were built for Sketch, Figma, Unity and Cinema 4D. There are also marketing images for our executive presentations and newsletters.

Once the website was up and running, we flew down to our Taiwan headquarter to meet with every team, sharing what we have and getting them onboard. A large part of this evangelism was to stress-test how well our design system held up to various product team needs, and we spent a huge chunk of this phase gathering feedback.

05

Thank you

Select the "X" button on the top-right corner to return.