Crystal Tompkins
UX Designer | Product Designer | Illustrator | Educator

Portland Art Museum

An onsite, mobile resource for patrons of the Portland Art Museum.

Image alt tag
How might we provide a richer experience by encouraging users in close, solo observation of pieces, and connecting users with self reflection through the lens of the artists?
Design Sprint, Day 1: Understanding and Mapping
Portland Art Museum

WHY ARE WE DOING THIS?

Understanding the Problem

CONTEXT: This was one of a few student project options coordinated by BitesizeUX and Springboard. The goal of the project was to experience the process of a modified, single-person, Google Ventures design sprint. I was provided user research and client goals. I adapted the project to fit a specific, local museum in my area, the Portland Art Museum (PAM). 

Problem

Museums want to increase visitor satisfaction while viewing art (paintings, sculpture, and installations) on-site. The customer is asking me to focus on an in-person viewing experience, using mobile devices. 

HOW MIGHT WE provide a richer experience by encouraging users in close, solo observation of pieces, and connecting users with self reflection through the lens of the artists.

Solution

My solution focused on providing user choice and ease-of-use, creating an easily downloadable app (via QR codes at the entrances of the facility). The app would not only provide users with specific information on the art they are viewing, but also assist in guiding them physically through the buildings. Art is easily identified through scanning either the art itself or provided QR codes for items that are 3d or too large to scan (complex installation pieces). Users are provided with accessibility options of either audio recordings or text, both of which are broken into quickly identifiable chunks that are easy to navigate. 

My Role

I joined the project after the research and interviews were collected, starting with data analysis, strategic information architecture planning, and working through sketching, high-fidelity designs, and building prototypes for user testing.

Portland Art Museum

WHAT'S OUT THERE?

Secondary Research

Competitive & Heuristic Analysis: I wanted to know what was out in the world. I found quite a few articles on recent developments in museum apps, including what was working and what wasn’t. There were some fascinating ideas for children's and natural history museums, but that wasn’t the focus for this project. 

I found 4 apps focused on art or galleries, which I downloaded and put through their paces.

  • Cuseum: used as a framework for both PAMM and SFMOMA.

  • National Gallery of Art: location-based options available.

  • Walt Disney Family Museum: using a framework built by StQry.

  • Smartify: for use in any gallery or museum.


"I don’t really enjoy group tours because I like to do my own thing…but sometimes I listen in to learn a few facts about the artist, or the piece itself."
Portland Art Museum

HOW DO VISITORS FEEL?

Primary Research Interviews

Reading through and watching the videos provided of user comments and an interview with a museum tour guide, I came to the following conclusions: Users generally have limited prior knowledge, with some exceptions. Common requests and interests from tours include the WHY of the pieces; time, place, context for artistic decisions, and also the background and intentions of the artists. Common questions revolve around why the artist or the piece is famous. We could answer that by providing more background, and information about technical skills, processes, media, and composition.

"I enjoy going to the museum, but I often leave feeling like I didn’t appreciate the art to its full potential. I don’t need to know everything, I just don’t want to feel like I was missing out on something."
Angela  is 23 years old, and a Junior Art Director in NYC.

Angela  is 23 years old, and a Junior Art Director in NYC.

WHO AM I WORKING FOR?

Meet Angela, Our Persona

Angela is the persona provided by BitesizeUX, as part of the design sprint.

Frustrations: Angela feels like she would have a better experience if she knew a little more. She’s tried to read some books and articles on the pieces she’s seen, but loses interest due to how long and in-depth they are. 

Goals: Angela wants to get quick information while looking at the art that will give her a better appreciation for it, and make her feel like she is making the most out of her visit.

Design Sprint, Day 2: Ideation and Sketching
Portland Art Museum

Let's Get Sketching!

Ideation Techniques

I used the Crazy 8s exercise to develop sketches for the most critical screen. What emerged was an idea that focused on providing more choice and accessibility options to users. 

Solution Sketch 1

My initial solution sketch illustrates the gallery map with numbered items, the screen for a specific piece of art (with text and audio options), and a map of the building as a whole to return to after accessing specific item information.

