A Hero image with name of the Project and bunch of screens, arranged.

Designing to make art accessible and exploring the world of AR Design.

Pranjal Singh
UX Planet
Published in
11 min readSep 6, 2021

--

In this project, I try to solve a problem that the art world has always struggled with, making art accessible to everyone from different walks of life. This was a project for a course.

Duration: June-August 2021

Role: UX Design, Research, Visual Design. (Everything)

Project Prompt: Design an application for an Art Gallery in Mumbai, Concept
via Google Course.

Project Vision

Since the project was part of a challenge and not for a specific Gallery, I took a gallery near my city as a reference and the Best Art Gallery Websites and applications as my competition/ Industry standard for my project. I aimed to make the Art Gallery experience more accessible and inclusive to all using Technology.

A GIF of the Logo of application, in Which Vault shrinks to be just V

The Start

My approach towards this project was to do everything intentionally and nothing for the sake of just doing it, Which was fulfiling. Getting back to the start of the project, I conducted Stakeholder interviews, Competitive audits, literature reviews. But before everything, I started by asking myself some key questions like…

Questions I asked myself before starting, i.e. Who is this application for, What are my assumptions regarding galleries, etc.

Understanding Galleries

These are things that I learned about galleries which also broke a few of my assumptions via literature review (they are linked at the end of the case study).

Insights I got regarding gallery

“ artists are uncomfortable about, and do not wish to have their work discussed in terms of prices and market value, and what is selling and not selling”

Pain points of users

Talking/Interviewing my users who frequently use art gallery applications, visit art galleries( I created a screening survey initially with questions that would filter out people who visit art galleries and use applications for the same, which I posted in the Reddit groups and hoped that someone agrees for an Interview. 5 people did and I interviewed them on Google Meet). I discovered these 5 Big pain points most users have while using them. ( Lack of Clarity, Guidance, Inclusivity, Connection and support ).

5 Pain points, that are related to Clarity, Connection, Guidance, Support and Inclusivity.

Meet the users

I created a persona based on the research that I had done earlier, the reason was to remember who I am designing for, but It also helped me identify a potential problem while exploring the user journey. ( more on it below in “Support Beyond buying” )

A persona named Nitin Mauraya, someone who hopes to learn about artist and wants to feel the art organically.
A persona name Shreya, she is an artist who also wants to help out new artist by buying their work and also hopes to find an easier way to book visit.

What are my competitions doing?

The purpose of this was to match the industry standard and provide an experience to our users with which they are familiar. So, I looked at various art galleries which would directly or indirectly compete with the gallery. (which doesn’t only depend on application but also the Gallery experience offered as well) Most of the features were almost the same.

  1. Artwork in Gallery
  2. Booking Visits
  3. Artist Bios
  4. Buying Artwork
  5. VR tours
  6. Floor Plans

Even though there were a few differences among them, like
Easy Booking- Difficulty booking,
Hard to use Navigations,
Accessibility compromise for sake of the visuals etc.

All the brands that are competition, like KNMA, Maritiem, Van Gogh Experience, Sotheby’s.
The applications and websites I used for my competitive audit.

Exploring Ideas

It was time for exploring ideas based on the pain points and insights that I gathered during the research phase, so based on those pain points and insights. I created a bunch of Problem statements and explored Ideas using Crazy 8s.

Sketches that I created to explore ideas.

Once I came up with all these ideas due to time constraints, I had limited time to explore all of them. So I selected the ideas that I thought would directly solve the problem.

Like making the purchase experience better via preview, or visiting experience more engaging via AR and Voice prototypes but more of that later in the case study…

Final Scope of the project

