Ly Vu

product Designer
HomeWorksAboutCareerCOntact
Close
HomeWorkAboutcareerContact
VR Design

Artemon 

Bringing a Compelling Experience of Art that May Be Otherwise Inaccessible.

Bringing a Compelling Experience of Art that May Be Otherwise Inaccessible.

‍

Project overview

There are various constraints in a physical gallery exhibition experience. Even if you’re an avid gallery-goer, it’s easy to miss so many exhibitions out there due to the lack of display space and limited showtimes. If you have accessibility needs such as vision impairment support or wanting to look at artwork at an eye-level while sitting in a wheelchair, they are not accommodated right now at most art galleries. That’s how Artemon, a virtual art gallery, was born - a product of Banging Rocks and the Federation of Canadian Artists (FCA).

‍

Client:
Banging Rocks
Year:
2019
My Role:
UX Designer
Tools:
Sketch, Illustrator, Invision, GoPro VR
See Prototype

objectives

Business Goal

Acquisition of users to bring art to the public in an affordable and accessible manner.

User Goal

Explore and interact with art more intimately to obtain understanding and a sense of belonging in the art community.

Project Goal

Invoke a sense of excitement and curiosity via interactive navigation of exhibits and the art exploration process.

Research & Discovery

VR Space and The HTC Vive 

VR has been around for not too long but it’s been leaving marks with many useful applications. This is a paradigm of immersive 3D content with sound, touch, depth, and emotion, making even the most novel 2D screen experiences boring and dated.

Before this project, our team members have only designed for 2D web and mobile screens. We were excited to embrace the challenge and take it as a learning opportunity.

We worked with the HTC Vive, one of the leading VR headsets in the market. The HTC Vive comes with a headset and two hand controllers.

Image result for htc vive

‍

Understanding How People Interact in VR 

Before we start planning and designing, we must understand our users and the issues that may come up while they experience VR.

Physiological Comfort

Motion sickness is caused by the disparity between what one feels and what one expects to feel. We need to consider the following matters in our design decisions to help users avoid motion sickness in VR:

  • Head tracking
  • Use control of movement
  • Use constant velocity
  • Grounding with fixed objects
  • Brightness changes
Environmental Comfort

Scale is an important factor in VR, just like in the physical world. When the space is too small, large, or high, people can easily get uncomfortable (claustrophobia/agoraphobia/vertigo). We need to make the environment realistic and welcoming.

Ergonomics

There’s a certain comfortable range of motion zones when users wear the VR headset. We don’t want to create neck strain and unhealthy habits for the users while in VR space.

‍

A Field Trip to the VR World 

The best way to learn about VR design…is in VR!

I’m lucky that my partner is a Game Developer/Teacher with a couple of years of VR project experience. We have an HTC Vive set up at our home. Our whole team came over one day to try out various VR applications. This was the first time for some of our team members to experience VR, especially with the HTC Vive and its controllers.

We also went over to our client’s office to learn more about some other VR applications that are relevant to our project.

It took all of us just a couple of seconds to be immersive in the VR experience and forget about physical reality! We had some fun playing in the VR space to learn about spatial design, controller functions, teleportation, and different ways to bring a sense of discovery in various VR applications.

‍

Getting Lost in the VR World...Again!

We looked at what’s available on Steam VR (the iTunes of games and VR applications for HTC Vive device).

There are already many VR applications and many of them are games. However, there are not many art galleries or museum types that are available publicly. Some of the applications are also paid which we didn’t have access to.

From our Google research, it seems that there are several VR applications but they are private within the art galleries. Some examples are Synthesis Gallery and VR-All-Art.

‍

Let's Get Some User Insights  —  General Audience

We sent out a survey targeting the general audience to learn more about the public’s expectations and experience with VR and art galleries. We got 27 responses. Here are the main insights that helped guide our designs:


‍

 Let's Talk to Our Users  —  Specific Artists, Architect, Gallery Goers 

We also interviewed a few artists. These are people with more art knowledge than the general public. They have deeper ways of appreciating and connecting with art pieces.

‍

Finally, we interviewed an architect to get a better understanding of spatial design. We asked questions related to creating a safe and inviting environment, yet making it realistic, and to help people avoid claustrophobia.


Framing the Problem

