Website+MobileApp.jpg

Particle Design

 

PARTICLE DESIGN

A Design System for Handheld Augmented Reality

A WORK-IN-PROGRESS

 
 
temporaryheader.jpg

Particle is an interactive design system that introduces designers with no 3D experience and developers to the design language of handheld augmented reality.

The problem

The term handheld augmented reality (HAR) refers to augmented reality applications built for mobile phones. Since almost everyone owns a smartphone, HAR has the potential to reach the general public instantly. As a result, many designers and developers are eager to experiment with this relatively new medium. 

However, designing for HAR requires a very different set of design principles and language compared to traditional product design since it involves 3D components and their related attributes. As a designer who’s passionate about mixed realities, I want to create an interactive design system to allow non-AR designers and developers to gain a basic understanding of designing for handheld augmented reality.

MY role

Design System Research & Synthesis, Interaction Design, Visual Design, Unity & ARKit

 
temporaryoutcome.png

In December 2018, I wrote a paper that outlined the design system in details. I’m currently working on making this design system more appealing and digestible. By May 2019, I will deliver a augmented reality mobile app that allows designers and developers to learn the design system in an interactive manner. At the same time, I am also building a documentation website that includes all the terminology and its definition for users’ reference.

the goal

 
processdetails.png

Process Details

design system research & Synthesis

Read the paper here.

I spent 3 months interviewing augmented reality designers, developers and experts to understand the current design workflow for handheld augmented reality and identify pain points.

The language for augmented reality design doesn't exist yet. (Bushra Mahmood, Product Designer at Unity's XR Lab)

There are many ways to start creating a design system. In this case, I chose to create a taxonomy system since a new design language, like any other language, requires a vocabulary. I studied over 35 augmented reality apps on smartphones and dissected each UI component into its attributes.

Users of handheld AR expects the app to work like normal, non-AR apps. (Lilian Warner, Mixed Reality Enthusiast & Experience Designer at McKinsey)

Similarly, designing for AR apps have a few things in common with non-AR apps, especially because most AR apps have a non-AR mode or view. Therefore, when creating the taxonomy, I kept the language of product design in mind. The new design system utilizes the language that is already familiar to non-AR designers & developers.

 

Interaction design

Built with d3.js, the interactive node system distracts viewers from the more important content on the left.

Once I had the content for the design system, I wanted to make it more interactive and appealing since not many people will read a 20-page essay. My first prototype is an interactive webpage built with d3.js (currently live here). I tested this prototype with over 15 creative technologists at Parsons School of Design, and quickly learned that the interactive nodes are too distracting and people don't pay attention to the written content on the right column.

I turned this problem around by focusing on designing the interactive components in augmented reality. I brainstormed and built a few different prototypes to introduce various concepts of user interface components and attributes using Unity and ARKit.

(Left) This prototype tested one of my theories, called the “spatial menu.” I wanted to encourage viewers to stand up and walk around, thus created a human-scale 3D environment. However, I learned that large scale AR overwhelms users, not invites them.

 

VISUAL DESIGN

In order to make the design system appealing to designers, it has to look the part. I refine the visual design of both the mobile app and the website through multiple prototype rounds to make sure they have an educational feel but still friendly and exciting.

View the prototype  here .

View the prototype here.

A simple cube is often the representation of the third dimension. Therefore, I utilized the cube motifs when creating the visual of the products. The cube is part of the logo and is the key element of the menu in both non-AR and AR modes.