Goals
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.
Background 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.
Initial Prototype
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 showing how users interact with UI icons to modify their avatar.
Flowchart for user interactions in AR. Also used to determine what models/icons need to be created.
AR Prototype Implementations
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.
Each model part or image is customizable by changing its behavior on interactions such as tapping.
The AR experience is easily shareable by QR code or by 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.
UI shown on startup of the AR experience.
(From left to right: portfolio link, re-center camera, modify avatar, rotate avatar.)
Shown above are the UI items selectable in AR.
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.
Users can click the re-center icon to have the avatar face their current position.
Currently selected customization sections/items are highlighted blue.
Prototype Iterations
Usability Issues With Prototype 1
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.
Text clarity and icon size/placement can be altered for a better user experience.
Model parts needed to be duplicated multiple times to apply color variations.
Additional options will be provided in future versions such as more clothing patterns, animations based on emotional state and the ability to display the avatar in virtual environments such as an office or park space.
Prototype 2
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.
Updated flowchart to accommodate changes incorporating the new radial menus used for the model base and floating editor.
Comparison of the horizontal menu to the radial menu. With the radial menu customization options are easier to select and are better organized for AR environments.
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.
Main menu items are now placed on a stand below the avatar. The icons on the stand are easier to select.
Profile section information is now presented in card format. The card is more visually appealing and allows for future interactions to be added to clickable areas.
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.
Clothing options were added to provide more ways to personalize the AR avatar.
Future improvements to be made are centered around improving the onboarding experience, fixing UI camera orientation, and adding more display options for user interface such as hiding UI.
Prototype 3
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.
Interactable user interface elements in AR
Tutorial recording showing how avatar customization works.
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 3- 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.
In terms of visual improvements, a 3D diorama was created as a backdrop for the model to provide a more immersive experience. The custom background adds additional context to the AR scene. Users can freely toggle on or off this environment scene. Additional interactions can be added later such as looping object animation.
Indoor Office Environment
Park Environment
Prototype 4
For the final prototype improvements were made to UI indicators.
Each icon is now highlighted blue to give a clear indicator of the currently selected item. Other functionality includes a ruler icon allows users to compare the size of their avatar to real world objects.
Visual improvements include users being able to customize their viewing experience by switching between backgrounds.
New logic for the final prototype. Background hider was changed to a background switcher. A ruler button was added to compare physical objects to the virtual avatar.
Ruler to compare avatar size to other objects
Park background diorama in AR