While deciding the scope, I wanted to make sure the application is worth downloading for users. So I decided to not only make Gallery more digital by features like

  1. Showcasing Artwork- This is important as it is what brings the user to the gallery.
  2. Artist bios- As some users prefer knowing the artist and information about them before visiting.
  3. Booking visits- Users needed an easy way of booking visits in advance.
  4. Buying Artworks- This was going to be challenging since the insights that I got was that many artists don’t like their artwork being talked about based on price but on the artistic merit, but that didn’t change the fact that it is for sale. I planned to make two different sections, one for the artwork that is for sale and the other to showcase the artwork present in the gallery, so that while exploring artwork users just focus on the art and if they want to buy something they can check it out in Buying section. ( I could have tried and solved the issue artists had with showcasing artwork, but that would make the project longer, so I avoided it)
  5. Notifications- Notifying users when new artwork is added since they last visited or if the artwork they like will be sold, etc, solves a problem that one of my users Shreya had.
  6. Immersive visits- This was something I wanted to create to just add a touch of delight for my users visit to the gallery.

While also making the visiting experience more immersive using AR and Voice prototyping.

A big picture storyboard that shows how user is looking for an artwork to hang on his wall and comes across the Application and then scans it and buys artwork and is happy after that.
At home experience.
A storyboard where our stick figure is annoyed during the visit until he discovers the app.
Immersive Gallery experience.

Constructing the Sitemap

The features were varied, but each solved some problems, so the way they were laid was important as it was tricky and could affect the user experience.

So what I decided was to put artwork and artist on the home page as it is the main reason for a possible visit, which was followed by the booking visits tab and buying artwork tab.

The remaining secondary features which users would rarely use or use in a specific condition ( while visiting the gallery) was hidden in the hamburger menu, which is also placed at the bottom because it is within the reach of the user. (I did construct a user flow for every feature, but the case study is already getting loooong)

Information architecture of the application

Sketching before committing

Now that I had a flow, I had to start thinking about the layout. The best way was to explore at least 4 to 5 versions of the same screen and try to choose the best one or combine them so that's what I did.

Paper wireframes of the application design.
These were the finalized sketches after, trying out different layouts (I had to make changes on them later on so not really finalized)

Digital Wireframes

After finishing and exploring all possible ways and combining ideas and sketches, I moved to designing digital wireframes of the finalized sketches and prototyping them for my first round of testing.

Digital wireframes that shows how the flow of the artswork would be connected
While wireframing, I didn’t wireframe every possible screen. Just the screens that were important to accomplish the given task.

Iteration

To test the prototype, I conducted an Unmoderated Usability Study with 5 Participants, where users had to complete given tasks like booking a visit or buying an artwork. In the end, I had enough feedback to go through another round of iterations.

Problem 1: When I asked users to check out all the artists and tell me which one do you like the most, Users had to do a lot of back and forth.

Solution: To give them option/ a bottom menu kind of thing which they can tap scroll, which would be more efficient.

A before and after wireframes with description of my design decisions i.e. Initial I thought of making it like stories, but to keep it at the top didn’t make sense, since in Stories you just need a initial tap and then you can swipe. But for this they had to tap every time they want to see the next artist, so the best choice was to keep it at bottom.

Problem 2: Displaying ticket price before the booking was necessary as it could have been a deciding factor for my users if they want to visit or not, and having it later on in the flow, could have pissed off my users.

Solution: A static price chart, that shows them the price before they go ahead with the booking.

Designs and iteration of that design, solving problem of static pricing.

Levelling up the Fidelity.

My Goal while designing the higher fidelity was to make sure every decision I make is intentional and serves a purpose in solving the pain points of my potential users.

So these were the ideas in their full potential…

Support beyond buying

While I was exploring ways to make it easier for users to buy artwork, I discovered a problem. Which are users don’t know if the art piece they are buying will look good on their wall or even fit on their wall. To solve this problem, I made a Preview feature using some AR prototyping( More on it soon) where users could see how the artwork would look on their wall before buying it. ( Solves the Problem Shreya- Persona 2 could have had while buying an artwork)

GIF of users previewing artwork on their wall
Sorry for the Bad Quality, struggled a lot to make it better but it just didn’t work

Booking a visit

A visit is a big deal and the most important aspect of revenue for Art Galleries, but booking them isn’t easy. Either user have to visit the gallery themselves or get on a call to book one, which is time-consuming and difficult coordinating dates, so I attempted to make it easy for users by making it a step by step process.

