top of page

UX Portfolio

Avatar AR Project

Customizable Avatars in augmented reality using components from the Digital Avatar Project

My Role

Web and Product Design 

Year

2022

Main Objectives 

This project is part of the digital shopping project and is an extension of an avatar customization website.

3d avatars are increasingly used for platforms such as social media, virtual assistants, and digital worlds. They provide a digital representation, allowing for immersive experiences for users.

The primary goal of this project is to create avatars that represent different users within an AR environment. This is achieved by providing a variety of customization options which can be changed over time. This provides users with the ability to create their own personal brand through the avatars created.

Avatars needed to give off a warm and inviting appearance for new users. This is accomplished by providing users with customizable components composed of rounded shapes with warm, high contrast colors.   

Avatars can be used by both consumers and retailers. For retailers custom avatars can be created that promote products or advertise a sale in effect. The avatar created can also represent the company branding.

My Role 

I was responsible for web and XR design of the avatar customization interface. 

I also modelled the avatar parts and conducting user research and testing to design the AR user interface.

Features of the AR experience:

  • modify the background for the avatar in AR

  • modify various facial and hair features for the avatar

  • modify various clothes and patterns of the avatar 

User Research

Platform

 

After developing the avatar customization webpage, research was conducted into finding how to allow users to create avatars within a real environment. Emphasis was placed in determining how to adapt the Web avatar customization interface to an AR/VR environment. Determining social media sharing features, and community features was also a priority when searching for a platform.  The AR/VR platform would provide an immersive environment where users can create avatars for testing, commercial or recreational purposes.

The objective was for users to design a “toy” like model within a realistic environment. AR and VR platforms were compared in areas such as features, accessibility, and availability. 

AR was chosen due to being readily available on mobile devices, being easy to setup through QR codes or links and being more intuitive for new users to navigate. Customizing avatars within AR space gives immediate visual feedback to users and encourages continued usage.

Prototype Objectives

The AR/VR required transferring existing 2D UI (menus/customization options) for use in 3D space. Other assets such as 3D models were examined for compatibility within an AR environment.

 

Since the avatar is projected onto a physical environment, sizing, object placement, and visual clarity needed to be considered. Since users are navigating a smaller fixed space, context sensitive menus that could be toggled were also needed. Finally, an interaction method needed to be determined for selecting user interface elements.

UX Design

At the start of the design process a  flowchart modified from the web shopping project  was used as the basis for the prototype.

 

The flowchart assisted in determining the interaction order and what assets needed to be created. This workflow was modified with each project iteration with the current version adding in a togglable profile section and links to the avatar project overview page.

 

The figma prototype was created to determine what actions users would take to customize an avatar within AR.

AR Prototype Implementation

There are various AR products that offer different features, scalability, and connectivity options. Adobe Aero was chosen for its ease of use in designing interactions, free availability for mobile and tablet users, and interoperability with models and UI from other projects. As well, completed projects are easy to distribute through QR code or a generated link.

Anchor Points

Initial assets imported into Aero need to be resized/repositioned with the anchor point. (The anchor point is where to position and orient the model and UI.) Currently Aero lacks alignment and “smart position” adjustment tools so elements are roughly aligned to one another.

Since Adobe Aero does not allow for programmable scripts various interaction triggers need to be applied to all the imported UI and model pieces. (An interaction trigger is an event that occurs when an action such as tapping an element occurs.)

Interaction Triggers

Since the UI needed to take up less screen space, triggers were instructed to hide or show components and customization sections. For example, when a customization item such as short hair is clicked, the existing hair type needs to be hidden on the model. 

Additionally, a “blue selection box” is displayed around the selected item to let the user know what is being customized. This selection box “moves to” whatever the currently selected customization item is.

UI Placement and Sizing

Minimal UI is shown for the starting layout. Within an AR environment there is limited space to move around, with interactable elements needing to be placed within close proximity to the model.

