Problem
Novice museum goers, who often have no subject matter expertise, have trouble understanding and enjoying the exhibits. They may be confused in museum spaces and not know where to go, or may want to learn about things that are not included in museum labels. Their lack of knowledge and familiarity may result in a frustrating visit and prevent them from returning.
Design Question
How can visitors enhance their knowledge of and comfort with contemporary art in museums while maintaining a desired level of social interaction?
Vision Statement
Our product will help inexperienced visitors enhance their experience of art in contemporary art museums through individualized learning and social interaction with the goal of mitigating the “clueless” wandering that they currently experience.
Overview
During summer 2016, I participated in a UW study abroad program in Germany. It was an awesome experience and I utilized my free time to travel around in Europe. I visited tons of museums there and as a college student who has little experience in art history and architecture, I felt lost in the huge museums every time I was cluelessly wondering around.
When our team was discussing what we would love to focus on for the problem and the target users, I suggested why not developing a brand new museum experience for people who have little or no knowledge in contemporary art and create a lovely and comfortable level of interaction while visiting?
Team ARTifact solves these problems by providing visitors with an interactive, personalized museum experience that encourages visitors to engage deeply with the works of art on view. By using ARTifact, museum visitors with little or no contemporary art background can orient themselves in unfamiliar museum spaces, explore areas of art that interest them, and share their experiences with others.
User Research
Our first step in developing our product was conducting research with potential users and competitive analysis of similar products. Although we had identified visitors to contemporary art museums as our target audience, conducting research helped us focus on which user goals we wanted to address, and to capture the nuances of individual museum experiences that our project would consider.
Competitive Analysis
Our competitive analysis revealed a range of products designed to improve museum visitors’ experiences. Some of the key similarities were the importance of personalization, the presence of a map, and the ability to listen to more information about the artwork. However, consideration for the social aspect of a museum visit was missing from most products. In developing our personas and in later design stages, we incorporated elements of social interaction that helped differentiate our app from other museum products.
Interview
Our group interviewed five individuals, all of whom had little to no background in contemporary art. Analyzed together, these interviews suggested that potential users of our product:
1. Want to learn more than what is presented on the labels
2. Often find traditional museum tours to be inflexible or boring
3. Feel confused about where to go or wander through museums feeling “clueless”
4. Desire some degree of social interaction when using the product
5. Seek a range of social experiences within the museum, either visiting with friends or alone
6. Have a range of motivations for visiting museums, including spending time with friends and family, sightseeing, and looking for inspiration
Personas
We combined our user research with reasonable assumptions to create two personas which would guide our design process. Through brainstorming based on our user interviews and the creation of affinity diagrams, I synthesized our user research and began to consider what an individual user would want from our product. Refining the goals, desires, and pain points of our potential users into specific personas helped make the design process more concrete, which in turn helped us foster empathy for our potential users.
The final, polished personas reflected the range of motivations we observed in our potential users, as well as key pain points that emerged from our research. Throughout the subsequent development process, we considered how Alice and Todd would use our product and whether our design would meet their desires and needs. Our personas helped us focus the scope of our project and design a product that would help our target users accomplish their goals.
During persona development, our team decided to focus on designing a product for the Henry Art Gallery at University of Washington. Although we feel that the idea we were developing could be applied to many different museum settings, the fact that the Henry was easily accessible for the entire design team meant that we could focus our product narratives on a single location without too much inconvenience.
I used this persona throughout the process to think about how they might sort our elements based on importance and using that to redesign and iterate the structure the ideas. Especially in the scenarios, the information architecture, and the paper prototypes, these personas were invaluable as they helped us to make sure we thought about our user as we made each step.
Design Sketches
In order to translate the concepts and ideas identified during our user research, persona development, and scenario creation into concrete designs, our group created a series of design sketches.
We began by identifying the essential data and functional elements that had emerged from our previous work. These helped guide brainstorming sessions where we came up with design ideas for the product. Next, each team member created three sketches that mocked up potential product interfaces. As a group, we discussed the strengths and weaknesses of each sketch and identified the most promising elements of all of the designs, combining them into three refined sketches that captured key functions of our museum app.
Ultimately, we decided that our three strongest ideas were:
Artwork Info: The page where users can find basic and detailed information about individual works of art, as well as read comments left by others and leave their own.
Interactive Map: A map of the museum showing the user’s location and from which the user can access the artworks in individual galleries.
Suggested Routes: A list of pre-set routes through the museum that explore different topics, with routes recommended for individual users located at the top
While these three ideas made up our refined sketches, design ideas for other pages that were developed during the sketching stage were influential in the later development of storyboards and prototypes.
Scenarios & Storyboards
Developing scenarios enabled our team to translate the characteristics identified in our personas into real-world situations in which our product would be used.
In order to create our scenarios, we first identified each persona’s expectations for the product and how it would compliment their museum visit. These expectations were drawn from our user research, which helped us develop scenarios that accurately reflected how real-world users would make use of our product. We then applied these expectations to potential situations in which our product would be used.
Creating these scenarios helped our team identify the problems that our product would help the user solve and the goals it would help them achieve. This helped us further refine our product's key elements in anticipation of the next design stage, when we would begin to create the visual and functional design of our product. Writing the scenarios also helped our group decide that the best format for our product would be a mobile app.
Sitemap
Now that our team had a good sense of the key functions of our museum app, we needed to determine how all of the pieces would fit together and what the hierarchy of individual pages would look like. We developed a sitemap that contained all of the different pages that the user could visit. This stage helped us conceptualize the different elements of the user’s museum visit, and how our app would enhance the user’s experience of each element.
In developing our sitemap, we decided that the interactive map should serve as the main page, and that all of the other functions should be accessible from that page. We divided the rest of the app’s pages into four categories: art data, user data, route data, and museum data. Identifying the app's individual screens helped guide the development of our next design stage, prototyping in paper.
Paper Prototype
We created a paper prototype of our app to test whether the page designs and pathways that we had created up to that point were intuitive, efficient, and clear. Prototyping in paper helped us get a sense of the effectiveness of our design and identify potential problem points without investing a great deal of time and effort. It was the first time that our design ideas entered the “real world,” and the feedback we received was crucial in refining our designs.
In developing our paper prototype, we referred to both our design sketches and sitemap to decide what tasks were important for the user to complete and what the individual screens should look like. We identified three key path scenarios that we wanted users to test:
1. Go through or skip the tutorial, then locate the nearest restroom.
2. Find the artwork called “The Flower,” read the comments left by other users and leave your own
3. Find the suggested route "Highlights" and start the route
Go through or skip the tutorial, then locate the nearest restroom
Through testing and critique of our paper prototypes, we received constructive feedback of changes we could have made. One key issue was that our prototype did not directly address error states or describe what task failure would look like. We were also missing a few important pathways, such as exiting search mode. Overall, the visual design of our prototypes could have been more refined and consistent. As designers, we will incorporate this feedback into future paper prototyping projects.
Usability test & Findings
We tested our paper prototype with four individuals, all of whom had no background in contemporary art but who wanted to have good experiences visiting museums. We asked the user to “think aloud” while using the prototype, taking notes on their thought processes in order to collect qualitative feedback. We also timed how long each task took to complete, and asked the user to rate the interface’s navigability, efficiency, and wording for each task.
After testing was complete, we analyzed our results and compiled our findings into a report. The most significant results were:
1. The design of our tutorial screen was confusing. Several users accidentally skipped the tutorial altogether, mistaking the “skip” button for a “next” button due to its location in the lower right of the screen. We addressed this issues in our wireframes by relocating the “skip” button to the upper left and adding a separate “next” button in the lower right.
2. Users did not intuit that the “running man” icon would take users to the “Go-To” navigation screen. In our wireframes, we redesigned this icon to be a more standardized “map-and-pin” icon so that users would more easily understand its meaning.
3. Our prototype included an “Artwork Info” option in the main menu, but users were confused about what that option would take them to. Several users attempted to use the menu item to locate a work of art, which was not its intended function. We decided to remove the “Artwork Info” option entirely from our wireframes, as we felt its original intended function (to list all of the works in the museum) was redundant with the search function on the main page.
Overall, users thought the design of our app was intuitive and clear. They found the "suggested route" task particularly straightforward and appreciated the minimal design of the map and menu screens.
Transition diagram & Annotated wireframe
In creating our wireframes, we incorporated all of the feedback that we had received on our design ideas up to that point and worked to refine them into a coherent, visually appealing whole. Using Figma, we translated our paper prototypes into digital versions, clarifying the layout of our screens and the overall flow between them while leaving out specifics such as logos, images, and color.
Open "The Flower", view its comments and write your own comment.
In order to communicate clearly the function of each element, we annotated our wireframes. This helped clarify to potential users how each part of the app would function and how the different pages within our app would fit together.
In class, other HCDE students critiqued our wireframes and offered suggestions and feedback. We incorporated their feedback into the creation of our high-fidelity mockups.
High fidelity prototype
The final stage of our project was the creation of high-fidelity mockups for our Henry Art Gallery app. Particularly given that our app is designed for a contemporary art museum, the addition of artworks and a coherent visual identity for our product was essential. We used Sketch to create mockups that would be visually appealing while clearly communicating their function to potential users.
We identified 7 key screens that we felt communicated the app’s key functions - the log-in, the main page, the side menu, the suggested routes landing page, an expanded suggested route, route navigation screen, and artwork info.
We participated in an in-class critique of the first draft of our high-fidelity mockups, which helped us determine which aspects of our final design were effective and which needed to be modified. We believe our final design accomplishes the goals we set out to address at the start of this project, to provide a product that would enhance the museum experience of individuals with little or no background in contemporary art.
Future steps
