Google | Tilt Brush VR

UX Designer / Lead QA

Source: Tilt Brush by Google

 
 

CLIENT: Google | Daydream

TIMELINE: December 2019 - March 2020

TEAM: Patrick Hackett, Paul Du Bois, Tim Aidley, Mach Kobayashi, Jon Corallejo

SERVICES: UX Designer / QA Lead

TOOLS: Unity, Figma

Case study

Tilt Brush by Google is a VR application that enables people to paint in 3D space with light. It introduces not only a unique spin on digital art creation but is also one of the most sustainable way to paint.

Tilt Brush won the hearts of thousands of VR artists and hobbyists around the world bringing Google two Gold Lions for Innovation and Digital Craft from Cannes Lions in 2017, as well as other impressive awards. 

I joined the team for its last public release as a QA Lead and UX designer, and helped refine UX for three large features - Camera path, Google Drive backup support, and Sketchfab support. I’ll briefly outline the UX problem/space for the Camera Path tool.

 
 
 

Heuristic evaluation & problems

The Camera Path feature allows Tilt Brush users to create paths around their 3D artworks, and then record them as videos. It was a wonderful feature to work on for two reasons. First, I came in with some background in filmmaking and cinematography, which made it easier to work with user mental models around filming a VR scene. Secondly, skills in Adobe Creative Suite came in handy, because much of the feature had to reflect mental models of working with Adobe Creative Suite tools like Pen and Paths tools. 

I started by doing a heuristic evaluation of the UX flow and observed anything that would not match user expectations of “video production” process or creating paths in other creative apps.

Camera Path Feature: Camera Preview Screen (to the left) and Camera Path panel (to the right) with Add Anchor point, Delete Points, Add Direction Point, Add Speed Point, Add Zoom Point Tools

 
 

1. Naming Camera Path points

There are four types of points users can add in the tool - Anchor point, Direction point, Speed point, and Zoom point. Originally, Anchor point was called Position point. I suggested calling it Anchor point because it reflects the user's mental model better - Photoshop, Illustrator, Premiere Pro, Final Cut Pro all use this name, and our VR artist design persona is already familiar with this word. Similarly, Zoom point used to be called FoV point, which was changed to Zoom point as it sounded simpler and more informative (ex. user need is to “zoom in/out”). 

Camera Path panel with the renamed Add Anchor point tool

Camera Path panel with the renamed Add Zoom point tool

 
 

2. Deleting many points at once

Working with different types of points turned out to be one of the most challenging parts of the feature. Point deletion was especially tricky. Prior to my UX assessment, users were not able to delete many points at once. I recommended enabling them to do so because this was likely to be the frequent use case, and we implemented this mini-feature. This was also consistent with the existing Tilt Brush functionality - Eraser tool - that allowed users erase multiple brush strokes by continuously pressing the trigger on the controller. 

3. Closing a circular path

Initially, this feature didn’t allow for closing a circular path. I predicted that many users would want to stage shots around their artwork in a closed circle, and suggested we allow them to do that. We implemented the feature, and based on some user reviews from Tilt Brush community, people do actually make videos with closed paths.

4. Making Record button red

One, two three, camera rolling! There is a greyed-out Record button on the camera panel if the user hasn’t started recording yet. Initially, it stayed greyed-out when the recording started, and I suggested changing it to red. This way it reflects the user's mental model better - when you roll a camera in a real world, it displays a red circle. Overall, it helped achieve one of VR illusions - the so-called “plausibility” illusion.

Camera Path Panel with non-active Record button and a Preview screen with Video playback timeline

Camera Path panel with the active Record button

5. Having more control over the Preview screen

Initially, a Preview window on the Camera path panel didn’t have any controls. Once a user selects to preview a video path, he/she won’t be able to fast forward and fast backward. I advocated for implementing a video playback timeline on the Preview screen that allowed users to have more control over the feature. This especially came in handy when previewing long paths and saved users time.


Usability Testing

After the initial path of discovering UX issues and implementing changes, we still had some questions unanswered.

How easy will users find the Camera Path feature? How easy will it be to manipulate points? How intuitive is recording a video?

To answer these questions, we conducted an internal usability testing session, which I lead with much excitement. We had with four main goals for it:

  1. Observe if users are able to complete relevant tasks using the Camera Path feature.

  2. Learn about possible usability problems associated with the new feature.

  3. Learn about user satisfaction with the new feature.

  4. Validate some of the current feature requests and bugs filed for the features and discovered during the UX design review.

During the user research session, I asked participants to perform basic actions with the Camera path and observe how they did it. For example, one of the tasks was to zoom into the scene in the beginning, and zoom out in the middle of the scene. This task helped us understand if users could easily find a Zoom point and figure out that they need to add two of them, one in the beginning and one in the end. We also asked users a couple questions that helped us evaluate the degree of user satisfaction with the feature using a Liker scale.

Mindful-Product-Design-by-Monica-Ma-Google-Tilt-Brush-VR-project.png
 

Key findings

1. Deleting points is not easy

User research helped us validate some of our hypotheses about interacting with points and also discover new potential problems. For example, 4 out of 5 users found it hard to delete points. They expected to be able to delete a point by tossing it away, similarly to how they would delete some objects in Tilt Brush. Also, for the points that could be set to have “tall” stems - like a Speed point - people expected to be able to delete them by hovering over the top, which was not possible. We successfully addressed this problem after the user research session.

2. Adjusting points is not easy

Also, we observed almost everyone stumble across the problem of adding more points to an existing path instead of adjusting an existing point. People seemed to be confused whether they should be using a grip or a trigger on their controllers to adjust points. (Trigger would add a point, while the grip would adjust it). Unfortunately, solving this problem would have required lots of design and technical changes, as well as time and resources, so we hoped that users would learn this interaction fast.

3. Users expect to add a second Camera path differently

Another problem that came up involved adding a second Camera path. Due to technical and design limitations, the Add path option was hidden inside the Select Paths menu. When asked to create a second path, people intuitively started adding another Anchor point. This discovery helped us address the issue by enabling users to start a new path by simply adding another Anchor point to the empty VR space.


 
 

Product launch

Camera Path feature turned out to be one of the most beloved new features in M23, and we have been continuously getting positive feedback on it in the Tilt Brush forum. I wanted to create a video that will reflect my own mental model of how hobbyists might use it - by expanding on other artist’s sketches, adding their own elements, and stitching a couple camera path videos in a program like Final Cut or Premiere Pro. Below is a video of my artwork in collaboration with another VR artist Lisa Padilla (her Mushroom Forest was mesmerizing). 

 

 

Project takeaways

I learned two main lessons after this project. Lesson one is VR specific and has to do with the “plausibility” illusion I mentioned before. In other words, when designing for VR, skeuomorphism can be very useful. The second realization is this: if time, budget and scope don’t allow for in-depth user research, do a “ramen” user research with the internal team who haven’t seen a product or a feature before. Often those will be representatives of the design persona who can help us uncover most usability issues.