AR Designer

Year: 2018-
Role: 3D UX Designer
Mikei Huang 2018 Auggie Awards Finalist

Introduction

AR Designer is a simple, web-based platform for creating and publishing immersive augmented reality content. Developed by Envrmnt, Verizon 5G Lab’s XR organization, AR Designer helps users create immersive AR experiences with easy drag-and-drop interfaces and realtime previewing on mobile devices.

AR Designer was selected as a finalist for the 2018 Auggie Awards Best Creator & Authoring Tool.

Initiative

As Verizon’s 3D UX Designer, I work with a team of 3D Artists, Designers, Developers, and Product Managers to define and develop new features and functionalities for AR Designer.

One of the product features that I worked on as a feature lead is Upload Manager, a new system for users to upload multiple 3D models easily and check for quality and compatibility.

The Challenge

Before the introduction of Upload Manager, the v1.0 uploader did not support multiple file upload. In addition each upload required 6 steps to complete. As a result, the v1.0 uploader while usable, was extremely time-consuming for users.

Version 1.0 Uploader

To address the above issues, I set out to define the goals and constraints for a new upload system.

Design Goals

Reduce interaction cost for uploading multiple files, improve upload usability, increase speed and productivity.

Constraints

3D models take time to process and render online. Missing textures, excessive vertex counts, or lack of engine support can cause upload failures to occur.

User Interview

To understand the users we were designing the new upload system for, I interviewed v1.0 users, summarized key findings, including their typical workflow, goals and frustrations, and condensed this information into a generalized user persona.

Insights

The v1.0 uploader didn’t satisfy user needs. Users could only upload a single file per upload, and they couldn’t exit the upload modal to multi-task until the upload was complete. One user mentioned that she was able to “cheat the system” by opening multiple tabs in her browser in order to upload multiple files. From conversations with our users, our team understood that a new design for the upload system was indeed a very high priority.

Usability Test

The user interviews gave the team qualitative feedback on the v1.0 uploader. But to pinpoint exact usability issues we also needed to collect quantitative data from users in the form of usability testing. I conducted usability test sessions with participants that represented our target demographic. Using System Usability Scale I was able to quantify ease-of-use then compare the score with a new design.

During the test session, I asked participants to complete mini-tasks that were upload-related, and measured how long each task took in seconds. For example, users were asked to upload an animated 3D model, upload a static 3D model, and upload 3 models and identify which one is missing texture.

Interaction Cost

Taking into account user pain points from the interviews and usability tests, I examined the interaction cost for the v1.0 uploader, and minimized user clicks by reducing the steps needed to upload multiple files.

Problem

User uploads a single file per upload session. To upload multiple files, user needs to repeat the upload process one-by-one, increasing interaction costs.

Solution

Design a centralized hub for uploading media, reducing interaction costs and helping users manage all their uploaded files.

The Upload Manager modal is a mini-dashboard that handles all user file uploads and gives users an at-a-glance view of the status of all uploads.

Overview

Upload Manager, current version

Anatomy

Minimized Mode

The Upload Manager modal is designed to be versatile, and can be expanded/minimized anytime. Instead of looking at the progress bar waiting for a file to finish uploading, users can now hide the modal and continue working on other aspects of creating an AR experience.

Wireflow

Design Validation

To validate if the new design meets our initial goals, I conducted another round of usability test sessions with the same participants and tasks, and compared the result with the previous test. Overall, the average time it takes for users to upload multiple files decreased, while the SUS score increased.

Trade-Offs

Although Upload Manager increases the overall productivity and efficiency of uploading files, there are also some design trade-offs. One of them is the less-visible UI for 3D model animation selection.

In v1.0, an additional modal forced users to select an animation type before uploading each 3D model file. In Upload Manager, users are presented with a modal containing a queue of 3D model files. Next to each file, users must select an animation type before the file can upload.

The compact design of Upload Manager made the selection UI less visible and scannable. During usability testing, some users spent more time at this step compared to other steps in the upload process. Users needed to take time to parse all the information available to them in order to make decisions for each item in the queue.

v1.0 uploader animation modal
Upload Manager animation selection modal

To minimize confusion and reduce further interaction costs, the team is automating detection of animations embedded in 3D model files, assigning an animation type without user input.