top of page

mount holyoke college art museum mobile app

Many museums rely on desktop websites to engage virtual audiences, but these often lack clear, accessible information—especially on mobile.

To address this gap, I designed a dedicated mobile app for the Mount Holyoke College Art Museum that streamlines access to essential museum information. The app simplifies user flows and introduces features that keep users engaged—from exploring the museum’s collections and upcoming events to browsing news, blogs, and opportunities for involvement. It offers a more intuitive, on-the-go experience that invites deeper connection with the museum, wherever users are.

Figma link

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.

methodology

As the UX/UI Designer and project lead I conducted user-centered methodology, and completed the project in 3 months.

methods used:

  • User interviews

  • 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.

competitive analysis

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

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.

ideation

storyboarding

MHCAM App_Paper_Storyboard_Big+Picture.jpeg

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.

MHCAM App_Paper_Storyboard_Big+Picture.jpeg

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

MHCAM App_Samples_Wireframe_Homepage.jpeg

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

MHCAM App_Paper_sitemap.png

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

MHCAM App_Wireframe_Chart.png

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 above 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.

prototyping & interaction designing

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.

methodology

© 2023 Renée Portes. All rights reserved.

bottom of page