There are certain constraints with the current 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 showtime constraints. 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 was born, a product of Banging Rocks and the Federation of Canadian Artists (FCA).
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 regardless.
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.
Before we start planning and designing, we must understand our users and the issues that may come up while they experience VR.
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:
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.
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.
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.
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.
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:
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.
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.
We analyzed our survey/interview data and grouped them to find patterns. We found valuable insights on:
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.
To help us empathize further with our two personas and their needs, we created the user scenarios for Penelope and Sean:
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.
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.
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.
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.
The first set of the feature list is for the space. All the Must-Have features are necessary for the space to be functional:
From the Nice-to-Have list, we included the following:
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:
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.
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.
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.
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.
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.
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.
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.
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.
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!
I am a Product Designer whose passion lies in enhancing the human experience through easy and delightful design solutions.
