UI/UX Case study — Journey of building an Art gallery app

This case study describes the process I went through while designing an art gallery app as well as defines its functionality based on the insights I derived along the way.

Abhijeet Singh
Muzli - Design Inspiration

--

Let me ask u a Question — When was the last time you visited an art gallery or museum? Don’t remember right? Most of us might have an interest in art but still haven’t explored, talked or read about artworks in a long time.

In today’s world people are busier than ever, and a lot of things are fighting for their attention. It’s only obvious that their interest in Art and museums have been decreasing over time.

Arts have outlived many generations, it’s a window into our history and culture. It acts as a form of communication and is an integral part of our society. Artworks deserve a lot more attention than it receives.

“ Artworks set an incredible example of creativity and expression ”

These days Museums aren’t the most popular places to visit either. Art is meant to be shared and displayed, and Museums are the places that showcase it to the world. Museums are also a part of our cultural heritage, museums will always have a role to play in the education of future generations.

Yet people are losing enthusiasm towards art. And museums are facing the lowest number of visitors in decades. Art enthusiasts are finding it difficult to keep up with their passion for art.

There’s a need to design a solution to help people re-discover their passion for art and encourage people to visit museums more often.

Project Background

This project initially started as a part of Google UX design certification. I chose this problem because I found it quite unique and challenging compared to others as I did not have any idea about this space. However, the scope of this project was very limited and the final solution turned out to be pretty basic.

As I kept learning and practicing my skills, I also kept iterating on this project. Eventually, I discovered good enough insights from my research and was able to design a viable solution. This case study briefly describes the process I went through while designing the app. Hope you enjoy reading it!

Understanding the Problem Space

As I began working on this project, I first wanted to understand the problem space better so that it can be easier to empathize with users. I started with secondary research, searching through the web to get an overall understanding of the problems currently existing in the art & museum space. Below are some insights that I found:

  • Based on the data from google search, “Art” and “Museum” are one of the least searched topics worldwide. The search trend indicates that interest in both terms has been falling down over the years.
Source: Google Trends
  • Even the biggest museums are experiencing a drastic downfall in the crowd.
  • A recent survey by the Network of European Museum Organisations found that 70% of its members expect to make budget cuts in the coming years, even in countries where culture enjoys considerable support from the state.
  • In America, the Association of Art Museum Directors, has relaxed its rules on “deaccessioning” (i.e., selling art from a museum collection) until April 2022 in order to help venues survive.
  • A study of 95,000 institutions by UNESCO, the cultural arm of the United Nations, suggested that 13% of the smaller institution closed during covid may never reopen.
  • On average most people spend less than an hour at museums. Museums are trying to figure out how to make the audience experience more engaging.
  • Most museum attendants aren’t aware of what’s at display. In the absence of a guide, museum staff are unable to help out visitors with the details behind the artworks.

Visiting museum falls under “alternative” or “off-beat” things to do

Source: https://www.theheritagelab.in/seven-challenges-museums

  • Often galleries may have the same art pieces hanging on their walls for months at a stretch. Leads to little to no temptation for customers to return.
  • Most museum websites are outdated and do not offer online ticket booking options to users. Some smaller ones don’t even have websites.
  • Famous museums offer online booking and annual membership options. The majority of people are occasional visitors and forget booking online tickets in advance. In peak season, visitors often end up wasting hours standing in long queues outside these museums.
Visitors and tourists waiting at the entrance of Louvre Museum, Paris
  • The global pandemic marks the end of the rented handheld audio guides provided by museums.
  • Many visitors experience Museum fatigue, a term used for when museum guests get overwhelmed with information and can no longer take in facts.

Source: https://www.museumnext.com/article/overcoming-museum-fatigue-with-detour-guides/

  • Due to low marketing budget most galleries and exhibitions go unnoticed as people are unaware of them. Many times people don’t hear about new gallery in the area until sometime after it shuts down.
  • Museums and galleries see the importance of acquiring the digital skills and infrastructure they need to open up collections and reach audiences online.
  • The vast majority (86%) have increased their online presence during the lockdown.

Understanding the Users

After secondary research, I further wanted to get a deeper understanding of the problems faced by the people (user needs and behaviors). I wanted to talk directly with the users, so I conducted an informal interview with some of the people interested in art. The insights from secondary research helped me to ask better questions. Below is a general list of questions I asked during the discussion (these were modified according to the conversation):

