Envision Kit - UI System for AR
As AR technology advances, more groups create AR products. Yet still many are accustomed to 2D interface, struggle with the transition to 3D environments.
This poses collaboration challenges between designers and developers. The project aims to bridge this gap by introducing a 3D-specific design system.
Project Type
Independent Study Project
Timeline
2024 Spring
Skill
Interview
Thematic Analysis
Information Architecture
Prototyping
Envision Kit
Project Abstract
Background
The resources supporting collaboration between designers and developers in AR/VR products are limited and not widely adopted. This research seeks to identify factors that hinder effective collaboration in the AR/VR space and develop tools and systems that address these factors to enhance collaborative workflows.
Problem Statement
Many groups transitioning from 2D to AR development face challenges adapting to 3D environments, leading to collaboration and communication issues between designers and developers due to differing understandings and knowledge gaps.
Project Objective
The project aims to bridge the information divide between designers and developers, fostering better collaboration by introducing a design system and tool tailored for 3D environments.
Process
Research
Identify the challenges both designers and developers face in AR product development.
Ideation
Ideate feasible solutions based on research findings.
Prototype
Research
The research was conducted in two main parts: a literature review and interviews. Interview analysis was further divided into four sub-tasks.
Literature Review
To explore the dynamics of designer-developer collaboration, I conducted a literature review using four keywords: Collaboration, Process, Tool, and AR. The review revealed two major gaps in prior research:
Limited focus on the challenges of collaboration in 3D environments.
Lack of analysis on how 3D collaboration differs from traditional 2D interface development.
These findings underscore the need to address these gaps and propose strategies for effective 3D product collaboration.
Interview
01
Interview with Stackholders
Building on the four keywords from the literature review, I conducted interviews with five designers and five developers actively working on AR applications.
02
Familiarization
As I went through the interview data, I extracted standout phrases and organized them in an Excel sheet, then assigned them with codes based on their content and significance.
03
Generating Initial Codes
I reviewed the codes for further refinement and digitized them for easier classification. Sticky notes were color-coded to represent individual interviewees, with assigned tags for each code within the notes.
04
Searching for Themes
I grouped notes with the same code and carefully reread each one, summarizing their content to capture key insights.
05
Defining and Naming Themes
While summarizing the codes, I identified patterns based on their frequency across different codes. This analysis allowed me to define six distinct themes.
06
Prioritizing the Theme
Among the six themes, I prioritized which to address first based on their significance and feasibility. I then selected four key themes to focus on (highlighted in blue above).
Research Insights
Tool Limitation
Commonly used design tools are optimized for 2D interfaces, making it challenging for designers to visualize how interfaces will translate into 3D space or to create prototypes for usability testing and presenting ideas to developers. This, in turn, creates a gap where developers struggle to fully understand the designs and face difficulties developing them from 2D prototypes to 3D products.
Lack of Interaction and Cue Guidelines
The absence of clear guidelines for interaction and cues in AR leaves designers uncertain about feasible 3D interactions, limiting their ability to fully utilize 3D spaces. This results in vague prototypes and instructions, forcing developers to make assumptions during implementation, ultimately deviating from the designer's intended user experience.
Locating Files and Comprehending Workflow
Designers' fast, iterative cycles often mismatch with developers' slower, complex workflows, causing inefficiencies in communication and file organization. Shared standards, like unified file systems and workflow frameworks, are essential to bridge this gap effectively.
Lack of Design Standards
The lack of unified design standards in AR poses challenges due to the discrepancy between pixel-based design tools and metric-based 3D engines. This mismatch forces developers to rely on eyeballing, resulting in inconsistent UI elements, reduced usability, and increased development effort. This highlights the urgent need for standardized 2D-3D design guidelines.
Ideation
Brainstorming
Ideas were brainstormed based on the themes identified through thematic analysis, incorporating questions and limitations that emerged during the ideation process.
Six Box
In this phase, I expanded beyond the initial themes to explore broader considerations within the selected priority areas. Within one minute, I generated three feasible and three extreme ideas to broaden my perspective.
Idea Beetle
The Idea Beetle method is a tool for assessing the strength of an idea and identifying areas that require further refinement. By addressing a series of targeted questions, it helps validate the idea's feasibility and effectiveness while encouraging diverse perspectives. I applied this methodology to evaluate and finalize my ideas.
Some of the key questions I addressed include:
Who is it for, and how does it benefit them?
What gaps exist in current UI libraries, such as missing integration variables or cues, and how does this idea address them?
How does it differentiate itself from existing solutions?
What does "usability" mean for designers, and how is it achieved through this idea?
Solution
After conducting thematic analysis and multiple ideation steps, I finalized a solution: a UI system specifically designed for 3D environments.
This system bridges the communication gap between designers and developers by providing a centralized platform for sharing critical information necessary to create 3D products. It ensures that essential details are not overlooked during collaboration, offering standardized guidelines and tools tailored to the unique requirements of 3D workflows.
Design System
Information Architecture
I began by developing an information architecture to identify the key types of information needed to bridge the gap between designers and developers when building AR products. This process provided a clear overview of the final product's structure and helped determine the specific content each page should include to address the needs of both designers and developers while supporting the creation of seamless AR experiences.
User Journey Map
A user journey map show how designers and developers can utilize this design system within their existing tools, reducing learning curves and effectively addressing collaboration challenges without the need to learn new software.
Designer:
Scenario: After finishing the wireframe, the designer starts the user testing of the new AR product for cooking
Objective: Have a quick mid/high fidelity prototype for user testing and hand on to developers
Developer:
Scenario: The designer finalized the interactive prototype, and developers started development.
Objective: Speed up the UI development process to allow developers to focus on functionality implementation.
Learnings & Limitations
Learnings
Despite the rising interest and demand, building 3D products poses challenges for both designers and developers due to the different nature of the building process and approaches required to make the product accessible and usable for 3D products. Research indicates that the challenges faced when building AR products differ significantly from those associated with conventional 2D interfaces.
These challenges derive not only from the different usage of tools but, more importantly, from the different perceptions each group has about 3D space and the information gap regarding how 3D interfaces are placed and utilized within that space. In short, there is a need for design standards that can help both designers and developers align their understanding and approach to 3D interfaces.
Through this research, invaluable insights were obtained about the collaboration between designers and developers and the requirements of of 3D interfaces.
Limitation
User Testing
The current UI kit has not been tested by users. To determine what kind of information the UI kit should contain to reduce the information gap between designers and developers and improve collaboration, user testing should be conducted.
Software Tool Compatibility
Although this UI system aims to bridge the information gap, it cannot solely resolve the collaborative challenges faced by designers and developers in the 3D product development process. There must be compatible software that can integrate with the UI kits to fully utilize them during the building process. This underscores the urgency of developing tools that can leverage the design standards established through the proposed UI system.