FunArt

Increasing Young People's Interest in Art Museums with AR Experiences

Time

Dec 2019 - two weeks

My role

Front-end Engineer

UX Designer

Tools

JavaScript(JQuery) | HTML | CSS

My team

Haojie Chai - Visual | UX Designer | Exhibition Designer

Karl Liu - Exhibition Designer

                           

Professor

Scott Minneman

Michael Bartalos

Location

California College of the Arts

Introduction

In 2019, we created a mini-exhibition, an immersive AR experience, which targeted young audiences to let them play and have more fun with museum art pieces.

For this project, I wanted to show not my traditional Visual or UX design skills, but how to learn new skills quickly, how to master front-end code, and how to apply the coding skill to regular design projects.

Motivation

Young people aren't interested in classical art.

As a student with an undergraduate degree in art, one of the most frequently asked questions when spending time with friends from non-art backgrounds is How we think of art museums. Many of my non-artist friends have told me that classical art, or serious art, is too esoteric and difficult to understand, and that they find art boring and far away from them. So they find going to art museums very boring.
How can we enhance the museum experience so that people who don't know anything about art will become interested in classical art?

Whom Are We Designing For?

Who are they?
Persona #2.png
What they want?
Have fun
Aha moment
Compelling
Play

Inspiration

The Mona Lisa Parody 

on the internet

Web 1280 – 1.png

The inspiration for our project came from the everlasting Mona Lisa parody game on the internet. People like to spoof the Mona Lisa as various characters, putting hats on her, putting mermaid tails on her, and adding beards to her. People are always happy to spoof the traditional and serious Mona Lisa. We thought, wouldn't it be fun if we could also let younger audiences experience this collision of traditional and modern, serious and hippie, in a museum? With a game similar to the spoof of the Mona Lisa, can we get young people interested in traditional art?

Exploration

What kind of format would make people more engaged with?

What kind of format are we going to use that young people will find the art museum fresh and entertaining? We thought about the forms of interaction that could be used in museums, and compared the pros and cons of each to see which could be more engaging for young people. 

Contextual Research

After contextual research, we found young people are using their smart phones to do almost everything in the museum. They use mobile phones to take photos, document the exhibition, search for information, and etc. The smart phone provides an one-stop-shop museum experience for audiences.

Therefore, we want to combine the Monalisa Parody game with the mobile phone App.

Prototype

How could let audiences have real immersive interaction?

Coding experiment for showing AR experience
Screen Shot 2021-02-21 at 11.32.47 PM.pn
Screen Shot 2021-02-21 at 11.36.16 PM.pn
Screen Shot 2021-02-21 at 11.37.54 PM.pn

If I want to make a real AR system, it will be really complicated to customize. I think about what we want to realize, and separate the problem into those steps:

---------------->

Umbrella Question:

How might we let audiences interact with the art pieces in museums realtime on their phone screen?

---------------->

Sub & sub - sub questions:

1. Audiences can Play Parody game on the phone screen

    1.1 Audiences can have different objects to play with on their phone screen

    1.2 Audiences can move those objects by touching and dragging

    1.3 Audiences can play this game on real art pieces( Showing on their phone screen)

           1.3.1  Audiences can use the camera to shoot and show the art pieces on their phone screens in realtime.

           1.3.2  Audiences can drag different objects and put them on the art pieces ( realtime )

After rethinking my own coding skill sets and research the coding, I find that using front-end coding(HTML/CSS/JavaScript) and the JQuary library can make solve those problems and make it become a real interactive prototype!

---------------->

Solutions:

1. Audiences can Play Parody game on the phone screen

    1.1 Audiences can have different objects to play with on their phone screen

           HTML/CSS

    1.2 Audiences can move those objects by touching and dragging

           JQuary library (JavaScript) - Touch event support

    1.3 Audiences can play this game on real art pieces( Showing on their phone screen)

           1.3.1  Audiences can use the camera to shoot and show the art pieces on their phone screens in realtime.

           JQuary - cameraView

           1.3.2  Audiences can drag different objects and put them on the art pieces ( realtime )

           HTML/CSS

View my code on Github

User Tests

First, we ran a small group of user tests before the final exhibition. we got some useful findings:

---------------->

Pros:

1. They want to try the game!

 2. They felt it was so fun to play with the art pieces!

Cons:

1. If we didn't explain it, audiences would not know what it is and didn't know how to play with it.

2. Due to the technological restriction, we were not able to make the game experience more fluently, it might need more extra support from exhibition design.

---------------->

Reflections & Improvements:

1. We need to design visual guidance for audiences to let them know what is FunArt ( our interactive game).

2. We can show some examples to let audiences have a clear insight of outcomes.

Also, we got some surprising findings during the user tests:

---------------->

We found that there was a side function that our users were just use our App to recreate art pieces, but also they pretty much liked to use it to create Memes of each others! 😆

Our audiences were pretty enjoy it!🤪

Final Exhibition! 🎊

IMG_7169 2.HEIC
poster.jpg
1.png

Finally, we ran our FunArt exhibition at California College of the Arts!

Thanks to my team members - Chai & Karl, who design the Visual guidance and exhibition space, which highly improved the immersive experience!

What's more, we also create the bullet chat function, and the AR story telling function, to let audiences understand more about the art pieces' stories.

Let's play! 

Finally, let's play with art pieces together!

∙ Use your camera to scan the QR code here 👉

     or, put this link into your phone browser:

https://serenexiaopu.github.io/camera-app/part-3/

Tip: Don't forget to allow your browser access to the camera!  

IMG_4058.PNG

Thank you