Group 636104.png

AR Game for Children in Quarantine - AR Interaction Design

AR for Healthcare

Making physical rehabilitation more engaging for children patients

Group 206 (1).png

Context
UC Berkeley FHL Vive Center for Enhanced Reality
UCSF Children’s Hospital in Oakland
May 2020 - Jan 2021

Group 208.png

Key Contribution
Roadmap planning
User research
Reality Composer prototyping
3D Interaction design
2D Interface design

Group 207 (1).png
Group 209.png

Team
UX Designer: Yuhan Xie, Bowen Wang
AR Developers: Emma Zhao, Ruihan Guan

Tools
Reality Composer
ARKit
Swift

 
 

Why Gamification?

The current physical rehabilitation process is repetitive and tedious. Physicians and nurses designed some non-digital games for children to practice a fixed set of exercises. However, the limitation of indoor space and physical incapabilities indicates a small set of games possible to be played, which can easily exhaust children’s interests and patience.

Visiting UCSF Oakland Children’s Hospital

Visiting UCSF Oakland Children’s Hospital

 

Why Augmented Reality?

Escape & Exercise

The immersive AR experience potentially helps children “escape” from the unchanged physical space and escape from the negative mental state caused by hospitalization and physical incapacity.

Children’s Mental Health

Studies analyzing the impact of specifically Augmented Reality games on children and adolescents with autism spectrum disorder indicate positive activity engagement, positive emotions, and social interaction benefits.(Berenguer et al., 2020).

 

Pitch deck to physicians

 

Therefore, we set our design goal as to leverage AR to gamify the rehabilitation experience to be more engaging for children patients.

 
 
 

User Research

patient (3).png

User Group

Design Goal

Game Requirement

Occupational therapy: use of assessment and intervention to develop, recover, or maintain the daily meaningful activities of individuals

After several meetings with physicians and nurses from the UCSF Children’s hospital, we understand that the gamified experience is applicable to patients who go through occupational therapy, obesity or diabetes exercise, or at-home physical rehabilitation training. It is not applicable for patients who suffered a traumatic brain injury and severe mobility inability. Facing a user group with special needs, the game needs to ensure a safe playground.

(view more research results in this term paper)

 

Game Research

Both “Tracking” and “Board Game“ are good choices. The “Board Game” has a high level of repeatability because of the randomness and potential multi-player mode, which can reduce loneliness and motivate children to play repeatedly. The “Tracking Game” is also a good fit for exercise because there is a model for users to follow. The model helps to standardize the game duration and the user movements, therefore can gather useful exercise data, such as calories, steps, etc., to share with the therapists and parents.

 

Game Structure and Elements

We decided to create a tracking game with a pet raising theme and mini exercise games. The minigames included exercises with the lower body, upper body, and positive facial expressions. Children raise and interact with a virtual pet, and can decorate their environment allowing for creativity and customization. To get more professional ideas, we sought feedback from Professor D'Esposito from the Department of Psychology at UC Berkeley on the cognitive effects. We also had meetings with a game designer from Electronic Art to provide suggestions. Consolidating all opinions, we built the rough game diagram.

 
 
 

Prototypes and Usability Testing

As all of us are new to AR prototyping, we first used 2D prototyping methods(e.g Figma, Hand-drawing) and then moved to 3D prototyping methods(e.g Reality Composer) for usability testing. This “separation“ approach turns out to be inefficient and problematic. As we conduct more usability testings, we are also iterating prototyping methods.

 

1. Main Interaction

Problem: Movement-based interactions create inconsistency between visual and sensory feedback

Board game approach: 360 degree projections

Person stepping on the block -> Collision between Game object(tile) and Camara

In the first attempt, we expect children to complete different exercise tasks based on the blocks they step on through an AR broad game. However, after we built prototypes in Reality Composer. The prototypes show problems.

 
ezgif.com-video-to-gif (5).gif
 

We invited 5 college students for usability testing. One said:

“After getting ready to step on a tile, I actually stepped on the flat ground. “

There is an inconsistency between expected and actual sensory feedback. Imprecision of AR localization and instability of AR object rendering also makes it hard to detect the collision between the user and the AR object. They together can lead to safety concerns. This also leads to another question: how can we quickly create and iterate AR prototypes for Usability Testing?

Solution:

Balancing movement-based interaction with traditional “Tab, Drag & Drop”

Drag & Drop

Movement-based

In the second time, we tried to balance the traditional UI interactions such as tabbing and dragging with the more AR-specific interactions. Children trigger games by tabbing on the button instead of walking on certain blocks. To encourage interaction with the environment and people and create a customizable experience, we incorporate AR Decoration into the game. By clicking on “Decorating Room”, children enter the editing mode. They are able to drag and drop 3d assets.

Since we want to maximize players’ visibility, we prototyped with different visual representations of 3D assets placement. We decided to display shape instead of the actual asset while players decide where to place the asset to avoid blocking the views.

Display the entire AR object

Display the outline

👌 Display the bottom area outline

 

2. Exercise type

Problem:

Exercise requiring both upper and lower body movement can be dangerous