Even though we’re designing for VR, the standard design principles and processes still stand. We still need user personas, conceptual flows, wireframes, and an interaction model.

Analyzing the Data Points

We analyzed our survey/interview data and grouped them to find patterns. We found valuable insights on:

  • Desirable gallery environment
  • Explore/discovery features — how people usually search for artwork
  • Interactive features — interactions our audience would like to have in a VR art gallery
  • Their motivations
  • Their frustrations


‍

What Do They Really Really Want?

We must understand the users that we’re designing for. We first looked into three user categories: General Gallery Goers, Artists, and Art Educators. For the 3-week time constraint and MVP delivery, we decided to focus mainly on the General Gallery Goers with some features that would appeal to Artists.

‍

Penelope here represents the season gallery-goers. She is a knowledgeable appreciator of the art. Her goals are to achieve a whole new level of art understanding and to check out the specific art pieces she has in mind. What’s more important is her pain points: it’s difficult for Penelope to visit her favourite exhibits due to time and distance limitations.

Now meet Sean, an art student at university. His goals are to expose himself to all sorts of art styles and to learn more about other artists’ artworks to improve his own. For Sean, what frustrates him the most about art galleries is that he doesn’t know how to better appreciate the exhibits with such little information provided. He also hates that he cannot stand up close to better see the art pieces. He needs to scrutinize and inspect the art to see the details such as the brush strokes, so he can learn more about it.

‍

What Led Them to Our VR App?

To help us empathize further with our two personas and their needs, we created the user scenarios for Penelope and Sean:

Penelope:

Penelope visits her local art gallery on the last day of the Van Gogh exhibit, eager to see The Starry Night on display. After getting terribly lost in the gallery, she finally arrives at the correct place and discovers many visitors being disruptive and taking selfies in front of the paintings. As she gazes at the Starry Night, she wishes could learn more to understand it properly. Penelope knows that she’ll have to go home later and use Wikipedia to get some more background knowledge. Penelope learns best by engaging multiple senses.

Sean:

Searching for inspiration from accomplished oil painters, Sean hears that the local art gallery has a great collection of oil paintings. He pays $20 to enter the museum and wastes half an hour trying to find the exhibit. When he finally gets there, the paintings can only be viewed from behind a white line and they’re sadly all pieces he’s heard of before. Sean is unable to scrutinize the actual technique on the canvases and wishes he could have been inspired by some new artwork.

 

Imagining the Ideal Experience

We want our users to start the journey with a sense of wonder since the moment they put on the VR headset. As they navigate through the space and possible interactions, their mood should go up with straightforward recommendations. They should feel curious through the exploration process with clear signage and guidance. The art interaction needs to be joyful and immersive. They will leave the space feeling connected to certain art pieces and want to tell their friends about it.

 

Creating An Interaction Model

Here’s a simplified version of the user flow with the main spaces and interactions. This flow is aiming to help our two personas, Penelope and Sean, achieving their goals of gaining connection and understanding of the art pieces through interactions within the VR art gallery.

‍

Users would enter the lobby to discover art pieces through browsing/searching, view an exhibition, and interact with an art piece. Similar to the navigation bar of an app/website, the Menu Interactions and Art Interactions are accessible from the controllers at all times.

This is the complete user flow of how Penelope and Sean would navigate through the VR art gallery.

When a user is in front of a painting, they can interact with the art piece through the controllers. The left controller allows the user to access various features such as reading about/hearing background info, commenting on the art piece, or recreating the piece with paint tools. The right controller supports hand motion functions such as picking up the art piece and adjusting the lighting.

 

Defining the Must Have Features

The first set of the feature list is for the space. All the Must-Have features are necessary for the space to be functional:

  • Lobby Room, Gallery Rooms, Art Pieces with Description — to replicate a realistic art gallery environment.
  • Navigation Path, Teleportation — to help users navigate through the space between different environments.
  • Direct Search, Browsing Categories — to aid with art exploration and discovery phase which is very essential from our research.

From the Nice-to-Have list, we included the following:

  • Room Map — to help users orient themselves in the space.
  • Colour Blind Mode and Audio Mode — to provide accessibility support for the ones in need.
  • My Account and My Saved Items — to personalize the user experience with their journey and favourite art pieces.

‍

