MHCAM iOS Mobile App

Table of Contents

Figma link

Overview

User Research

Figma link

Overview

As museums struggle to find ways to stay engaged with virtual audiences, they rely heavily on desktop websites which often provide confusing and little information on what visitors look for: comprehensive exhibition details; ways to get involved with the museum; and straightforward visitor guidelines.

The Mount Holyoke College Art Museum (MHCAM) has a website that provides much of this detailed information, however, it is more user-friendly through desktops- which not everyone has access to. The mobile web version is difficult to navigate, and forces the user to spend more time on trying to get the information they're looking for.

As a solution, I designed a mobile app that simplified user flows for easy access to museum information; and added functions that would keep users interested in learning more about the museum's collections, events, news, and blogs.

Problem

Visitors need a Mount Holyoke College Art Museum (MHCAM) app in order to stay engaged with the Museum virtually and in person.

Solution

The MHCAM app will let users navigate the museum digitally which will affect users who are looking for exhibition information, artworks in the Museum collection, visiting guidelines, and donation instructions.

Timeline: 1 month

My role: UX/UI Designer, project lead

Methods

User research
User personas
Sketching
Rapid ideation
Competitive analysis
Site mapping
Information architecture
A/B testing

User Research

Interview Participants

Interviews were conducted with art world professionals with backgrounds ranging from museums to galleries and auction houses; and museum visitors.

Questions

How do you look for exhibitions?
What are ways you look to find if an artwork is on view?
What are the challenges you face when looking to learn more about an artwork or exhibition online?
How quickly do you feel you are able to find visitor information online?
How do you interact with other museum apps?

Persona Mapping

Competitive Analysis

Competitors

5 different competitors were analyzed- three direct (museum apps) and two indirect (arts & culture apps):

Museum Barberini
The Davis Museum at Wellesley College
American Museum of Natural History
Google Arts & Culture
Bloomberg Connects

Three apps stuck out in their User Experience and User Interface: Museum Barberini, Google Arts & Culture, and Bloomberg Connects. They were all intuitive in user flow, had interactive buttons & features, and held strong brand identity.

Case Study: Bloomberg Connects

I interviewed museum professionals about their interactions with Bloomberg Connects, as it is the most popular app among museums.

Bloomberg Connects sets up a "guide" for each institution, where a museum can present features such as the Director's Welcome message, history of the museum, exhibitions (current, upcoming, and past), a museum map, and works on view.

Interviewees overall relayed positive feedback- highlighting Bloomberg's resourcefulness in providing audio equipment for the audioguide features, and the intuitiveness of updating museum information within the app.

Another common feedback received was that updating the app can take a long time, and it essentially requires an entire job position to continue updating it. Some museum professionals mentioned that they had interns take on the task of setting up content on Bloomberg Connects.

Ideation

Storyboarding

Big Picture Scenario

The Big Picture scenario follows the persona of Jorge, who is looking to visit the museum to see an exhibition on birds during his weekend. He utilizes the MHCAM App to do so, and the storyboard follows his emotional and experiential journey.

Close-up Scenario

The Close-up scenario shows a user's journey as they use the app itself, following the exhibition information and reading the visiting hours on the header of the app, which streamlines the user's process to reaching their goal to visit the museum.

Wireframe Samples

Homepage Samples

I created five different wireframe samples for the homepage, and listed components that were essential to it:

Navigation bar
Images
Search icon
Opening times

After creating these five samples, I decided that Option A. best addressed the component requirements. I noted some components I found useful for other pages, such as tab buttons, the search bar, and bookmark icons.

Sitemapping

Sitemapping allows us to understand how a user goes through a journey through a visual graph. Starting from the homepage, the user can select 9 different options. We can then see how each page connects us to many others.

If we follow the scenario for the storyboard: a user uses the MHCAM App to read exhibition and visiting information, we would go from Homepage > Menu > Exhibitions/Current > Exhibition Page; then Menu > Visit Us.

Wireframing

After assessing wireframe designs and creating a sitemap, the project is prepared to enter the wireframing stage. A total of 25 pages were created for the app in the wireframe stage. This was an opportunity to create components which would later be utilized in the prototyping phase.

The example below shows what the user journey would look like if we follow the scenario: a user uses the MHCAM App to read exhibition and visiting information.

User Testing

One of the goals during the user testing phase was to understand how users navigate the app to find exhibition details and visitor information. By monitoring users’ interactions with the app, different patterns were recognized. The below video shows three of the most common navigation patterns found.

total_compiled.mov

Prototyping

Interactivity (Figma link here)

The goal of building this app was to fuel digital engagement with the museum, this meant making the app interactive and incorporating an exploration element. This encourages spending more time on the app to learn about the museum, while simultaneously providing features that can get a user the information they’re looking for quickly.

Adding tags to events, blogs, press posts, and the artwork databases is one method of connecting components with relevant collection information. According staff at MHCAM, tags make museum practices more accessible for people interested in art.

Creating an interactive prototype also allows an opportunity to revise certain components from the wireframing process- such as reshaping “Museum Guide” into “Visit & Learn” to make the discovery journey straightforward.

During the user testing phase, users pointed out that the MHCAM logo on the header was another opportunity to go back to the home menu. Originally set as a fixed icon with no functionality, an interaction path was added to bring it to the homepage.

The visiting hours under the header also served as an opportunity to lead the user straight to the “Visit Us” section of the app.

Google Sites

Report abuse