Questions

  • Are you interested in museums, art galleries, or art in general? Can you describe your relationship with art?
  • Have u ever visited an art gallery or museum? How did you feel about it?
  • When was the last time you visited one? How often do you visit?
  • Are u able to understand and relate with the artworks at the museums?
  • What might be some of the reasons behind losing interest in art and not visiting museums?
  • What challenges do you face while trying to explore or learn more about art? Like discovering artists, museums, or gaining knowledge about artworks.
  • What are your current sources of learning about artworks or discovering artists?
  • How do you go about searching and planning your visit to art galleries & museums?
  • Have you ever used an app/ website related to art before? What problems did you face?
  • Could there be something that might help increase your interest in art and museums.

Key Findings

  • Most people interested in artworks are looking to learn something new and get creative inspiration.
  • Most people lack awareness and knowledge about art and museums. Most of them do not visit museums or art galleries frequently.
  • Most people have lost interest in art due to their busy daily schedules. They find exploring & gaining knowledge about artists and artworks to be quite a tiring and time-consuming task.

I want to rediscover my passion for art which got lost in the process of growing up

  • Some people get overwhelmed and intimidated when they visit museums or galleries. They often end up feeling lost.
  • People are often not aware of galleries and exhibitions happening around them because of their low online presence (social media, website, Ads, etc.).
  • People can’t seem to find a proper source to learn about art. They aren’t able to find exactly what they are looking for. They wish that the information was more accessible and easy to consume.
  • People want to be able to engage with artworks better, they want to see the bigger picture and feel connected at an emotional level.
  • Most people are unable to appreciate art as the artist wanted. They get frustrated and end up thinking they are not intellectual enough to understand art.

I Feel annoyed and stupid when I don’t understand the meaning behind the artwork

  • The majority of people need a way to find out more information about museums and galleries, they seek some validation before visiting. They have to go through multiple steps to plan their visit.
  • Some people are bored with the repetitive art pieces displayed in the exhibition and museums near them. They want to explore new genres, find something fresh that they haven’t seen before.
  • Some of them feel a bit disconnected with the idea of physically visiting museums and galleries.
  • Most have tried to learn about artworks and artists but they are often inconsistent and eventually forget and lose motivation.
  • People are more interested in details like stories, facts, influence and history related to artworks. Rather than basic details which are available at a simple google search.
  • Most visitors buy tickets physically when they reach museums. They are not aware of third-party apps and websites to book online tickets.
  • Majority of the visitors rely upon handheld audio devices or guided tours to know about art pieces.
  • People want to be able to share their thoughts and interpretations about artworks with their friends.

Competitive Analysis

Before jumping to the next stage of the design process, I wanted to explore if any other apps are solving a similar problem. Understand their approach, specialties and features. Finding gaps in their offerings can help in feature ideation. I broadly focused on the user flow, visual design, navigation, IA, accessibility and overall experience.

HMW (How Might We)

Based on the insights from research, I redefined problems as “How Might We” questions. This helped me to gain more clarity about the user needs and drive creative ideas for opportunities and possible solutions to address them.

IA (Information Architecture)

After ideating and brainstorming solutions to the problems, I designed the IA to visualize how the information would be organized and displayed to the user. While designing the IA I considered how the user might interact and navigate through the app and what functionality they might be looking for, and accordingly designed it to make it easy for the users to browse and search for the information they need.

Wireframes

Based on the Information Architecture I started sketching some app screen ideas on paper, and then I jumped to Figma to create digital Low-Fidelity wireframes for the entire app. My main objective was to quickly iterate and try out multiple possible layouts for each screen before moving on to the Hi-Fi design. This gave me a rough idea of how my design would look like and allowed me to explore new ideas for improvement.

Style Guide

The next step was to design the High-fidelity visual interface of the app and bring the Lo-Fi wireframes to life. I experimented with a lot of different combinations and variations of colors, typefaces and icons to arrive at the final version.

  • As this app is based on art and museums I wanted to give it a peaceful, calming and elegant vibe. So I chose to keep Khaki as the primary color due to its understated, comforting and natural earthy tone. And I used White and Black as the secondary colors to give it a classy and sophisticated look.
  • I used Montserrat as the heading font for its informal, modern and fresh look. And used Avenir Next as the body font due to its versatility, simplicity yet engaging and friendly vibe.
  • I decided to use minimal, clean and consistent icons with smooth corners so that they match with the overall design language of the app.

Solution

Art Gallery app

Onboarding