For the exercise game, we tried multiple interaction/AR-compatible exercising models. We combined Figma prototypes and quick Reality Composer demos to test our ideas. With these prototypes, we quickly found that movements associated with both the upper and lower body, especially those that post time constraints can lead to rushed movements and unstable visions. For example, catching fruits before it falls to the ground or aiming at monsters who disappear in 5 seconds.

Solution:

Motion detection for one direction

 
 

We used built-in sensors to analyze the users’ movement trajectories and incorporated animated models into the movement in order to make the game more interactive. In this game, children follow their pets to squat and pick up the treasures.

 

3. Reward System

We didn’t have AR prototypes at this stage, so we designed a storytelling experience with immersive audio and visuals. By interviewing 5 children who are 6-10 years old and their parents, we found: 

  • Children love the collection experience in the game Pokémon Go

  • Children of different ages and gender prefer different themes for the in-door decoration

 

Create motivating and non-addictive reward system

 

We want to create a motivating and non-addictive reward system. Similarly, we thought about using more UI instructions vs tutorials for the mini-game. Due to the concerns of visibility and intuitiveness, we decided to create a first-time tutorial for children to follow their dragon pet. The interactions only include clicking and moving around. We enlarged the fonts and AR objects so it’s easier for children to see while in motion. We also included more positive suggestions such as “Perfect!“, “Almost there, try again!“ to encourage the children. After the game, we would show a Game Summary of successful squats and rewards.

 

4. Player Feedback

In the last game, we expect children to mimic the pet’s facial expressions and head movement(smiling, nodding, shaking head) However, we faced a question: do we want the users to see their own self-reflection? We proposed 2 hypotheses:

  1. Children see pet’s facial expressions, followed by their own reflections in the form of

    1. Camara view

    2. Filtered view (eg. Snapchat filter)

    3. Cartoon figure view (eg. iPhone’s Memoji) 👍

  2. Children only see the pet’s facial expressions

 
protA.gif
 
 
protB.gif
 

I did A/B testing in a graduate Mixed Reality Computer Science class (CS294-Immersive Computing and Virtual Reality). More than 50% of students think that cartoon reflections not only provide feedbacks so users know where they did wrong but also avoid the problem of privacy concerns and limited representations. I recorded four video pieces of screen view and a 3rd person view while playing the game to make the prototypes for A/B testing as realistic as possible.

 

Final Prototypes

Main Scene(Reality Composer + Video Prototyping)

 
 
mainscene.gif
 
Group 211 (4).png
 
Group 214 (1).png
 
Frame 27 (1).png
 

Decoration(Figma)

Children are able to project images onto the real world by decorating virtual objects. We want children to position without blocking, therefore we used 2D shapes instead of 3D assets to indicate location.

 

Squat Game (Reality Composer + Video prototyping)

low_squat.gif
 

Non-obtrusive Guidance
The instruction should be light-feeling, temporary, and fit well into the environment, instead of being obtrusive.

 

Facial Expression Game (Figma)

In the last game, we expect children to mimic the pet’s facial expressions and head movement for a potisive cognitive effect. From the previous research, we decided to use Animal Avatar because it

  1. Provide feedback for performance evaluation

  2. Avoid unsatisfied self-imagery and limited representations.

 

Localization (Development)

When users save the virtual decoration in their environments, we use the ARKit’ built-in function to save the anchor of the virtual objects. The next time when they open it, it will use image-based matching to restore the world coordinates and display the object using its anchor.

 
 

Game center for guardians

Screen Shot 2020-12-26 at 2.44.57 AM.png
Group 225.png

The game allows the player or the guardians, including parents and therapists, to understand the exercise progress.

 
Group 102 2.png

Guardians can visualize children’s exercise history and adjust the visible data according to children’s physical state.

Group 221.png
Group 222.png

Guardians can also watch the video recording of the game to ensure the safety of environment.

 
Group 101 (1) 1.png
 
 
Screen Shot 2020-12-26 at 2.42.01 AM.png

Therapists and parents can select proper mini games type and adjust the duration/intensity of each mini game to fit the children’s physical capabilities.

 
 

Future Impact Measurement

Due to the quarantine, the project was paused in Jan 2021 when the game was only partially developed. In the ideal case, we want to use the following defined success metrics with the targeted user: children going through physical rehabilitation and their guardians(families and physicians).

Usability

Exercise

Mental

landing+%283%29.jpg

Reflection

Design
Working with FHL Vive Center for Enhanced Reality since junior year, I was introduced into ARVR as well as the UX and interaction design field. This project manifested why every design decision needs to be held accountable to user experience and technical constraints. Interviewing numerous children, I realized that technology alone doesn’t make them smile. Instead, it is the human-centered design that enabled AR to expand children’s accessibility to better healthcare.


Development

Frequently synching up between both design and engineering team. I learned about Unity and ARKit basics from two AR projects. Most importantly, I learned to think from the development perspective and optimize User Experience within the technical constraints.

Drawing: Yuhan Xie 

I hope this project sparks new insights for AR applications in the healthcare field, which I believe is valuable as it provides tangible help to the vulnerable group across demographics. I sincerely look forward to the team progress and the potential influence it will have!

👋 If you are interested in AR projects, here’s my previous project on an AR journey that helps children to navigate in a science museum.