Design Sprint, Day 3: Decisions and Further Sketching
Image alt tag

Let's take it further!

STORYBOARDING

Solution Sketch 2:
As I was sketching and thinking, I reconsidered the concept of using the map to choose numbered items. Giving the user more choice and flexibility, and limiting the hierarchy of steps they would need to access the art would only improve the experience. I eliminated the numbered map option, instead focusing on using a digital scanning method. I also added an option to favorite a particular piece to a saved list for later perusal.

Storyboard:
I illustrated the path a user would travel from downloading the app, agreeing with permissions, home screen, scanning a piece of art, accessing specific information about a piece and the artist, all the way through favoriting a specific piece of art to their saved list.

Image alt tag

Design Sprint, Day 4: Prototyping
Portland Art Museum's website

Portland Art Museum's website

DAY 4: Prototyping

How should the product feel?

STYLE GUIDE

Since this product would be used in a similar fashion to both Cuseum and StQry as a framework for a specific museum or gallery, I decided to use my local art museum (Portland Art Museum or PAM) as my example. 

  • I used the current branding developed by the design firm, Ziba, back in 2011.

  • I used their bright coral-red as the CTA color, along  with two values of the neutral tan, and white as the background color. A dark brown instead of black for copy text, and a bright turquoise blue as a digital call-out for links and phone numbers were also incorporated.

style guide for Portland Art Museum

style guide for Portland Art Museum

  • Known city-wide, the solid, capital P made an excellent graphic for the loading screen and the home button, providing comfort and familiarity for users. 

  • I inspected the elements on their website, and acquired the same typographic family (Circular) to use on the app design. 

  • Buttons were slightly rounded, to feel friendly, but also trustworthy and slightly more formal. 

  • Icons were developed using Google’s Material Icons or from the Noun Project, with in-use or CTA being the red and inactive being the neutral tan. 

  • All of these choices could easily be swapped with or adapted to another museum’s branding needs.

Design Sprint, Day 5: Testing and Validating
In-person testing using Figma's prototyping tools

In-person testing using Figma's prototyping tools

How did I do?

HIGH FIDELITY USER TESTING

I conducted 5 user tests in order to reveal possible usability problems. Two of the users were in-person, and 3 were remote via Google Meet. All participants were required to have visited a museum within the last 4 years, and profess to be gallery or museum enthusiasts. 

I started with some context questions, to get the testers back into the mindset of being in the museum. 

I asked users to provide feedback on the following objectives:

  • Loading & Permission Screens

  • Home Screen Impressions

  • Navigation Ease-of-Use

  • Specific Art Piece Screen

  • Identify Ambiguous Language or Icons

  • Uncover Unexpected Issues

Relabeled Street Entrances

Relabeled Street Entrances

KEY FINDINGS

Tasks were easily accomplished, with no problems.

  • Three users had multiple questions about the ticketing process, and several ideas to suggest for further development.

  • Two users wanted to explore maps of the building before anything else. One user stated, “I always start with  maps and find the most efficient routes for my tours before anything else.” 

  • All users were delighted by the art scan option, and satisfied with the QR code option for any possible issues that might arise.

  • There were 2 users who asked about the order of the buttons on the home screen and the Current Exhibitions screens. They were satisfied about the Current Exhibitions once they realized it was in chronological order of exhibit run.  

  • One user was slightly confused about the Guided Tours screen, and what kinds of tours were offered.

  • Two users were confused about what floors the street entrances were located on, and how to find that out.

Organizing Guided Tours by type

Organizing Guided Tours by type

RECOMMENDATIONS 

Further research is needed on the order of home screen buttons. Customers might want to highlight a particular option (Current Exhibits, Membership, etc.,) to drive users to a specific goal. 

The Guided Tours section was relabeled and reorganized by types of tours to facilitate understanding. 

The buttons for the 1st floor were changed to include a notification about the location of street entrances. 

Users made multiple suggestions about what the Coffee Shop screen might contain.  

Further thinking needs to be done to insure accessibility standards are met, especially around the tan color use on buttons.


Figma Prototype