Onboarding is user’s first interaction with the app, it’s made to be quick and easy. Users are requested for a few permissions, preferences and interests. Progressive onboarding minimizes cognitive load for new users.

  • Users are given the flexibility to select the language according to their preferences.
  • Notifications allow users to get daily recommendations and reminders before their bookings for museum visits.
  • User’s location is used to suggest exhibitions, galleries and museums near them.
  • Last step requests users to select topics that they are interested in. This helps to understand users better and personalise the home screen feed according to them.

Users always have the freedom to skip the onboarding and directly enter the app. They also have the flexibility to customize notifications or select a different city if they want.

Home Screen Feed

Home screen plays a major role in addressing user needs and pain points. It welcomes users with a wide range of selected artworks, artists, and museums upfront, all in one place. Just going through the content on the home feed should be enough to grow their interest and knowledge, makes it quick and easy for users looking to learn something new without wasting much time or effort.

The home feed is personalised according to users interest captured during on-boarding and the content is set in priority order based on their in-app usage. Relevant and limited content on home screen ensures users don’t feel as overwhelmed and intimidated as they do with seemingly infinite feeds.

  • Top of the screen features Daily Stories, it brings interesting stories, fun facts, and rare information behind the artworks. It is only available for a day which helps generate curiosity and create FOMO amongst users.
  • Next section is Today’s Topic, helps educate the user on a new topic and takes them deeper into a specific genre, movement, or medium increasing their knowledge base. These could attract user’s attention and hook them to the experience, making them regular user of the app.
  • During research we found that most users are inconsistent with learning and often lose momentum. So I added a Continue section that shows all the recent reads with the current completion status. This acts as a reminder and helps user to resume from where they left off and maintain continuity.
  • Next content is Near You, its used to make the user aware of the art galleries, exhibitions and museums around them. This is based on their current location or the city they selected during onboarding.

The feed recommends artists, artworks, & topics curated for the user to motivate them to explore new genres and discover something fresh.

Search & Explore

Search allows users to look for something specific or explore content across various categories in a structured way. Most people are unable to find exactly what they are looking for as they do not have a specific name or word for it. Search tab makes it easier and less overwhelming by helping them to browse artworks, artists and museums based on different categories, genres and other properties.

  • Users can straight away explore artworks from various art movements and mediums.
  • Color and Period sections have been designed to be intuitive and fun to interact with. It attracts users’ attention and hooks them to the experience of exploring art. Sliding on the color cards enables users to discover all the artworks based on the color of their choice. Period section allows users to explore art from different time periods by sliding the bar.
  • Quick search bar added at the top for instant results based on specific subject, keyword, name, etc. entered by the user. Search bar features assisted search, which helps users with prediction and categorical suggestions.
  • The category section classifies content on a broad level into Artworks, Artists and Museums. Items within each section are further sorted and arranged to enable easy discovery.

The Search Dilemma!

The search experience is an important part of the solution, so I had to figure out how to make it more effective and useful. Although I have provided auto-completion and suggestions to assist users, search placement is also a major factor influencing its effectiveness. I had to decide between two methods of implementing search, Search Bar on home page or Search Tab on nav bar. I chose to keep an individual search tab based on the below reasons:

  • It encourages exploratory search, allowing users to discover and explore more content of the app which is the main aim of most users. This leads to higher user engagement and user spending more time on the app.
  • Search gets an entire page. The Search bar at the top ensures its easy discoverability. Rest of the page can aid the search for users who are unsure about what they are looking for.
  • Search tab on navigation is more accessible due to easy reachability.

Artworks Details

The Artwork page is designed to be minimal, clean and simple, so that its quickly scannable, easy to read and understand. It provides complete in-depth and authentic information about the artwork, which covers everything from history, background, influence, to the meaning behind the artwork. A separate section provides all the specifications of the artwork.

  • Most users will not have time to read all the information. So I added a play feature that allows users to listen to all the information, making it easy to consume. Users can just listen about artworks on their headphones while doing other chores. Reducing the commitment required to learn will help increase user engagement.
  • Most apps only support one language making it difficult for users to understand. To improve accessibility, the artworks page features a language change option upfront, users can read or listen the information in the language of their preference.
  • Users can also share the art with their friends, or on social media platforms, or any other apps. This will also increase discoverability of the app.
  • If users discover an artwork that they like, they can save them to favorites and revisit them later.

Scan

During the research we found that most people feel lost when they visit art galleries or museums as they are unable to engage with artworks, they don’t understand the meaning behind it. To solve this problem and make users feel more confident, I added a Scan feature to the app. Scan is a quick and intuitive way to interact with artworks. It allows users to scan the artworks and get complete in-depth information about it on their phone.