Explanation of designs that I created with the mockups of booking screen flow.
Explanation of designs that I created with the mockups of booking screen flow.
The flow of the booking experience.

The art and the artists

During my research, I found that few users liked going prepared by knowing who the artist and artwork presented in the gallery, which I made sure had more emphasis and acted as the main draw to visit the gallery. But to also make it more inclusive, I included a feature where users can listen to the description of the artist and artwork in 3 different languages.

Explanation of designs that I created with the mockups of artist bio flow.
Explanation of designs that I created with the mockups of home page flow.

Immersive Visits using AR and Voice prototyping

As I had finalized my scope for the project, I wanted to make the visit for my users more immersive and, one of the ideas I had explored was using augmented reality and audio guides together to make the most of a trip there.

PS- While designing this part of the application, I had to ensure the use of voice and AR features would not be socially awkward for my users.

I had to ensure the voice feature did not interfere with the experience of other users, Hence the use of earphones. Even though Gallery visits are an individual experience, they take place in a social environment, and application might ruin chances of socializing, Which may or may not be a contributing factor for users to visit the gallery.

I have my doubts about this part of the application, which won’t go away until testing. The best way to test would be to have a trial run at a gallery,
as it involves experiences of multiple stakeholders and a social environment at the same time.

Which unfortunately I can’t afford to do it, cause I am a student working on a conceptual project.

Explanation of designs that I created with the mockups of immersive voice and AR prototype flow.

Check out the video of the actual AR prototype here on youtube- (Use of Audio)

Maintaining crowd distribution in the gallery was something that I could have solved using this immersive aspect by guiding users to empty areas and assuring them that they could complete their journey and view the entire gallery if they follow it.

Me explaining the ways my design can help maintain the crowd in my gallery, by guiding users individually.

Earlier, while deciding the visual part of the design I wanted to make sure that the Immersive and the Static at home part of the application looks different from each other. ( Chose Black for Visits as most galleries are white or have a lighter shade so the app would have great contrast based on the world/environment of use)

Mockups that showcase two different aspects of the apps, signified by using two different visual style.

While Designing for high fidelity, I kept getting constant feedback from my fellow designers by describing them, what I am working on and what pain points I am trying to solve.

Two mockups which show before and after, once I got feedback from senior designers to improve my design.

The AR Challenge

Everything was going great throughout the process until I had to create an interactive AR prototype. But I didn’t know anything about AR.

After some research, I found a template to implement my flow, but when it came to tools. It was impossible to find tools that gave me freedom of implementation/Interaction so that I can test them out. So I had to improvise and use Figma and Protopie to create it.

An AR template that I used for my designs.

Template link-https://uxdesign.cc/a-practical-template-to-develop-augmented-reality-ideas-870acbd6b048

Another one

Once I felt like I was done with the design, I conducted another small scale moderated usability study with similar guidelines as the previous one

Mockups of screen with before and after testing and iteration.

Style Guide

I wanted to keep the use of colour to 3 colours that have great contrast over each other, and also based on two different styles but similar colours, by keeping white while a user is using it at home to showcase artwork at its best, but for the immersive part which is when they are in the gallery I wanted to keep it dark as the walls of the most gallery are light and this would make out for great contrast. Also, use of hot pink for accent and Different colour carousel to make ( Premium Booking, E-pass, Events Standout).

Stickersheet of components used throughout my design, from buttons to Icons colors and typeface.

Takeaways

This was probably the longest I have worked on a project by far (12 Weeks) and probably the most fulfilling and educational one. Before this project, I would take feedback from my fellow designers or senior designers once done with the designs, but I have realized how taking feedback throughout the process can save a lot of time.

One thing I believe I can still do better is Information Architecture and Visual Design. Even though I believe the extra effort I have been putting into improving my visual skills is paying off.

Ending screen with all my designs that I created.

--

--

Product designer-1 at Scaler (prev-MakeMyTrip), Storyteller, On a journey to make the world a better place.