For this project a row of icons is shown above the avatar. When a one of the icons in the row is clicked a sub menu is displayed to the left or right of the model that provides additional options.

Camera Options

On web, interaction is restricted to a 2D plane. Since Aero projects assets over a 3D space there needed to be a way to recenter the camera to face the user. With flat UI users can only view the project clearly from certain angles. A clickable button was added to the main menu that centers the camera back to the anchor point.

Final Prototype

Navigation Improvements

With the previous prototype, users were satisfied with the navigation system and features provided. However, some users were initially unaware of what certain features did such as the profile section. In this version emphasis was placed on providing a simple onboarding tutorial for new users, further refining the UI, and improving visual fidelity.

The second prototype provided users with the ability to create their own custom avatar within AR. Users could customize various sections of the avatar, view their avatar’s profile information, and manipulate the model’s position. While the interface was simple to use, some users were not sure of the purpose of icon such as the “center model” button.

An AR onboarding walkthrough was then created to explain the main features of the AR customization and the purpose of UI components. The onboarding is accessible through a help button and provides an instructional walkthrough via an annotated layout of the interface and step by step feature demonstration videos. Videos can be replayed, and descriptions of features are kept succinct to not overwhelm new users.

Prototype 2 Iteration

Following testing, Users expressed navigation and visual clarity issues with the previous prototype. UI elements were too spread out to select easily and it was difficult to tell which customization item was selected from a category.

To resolve this issue the menu layout was redesigned from a row of menu options to a radial menu. Radial menus are more compact and require less movement in the AR scene to locate items. More information can be conveyed visually by having all the customization items located within the ring.

The radial menu is composed of a center ring which allows you to hide and show the overall radial menu. Around this ring are the customization categories separated into quadrants: Hair, Eyes, Mouth and Clothing. Clicking one of these categories will show the respective customization items on that quadrant. Individual customization items are more spread out within the ring for easier selection on screens and to prevent accidental selection due to items overlapping each other.

Visibility of selected customization items was improved by showing a circular selection ring and removing the small text descriptions which were too hard to read. The new selection ring avoids previous collision issues with the customization icons that had caused visual disorientation due to image flickering. Text descriptions were removed as the icon’s purpose was clear to users.

Prototype 2 Visual Improvements

The position of main menu options (rotate, center camera, view profile) were relocated to a stand below the avatar. This frees up room for the radial user interface in the scene and allows for users to select menu icons more intuitively.

Visual improvements were made throughout. A trading card was made to display the information, providing a more distinctive experience for users. Various clothing options were added such as Christmas themed shirt, a luxury branded shirt, and a striped casual shirt.

Visual Improvements

Other improvements to the project include the UI being converted from 2d images to 3d geometry. When converting to 3d, icons were placed at a 30 degree angle to be easier to select at different angles. Another benefit of using 3d models instead of SVG images is that the AR experience loads faster due to reduced file size.

 

3D Dioramas

​​

In terms of visual improvements, two 3D dioramas were created as a backdrop for the model to provide a more immersive experience. The custom background can be switched between a living room or a park environment. Each environment provides a sense of scale and context to the AR scene. For visual clarity users can freely toggle on or off this environment scene.

Prototype 1

Usability Issues With the First Prototype

While Adobe aero is quick to prototype and test, there were issues when it came to importing models into the scene. One of the roadblocks was the inability to change material/visual properties of the model and UI once they are imported. Model parts such as clothing needed to duplicated multiple times so that different color options could be applied.

For user testing the first version of the prototype ran smoothly, with no interaction bugs on mobile and tablet devices. However, there were various issues when it came to visual clarity and layout size. In low-light environments it was hard to see fonts due to the low contrast. In addition, the selection box could also be made more noticeable to users. While the UI is more compact compared to the web version- it is still too spread out across the scene. 

Scaling the UI or models further and using more compact radial UI will help solve this issue.

bottom of page