Real-life depiction of how the scan feature might be helpful for people in museums

Users can also use their phones like audio guides and listen to all the information about art on their headphones while exploring the museum. This reduces dependency on audio guide devices and guided tours. It also helps increase user engagement and encourages people to spend more time exploring art in museums.

Scanning an artwork is very quick and easy. Users just have to bring the artwork in the frame and scan it. The app scans the artwork and extracts all the information about artwork and displays it to the user within seconds. Users don’t have to waste time searching for authentic and detailed info about artwork on the internet.

.

Artist Page

The Artist page features all the information there is to know about the artist, It covers the information related to the details of their life, active periods, movement style, famous works, facts and legacy. Similar to Artwork page this also includes the accessibility features like option to change language and play info on audio to make all this information easier to consume. Users can also add the artist to favorites and explore their work later on.

Users can browse the entire collection of artworks made by the artist on the same page, and maybe explore the ones that catch their interest. Quick shortcuts to the categories based on the movement style of the artist are provided so that users can explore more similar style artworks.

The museum currently hosting the majority of artist’s collection is also provided so that users interested in witnessing their work in person can plan their visit right away. More artists are recommended based on their active periods, medium and style; helps increase user engagement.

Explore Museum

The Museum page provides all the information related to a museum in one place, making it easy to explore. The page consists of multiple sections, to avoid long scroll users can use Shortcut tabs and skip to a particular section, making it easy to browse. Users can read in-depth information about the history, features, specialties, and importance of the museum.

  • The Inside view offers a brief walkthrough from different parts of the museum, giving users a feel of what’s it like to experience it from the inside. Knowing what to expect, reduces the uncertainty and encourages users to visit the museum.
  • The Collection section allows users to explore the museum’s entire collection of artworks from the comfort of their homes. This might create an urge amongst users to visit the museum and witness these artworks in person.
  • Most users are looking for some external validation or assurance before buying tickets. Providing reviews and ratings helps boost their confidence and enables them to take a more informed decision. Social proof generally leads to faster decision-making and higher conversion rates.
  • Users had to switch back n forth between multiple apps and sites to plan their visits. Art gallery app cuts down the process by showing — opening hours, Off days, location, website link, contact info. and Google Map plugin; all in one place. Making it easier and straightforward to plan their visit without even leaving the app.
  • People don’t like wasting hours waiting in queues outside museums. With Art gallery app users can book tickets online and skip the queue. Online ticket helps prevent users from forgetting it, and also allows them to share the ticket with fellow visitors and sync it with their calendar.
  • If users are unsure about visiting or maybe just wish to explore museum again, they can add it to favorites.

Ticket Booking Process

The booking process is designed to be smooth, intuitive and straightforward. It’s focused on enabling users to reach their end goal faster, in minimum possible steps while also ensuring error prevention and easy modification. Maintained a proper visual hierarchy and optimal spacing to remove visual clutter and reduce cognitive strain making it easier to scan and interpret.

Booking or checkout process is an important flow for any app. So I wanted to design it specifically to cater to the needs of this app. While designing this flow I did not want to reinvent the entire booking process as it won’t be solving any UX problems specific to this app. I believe many apps have already solved problems related to the payment process, so I decided to scope it out.

The steps that I did found the need to design went under a lot of ideation and iteration. Open the below Figma file in full screen to go through the design rationale in detail

Future Scope

  • Performing a usability test to validate the current solution and possibly discover new ideas for improvement.
  • Providing virtual guided tours and leveraging the power of AR (augmented reality) to make the experience more engaging and real for the users.
  • A Community space where people can interact, share and discuss their opinions about artworks. It can also help users find like-minded people to visit museums and galleries.
  • Adding Gamification to increase user engagement and retention.

Learnings and Reflections

  • Not to shy away from unfamiliar problems. As we research and gain knowledge about any space we become comfortable with it. Just Stay Curious! Stay Confident!
  • Had to scope out some of the features to arrive at a richer solution. Should avoid trying to build a solution that solves every problem.
  • Avoid waiting for the perfect solution. Start with the initial idea and keep iterating until it becomes better.
  • There can be multiple ways of implementing a feature or even designing a simple screen. But trying to think from user’s perspective makes it really easy to select the best possible way.

Lastly, there is no such thing as Final iteration. Work is always in progress!

That’s a wrap!

Thank you for reading till the end. Hope you found it insightful. I would love to hear your feedbacks/ suggestions.

Please feel free to reach out to me via Email or connect with me on LinkedIn.

--

--