ArtSmart

Fall 2009, updated October 2014

People come to museums to learn more about art, but museums can be overwhelming in size and scope. Museums vary in their ability to convey information in an approachable way, and museum learning is easily forgotten. ArtSmart is an art education concept for people who are interested in art, but feel intimidated by museums. ArtSmart supports beginning art enthusiasts in learning more about art, motivates them to see more art, and helps them discover their personal tastes. 

ArtSmart started in 2009 as a graduate-school project. Our team of three Interaction Design students choose a subject and problem area, did observational and academic research, and designed a solution. In 2014, I updated this project and designed concepts for the iPad mini.

 

 

Research

ArtSmart started with academic research, museum visits, and interviews with recent museum visitors. Our key findings were:

  • Some museums provide physical learning tools, but museums are limited by space, and only one visitor can interact with the material at a time. 
  • Guided tours are highly informative, but not customized. With a large group, it can be difficult to see and hear.
  • Art is a very personal experience. Museums are large, and visitors are selective about what they see. People often visit museums with others, but they may split up so each can visit what is most interesting to each. They like to discuss what they've seen after.
  • They want to remember the art they’ve seen, and often document what they like by taking photos. They may wish to look up more information about the artist later, find other works by that artist.

Our academic research into learning and education theory led to a set of guiding principles about learner needs:

  • Interaction. Learners should engage with the content, in contrast to passively consuming information.
  • Learning in context. Information should be presented at the time it is best used. 
  • Customization and learner control. Learners can choose what is of interest to them and the app will tailor itself to their interests. They set the pace, route, and amount of learning.
  • Guided focus. Bring the learner's attention to the most key points of the artwork.

 

Lean Canvas

I used the Lean Startup Canvas to work through the key requirements of the application, focusing on refining the problem statement, customer segment, and value proposition. The Lean Startup Canvas is a one-page business plan that helps you refine and express your product idea.

 

Then I began sketching to work through flows, screens and data.

photo.JPG

After sketching the application flow, an application map helped me visualize how the individual parts come together. If you're looking for a great resource on untangling your navigation, check out Hagan Rivers.

Compare.png

 

For the app's key screens, I worked through iterations to find the best way to present the information and met the user's needs.  For the artwork view, I focused leveraging a large visual of the painting to engage the user, but not overwhelm with painting details or options.  

 Working through options for the main artwork view

Working through options for the main artwork view

 

After defining the key elements and interactions, I created low-fidelity wireframes. 

 Wireframes in Sketch

Wireframes in Sketch

 

The first problem I had to solve was whether users need to create an account or could use the app without an account. I came up with a hybrid approach — allow the user to access some content, but ask them to create an account at the point where they needed to save data. This is important because a key feature of the app is learning user preferences and helping the user develop her taste.

Users are asked to create an account when they take an action that requires saving data in the app, like adding an artwork to their Favorites

 

ArtSmart supports the museum experience by providing background and learning games on selected pieces of art. As each artwork is different, the kinds learning activities will vary depending on what is notable about the artwork. In this wireframe, I show three possibilities: an information view, a detail view, and a comparison view. Having several kinds of learning activities is important for two reasons: learner control and having information presented multiple ways, reinforcing the material.

 Artwork view and Artwork Information View

Artwork view and Artwork Information View

The detail view employs guided focus, allowing the user to interact with specific points of interest on the artwork. The detail view can also represent learning in context, where the user might be taught about a certain style of artwork or technique by having it highlighted in an artwork. This method is frequently used in museums, but learning displays are limited by space constraints.

 Tapping a highlighted area reveals information about a specific part of an artwork in detail view

Tapping a highlighted area reveals information about a specific part of an artwork in detail view

The ability to compare the artwork to similar artworks or other works by the artist enable the user to better understand the context of the artwork she is observing. 

 In Comparison View, swiping allows the user to compare related artworks

In Comparison View, swiping allows the user to compare related artworks

 

The ability to favorite an artwork allows the user to better remember their museum experience without having to take photos (which often is not permitted). The user can see their favorites overall and sorted by museum trip, using it as a talking point to discuss the trip after, or to get recommendations about the kinds of artworks they might wish to visit in the future. 

 Favoriting an artwork to view later also impacts the recommendation system

Favoriting an artwork to view later also impacts the recommendation system

 

Finally, I took the wireframes and created a preliminary prototype using Marvel. I wanted to get a better sense of the flows and interactions. I iterated on some of the screens and interactions, refining the prototype as I went along.

I created a screencast of the prototype so it could be consumed easily without the viewer having to guess which flows were available or not.

 

This gives you an overview of my usual design process. Typically, the next steps for this app would be to work with my team to define the first set of features we'd build, and work through high fidelity designs and refined interactions. While I enjoy making pixel-perfect mockups, I think the most important part of design come with understanding the problem, sketching, and iterating.