This case study is inspired by a Sharpen prompt to create a mobile virtual tour app for an art gallery. It is a documentation of my portfolio project that I completed as part of the first five courses of the Google UX Design Professional Certification.
Duration: Two months (December 2022 + February 2023)
Role: Product Designer + Graphic Designer
The incorporation of digital technology into the art world has served to facilitate processes and administration. For a world that has traditionally been high-touch, high-tech systems that enable nimbler transactions of tickets and art works are welcome.
In the past few years, galleries have been exploring digital means to elevate their presentation and engagement with art enthusiasts and collectors. David Zwirner, one of the world’s leading art galleries, was an early adopter of using technology to present artists and their body of work through Online Viewing Rooms (OVRs) since 2017. The gallery saw an in increase sales volume via its viewing room by 200% a year after its launch and 400% year-on-year in 2019.
The virtual realm holds promise for art galleries. While the pivot to online platforms was a strategic move for many galleries during the recent pandemic, it has presented galleries a glimpse into untapped opportunities for client engagement. For one, these viewing rooms have been well received by the Asian market. Post-pandemic sales of artworks continue to be robust through such channels.
People are nonetheless still eager to return to the galleries. There is much to be explored with technology as a medium to interface the physical realm with the digital realm.
David Zwirner’s Online Viewing Room for Josh Smith’s Hand-Painted Monotypes
In order to provide a more grounded basis for this mobile app case study, I decided to flesh out some hypothetical contextual information.
Sharpen Prompt Design Challenge Generator
Sago Galleries is a leading medium-sized art gallery for contemporary Asian art that represents and nurtures early and mid-career artists of Asian descent or who are based in Asia. They have galleries in Singapore, Hong Kong, Seoul and Jakarta. Sago Galleries wants to leverage a mobile app to build an online presence and increase their outreach across Asia.
I consider what a mobile app could look like and what a virtual tour feature could do for users who are using this app outside of their galleries. The Sago team hopes the app will draw more visitors to visit their on-site premises and to purchase artworks.
There are two distinct contexts in which the target user would access this app. The first context is when the user is not on the galleries’ premises, while the second context is when the user is physically present at the galleries. The scope of this project will focus on developing a flow for the user in the first context.
When creating an experience like a virtual tour, I framed my foundational research around these essential questions:
To get a sense of where Sago Galleries’ mobile app would be positioned among existing products, I looked at a few direct and non-direct competitors. I chose apps that allowed users to explore and engage with art, whether through interactive Augmented Reality (AR) filters or gallery guides.
I also looked at apps that served mainly as a platform for the purchase and sales of art works. Through this competitive audit, I got an understanding of what features Sago Galleries should offer to users as a baseline and how it might be able to differentiate itself from the rest.
Table 1: A comparison of features across six art-related mobile apps
*Artsy and The Artling’s apps are free for users, but they do offer paid art consultancy services separately.
Based on the profiles provided in the Google UX Design course, one apparent group of users was a constellation of young professionals who have a passion or budding interest in art. While they are not formal or full-time artists, they typically look to expand their art knowledge and cultivate their aesthetic sensibilities. I thus came up with a user persona called Ming.
I mapped out Ming’s journey and the steps he would take when making a visit to an art gallery and attending an exhibit. I started by listing the actions (as indicated across the cells in the first row of the table above) and then indicating the accompanying tasks Ming had to do and any associated emotion(s) I would imagine he might have for each action.
Figure 2. User Journey Map of Ming Making a Visit to an Art Gallery
With reference to the user journey map, I identified pain points and potential improvements that can be made to enhance Ming’s experience at the gallery. I segmented the journey and outline the two contexts in which Ming will use the mobile app — the first context is when he is planning a trip to the gallery and the second context is when he is at the gallery.
I decided to focus on the first two actions since he faces significant pain points at these junctures, which a virtual tour app can help address these pain points.
I mapped out Ming’s journey and the steps he would take when making a visit to an art gallery and attending an exhibit. I started by listing the actions (as indicated across the cells in the first row of the table above) and then indicating the accompanying tasks Ming had to do and any associated emotion(s) I would imagine he might have for each action.
Figure 3. Main User Flow for Viewing Virtual Tour and Purchasing Tickets
With the above research, user journey map and user flow in mind, I began ideating and creating different screens for the app. I first listed the essential elements and features for users like Ming. Then, I sketched paper wireframes for my first draft of the main user flow. In doing so, I mapped out the various elements and their placement and organisation on each screen.
I translated these paper wireframes into digital low-fidelity wireframes on Figma and fleshed out some details to ready them for the first round of usability testing with five users.
Fig 4. Sketches of Paper Wireframes for Four Screens from the Main User Flow
Figure 5 (a). Considering different form inputs for the Date Picker
Figure 5 (b). Considering different form inputs for the Ticket Number Selector
Figure 5 (c). Considering different form inputs for the Time Slot Picker
After receiving feedback from my usability test participants, I finalised the screens to develop into mock-ups and took the following insights to work on for the high-fidelity prototype:
Before I worked on the high-fidelity prototype, I built a sticker sheet to provide broad design guidelines for the app. I kept mostly to a clean, minimalist look as is expected of most art gallery websites and mobile apps.
Fig 6. Sticker Sheet for the Sago Galleries App
I selected a mostly grayscale colour palette. Such a colour palette would focus the user’s attention on the assets of the exhibits and art works. For the accent colour, I chose ebony to give the app a slight pop of colour.
For the typography, I chose to go with a neo-grotesque typeface, namely Neue Haas Unica Pro, to convey a sense of modernism and simplicity. I used fonts in varying weights and sizes to label and convey different textual information.
Tapping on the idea of atomic design, I utilised Figma’s component creation feature to build certain elements and section of pages. These components allow for user interactivity and state changes in the high-fidelity prototype.
Fig 7. A Few Components Created for the High-Fidelity Prototype
I decided to design a 360° view of the exhibit space for the virtual tour feature and it will provide users with just enough information they need to buy tickets to come see the gallery in person. Keeping in mind the potential drawbacks of virtual tours, I decided to reference this video tutorial to set up user pathways that enable users to view more about a particular artwork.
Using Photoshop, I created a 360° panoramic background stitched together using assets from various digital creators on Pexels and Shutterstock for the mock gallery. This is the most feasible option that allows user the closest to “being in the gallery” but also not compromise on the app’s latency time between action and response. The user will be able to have a look around the exhibit by dragging their finger across the screen.
Fig 8. A GIF Illustrating the a 360° View of the Exhibit
After creating the high-fidelity prototype, I set up for another round of user testing with five users (two repeat participants and three new participants) and made the following changes:
All of the users found the main user flow to be straightforward; information about the exhibit is clearly displayed on the Exhibit Information Page. The Virtual Viewing Room offers the user an idea of how the exhibit will look like in person. Usability test participants think it is efficient in terms of purchasing timed-entry tickets.
While I had set out to design a virtual art gallery tour app for users like Ming, there are other things that came up that questioned the app as a solution in and of itself.
One of the participants (Participant 3) from the first usability study mentioned that she was not too inclined to download an app just to buy and present tickets at the exhibit. She would rather purchase tickets on the gallery website and separately present a digital copy of the ticket in person.
Another participant (Participant 6) brought up a similar preference of using a desktop to purchase tickets for entry into museums and galleries because of how content-heavy these institutions’ websites can be.
Moreover, such mobile apps are only feasible for sizeable art galleries. The uptake of such VVRs is limited by the financial and technical costs that are associated with creating the assets and hosting these assets on servers for users to access. This is typically a cost that can only be absorbed by bigger players.
The next steps would be to consider and design for the second context in which users will use this app, i.e. in person at the gallery. The user flows developed for this context are more likely to justify the basis of Sago Galleries having a mobile app as it would allow users to access the app’s features on the move.
It is also interesting to explore and expand on the possibility of VVRs beyond mobile devices, such as Virtual Reality headsets.