The second set of feature lists is about the art interactions our users can do within the space. To help the users have a more engaging experience with the art pieces, we have Background Info with Audio for more info about the art pieces and Pick up the Art Piece to help users have a closer look at the art pieces from various angles.

We went with the following features from our Nice to Have list:

  • Art Creation Time-lapse — to learn more about how a painting was created, Penelope can play this time-lapse video.
  • Art Recreation — we got the inspiration from Google Tilt Brush. This feature will help artists like Sean to learn more art techniques and the creation process by doing it.
  • Social Comments — to help our personas Penelope and Sean get more connected to the art community.
  • Lighting Adjustments — to help Penelope and Sean better see specific details of an art piece.

At this point, we’re not able to cater to the curation of one’s own space which would be helpful for artists and curators.


‍

Design & Iterations

Similar to designing 2D interfaces, we use size, contrast, and depth to denote hierarchy. In VR, size is based on the distance between the user and a piece of content. Therefore it’s important to understand the scale of content and appropriate viewing distance.

We also have to consider how people interact with the interface in a VR environment. Instead of a mouse on a computer, or fingers on mobile devices, users have the hand controllers with various buttons. We utilize known patterns that people have learnt to use, such as tapping, swiping, and clicking.


How Do We Prototype for VR?

Similar to designing in 2D, paper prototyping is the fastest and cheapest tool to test our ideas.

We started with designing the environment: the lobby and the art gallery. We followed the equirectangular drawing to be able to show that in a 360-degree view in the GoPro VR Player.

Lobby - 1st iteration
Lobby - 2nd iteration

 

Assigning Functions to the HTC Vive Controllers 

As the interactions in VR (with the HTC Vive particularly) are very different, we have to first assign different functions to different buttons on the Vive controllers.

Teleportation is a native function in most VR applications for the HTC Vive. We have it as a press on the big top round button on the Right Controller.

The second most important access is for menu interactions, so we assigned the Menu access to the small top round button on both controllers.

The back triggers on both controllers are used for any object pick up.

‍

Let's Bring It to the Digital World!

As we’re designing for VR, there are different tools for a 3D environment that we could use for this process. We faced the challenge of learning a new tool like Maya or Unity in such a short time. Sketchbox was the most feasible tool, however, we got limited access to a VR headset as a team. Therefore we decided to revert to what we’re familiar with — Sketch and GoPro VR Player.

2D screens in 3D environment

After designing all the screens with 3D equirectangular backgrounds and flat 2D interaction interfaces, we warped the interfaces of a few main screens to fit with the equirectangular drawing, in preparation for 3D screens.

3D screens in 3D environment

‍

Testing Challenges

Testing was a big challenge for us, as we have never tested in a 3D environment or VR before. Due to the time constraint for the project, we could only test in a 2D environment.


‍

The Result

Click image to view the prototype

What a Learning Journey!

Future considerations

Due to the 3 weeks constraints and our limited knowledge in VR design, there are many things that we wanted to put in future considerations.

  • Creating a 3D prototype using Sketchbox: This will make our prototype a lot closer to the real product. I’d like to pick this tool up in the near future and continue to work on our prototype.
  • 3D art interactions: Because of our 2D knowledge, there are many other opportunities to have more 3D interactions that we didn’t explore.
  • Include on-boarding experience: We had a vision for on-boarding to help users orient themselves to the space and with the tools they have. This is such a crucial part of the experience that we couldn’t include in this phase of the design.

Overall, our client was very happy with our achievement for this project. The Mid-Fi prototype has provided him and his team with many ideas to take this project to the next level.

This project provided the biggest learning curve for our team. The more we learnt about VR and designing for the 3D environment, the more we realized that there were so many things we needed to learn. We utilized our existing knowledge in 2D design and picked up a lot of new knowledge for 3D design.

I’m thankful for having the opportunity to work on this project. It has sparked my interest to further my learning in 3D design and find other design opportunities in this area.

Thanks for stopping by!

‍

Portfolio

More Case Studies

View Case Study
WorkBriefly 
Mobile App
View Case Study
UBC Sauder School of Business
Marketing Design
View Case Study
Monashee
Mobile App
About Me

I am a Product Designer whose passion lies in enhancing the human experience through easy and delightful design solutions.

Navigation
HomeWorkAboutCareerContact
Contacts
Vancouver, BC, Canada
ly.vu.connect@gmail.com
Send Message
Follow