Team Member Names and Roles
Noah Nsangou: Visual designer, ideator Anjali Pai: Visual Designer, Ideator Williams Downs: Ideator, Note-Taker, Head Writer
Problem and Solution Overview
Art museums can often inspire feelings of self-consciousness for those who feel like their opinions are not valid or who feel intimidated by the quiet, serious atmosphere that art museums often exude. As a solution, we propose a QR-code enabled web-app that allows museum-goers to share their emotional reaction to an artwork through a simple panel of faces expressing different moods. The user then receives information about the number of attendees who felt either the same emotion (if there are enough people) or the number of attendees who fell in the same category of emotions. This category of similarity is widened as necessary to ensure that each person is guaranteed a validating response. An additional wall-mounted interactive display component takes all of the user-provided data and creates a mass visualization of emotions for each artwork, represented through animations of groups of people. By interacting with the display, museum-goers can view and interact with comments that other people have left, thus building a sense of community founded on ranges of different reactions.
Initial Paper Prototype
After a series of exercises investigating what amateur users desired from art museums and what tasks would help them reach those desires (see Art for Amarteurs), we developed a paper prototype of a design (as described in the overview above). Our original paper prototype contained two components: a web-based app, which we delivered using a cardboard mobile phone, and a interactive visual display, which we simulated using a large posterboard. The web-based app had a series of screens letting users emotionally react to a piece of art, see how many people responded to that piece of art, comment on a piece of art, and see “similar” comments from other people about that piece of art. On the large interactive visual display, users could select a piece of art, select an emotional response to that piece of art and see how many people responded with that emotion. Users could also see all comments from people who reacted with this emotion, and respond in text or stylus writing to any comment. Below is an overview of our initial prototype, showing both the phone and large interactive display components.
Both of these prototypes facilitated our two primary tasks. Our two primary tasks were:
- Find a piece of art and share an emotional response. Figure out how many people felt the same way as you. Here are the emotional response selection and post-submission screens:
- Leave a comment about an artwork and see how people who felt differently reacted. Here is the large display's comment feed screen:
Through these tasks users can leave their own responses, feel community by seeing responses from people who think similarly, and explore how people with other opinions feel. For more details, visit Paper Prototype.
Testing Process
To test the clarity and usability of our design, we conducted three forms of investigation. The first was a heuristic evaluation where we had two groups of users (handpicked from our classmates) walk through our two primary tasks on our paper prototype. The goal was to identify heuristics of good design on which our paper prototype failed. We then updated our design to ensure that we were heuristically sound. For more details, visit Heuristic Evaluations. The next step of our testing was to consider the cognitive process of using our app. We ran a cognitive walkthrough to determine if the steps required to complete our core tasks with our app followed logically from each other.
Our final and most intensive testing step was to test our design in a more realistic setting, with people in our target user-group. In order to accomplish this, we ran three usability tests. All of the tests were held in a study room in Schow library, which we outfitted to simulate a gallery in a museum featuring our design. By doing so, we provided a scenario in which our design would be used, and placed the user in realistic conditions while still having an uninterrupted, quiet environment. Two of our participants fit into the category of “art amateurs” (self-defined) and one fell somewhere between an “art amateur” and an “art enthusiast”. After our first usability test, we discovered that our protocol needed to be slightly modified to provide users with a slightly higher baseline of context about the design. We made that modification, which greatly improved our next two usability tests.
In retrospect, our testing process definitely shifted as we ran more tests on our paper prototype. In our first few tests we were unsure about exactly how the user would interact with the web-app and the interactive display. After observing a few interactions, however, we began to understand the relationship between the two components better and we were able to use that to change our tasks such that we were explicitly forcing the user to think about the connection between the app and the display. This helped us figure out where there were gaps in understanding.
Testing Results
Carrying out each stage of our testing process -- heuristic evaluation, cognitive walkthrough and usability testing -- has allowed us to glean valuable information about how our design succeeded and failed with respect to principles of usability and crucial design heuristics. Heuristic evaluation yielded myriad changes to our design, most notably pertaining to heuristic 8 (aesthetic and minimalist design) and heuristic 2 (matching between the system and the real world). We learned that our design was at times ambiguous and looked cluttered. To resolve the identified issues, we made changes to the appearance of our emoji icons, adding color, altering some of the expressions and changing the order in which they are presented on-screen so as to follow a more intuitive spectrum of emotion. Here are pictures of the new angry to excited spectrum and the revised confusion emoji:
Additionally, we decluttered our text-heavy pages by making the content more concise. Through conducting cognitive walkthroughs, we learned that our design contained aspects which might not make it easy for the user to understand whether or not their actions would be correct. We changed the wording of our ‘share’ buttons and added help buttons to aid the users in navigating the interface. Here is a before-and-after of our submit emoji screen after clarifying the purpose of different actions:
Usability testing revealed to us multiple insights about how potential users actually felt in interacting with our design. Most notably, we found areas of our design that caused users confusion. Multiple users felt confused by the relationship between the web app and the board; we accordingly added guidance within the phone interface to better explain the spatial and conceptual relationship, and show users where exactly the displays are. Here is one of the screens added to help explain the purpose and locations of the boards:
Users were also found to be confused by some of our visualizations, so we added concise clarification to the interface and added more general visualizations and statistics, which also address a separate issue expressed by our users pertaining to a shortage of interesting features. Here is an example of the new statistics we added:
We made a number of additional minor revisions, explained in detail in the reports below. Overall, our testing helped us understand aspects of our design that confused users or made their experience more difficult, and allowed us to make changes to address these issues.
Final Paper Prototype
After conducting our tests and receiving feedback, we created a final paper prototype of our design. Below is an overview of this prototype: 
.
This final prototype fully supports the tasks of leaving emotional responses and seeing how many people felt the same way, as well as leaving comments and seeing how people who reacted differently commented. As in our initial prototype, there are two main components to this design: a web app that allows users to share their feelings about artwork they find in the museum, view the number of users who felt the same way as them, submit a follow-up comment, and view a selection of comments similar to theirs (as shown below), and a interactive visual display that allows the user to browse paintings in the gallery, see the users who viewed a painting, filter the users by emotion expressed, and view both general gallery-wide statistics and comments and statistics for different subsets of viewers.
Compared to our original paper prototype, our final paper prototype contains multiple added features that improve accessibility and ease of cognitive understanding. They make the design easier to understand and use. A majority of the valuable design changes involved aiding the user in understanding how to use the interactive display, what its purpose is, and how it connects with the web app. Our final prototype of the interactive display, in its idle state, shows an AR-style view of the current gallery with arrows indicating that the user can swipe through the gallery and an icon of a finger along with the instruction “Tap an artwork to explore” to clearly indicate how the user is meant to proceed.
When they select an artwork, they are taken to a screen with the selected artwork and a crowd of people, which, as the text blurb explains, is the group of people who have responded to this artwork.
They are then presented with “emojis” and the option to “Filter by Feeling”. Later they are able to see comment chains and respond to them. If they select to respond they are given clear options of typing or using a stylus (which we discovered was ambiguously presented in our original prototype).
The primary design focus of the web-app is simplicity. We strived to maintain the limited number of screens and options while still adding necessary features such as a help screen with a description of how the app and display are intended to be used, and some clarifying instructions about how the app relates to the display. The help screen is shown here:
We improved overall ease-of-use by combining small amounts of text, making our buttons more clear and descriptive, and adding features such as a map that will direct users to the nearest interactive display.
Digital Mockup
After our paper prototype, we created a digital mockup in Balsamiq. Our digital mockup contains all of the features from our paper prototype, with the addition of a few features we were unable to implement effectively on paper. An overview of our large display mockup and phone mockup is below:
Complete clickable PDFs are available here for the phone mockup and here for the large display mockup One element we were really able to hone in the digital mockup was the use of color. The backgrounds for all of our screens are soft pastels to cultivate a sense of “calm”. Based on feedback we received on our original digital mockup, we have also updated the emoji color to softer colors that are less bright and clash less with the background.
We were also able to simulate hues of color emanating from each painting, which is meant to reflect the most common emotions expressed about that painting. In the actual design, this would be animated. Other feedback we have incorporated includes removing an explicit label on an emoji, fixing color discrepencies on certain buttons, and fixing typos. We chose not to make the groups of people initially gray because this goes against earlier feedback from our usability tests, where it was better to have one group highlighted at the start and have an animation progress through the different emotions (conveying to users that they can select any specific emoji to filter by feeling).
We produced walkthroughs of our two primary tasks throughout all of our prototyping stages. Here are detailed walkthroughs of our two primary tasks in the digital mockup:
Task 1: Find a piece of art and share an emotional response. Figure out how many people felt the same way as you.
Our digital mockup supports sharing an emotion and comments about an artwork. The web-app mockup has a screen that would appear when a user approaches a painting.
The screen displays the work of art at the top followed by a prompt such as “How do you feel about this painting?”. The user is then given six faces to choose from, each representing a different emotion. Upon selecting an emotion, the user is taken to a screen that displays the face they selected with two options: a submit button and a back button.
Each button is accompanied with minimal instruction about what the result of pressing the button would be. After submitting their “emotion” the user is taken to a screen displaying a graphic of the number of people who shared that same emotion, along with the exact number of people.
Task 2: Leave a comment about an artwork and see how people who felt differently reacted
On the web app, after a user submits their emotion they are given the option to comment. If they choose to comment, they are taken to a screen with a comment box and an on screen keyboard, where they can type their comment and submit.
If they submit, they are taken to a screen with other comments similar to theirs displayed in a scrollable timeline fashion.
On this page they see a button that says “see more at the nearest display”. This button leads to a map that directs users to the nearby display.
This button and map were added based on feedback from our usability tests, wherein we discovered that participants did not intuitively understand the relationship between the web-app and the board.
At the board, a user can select an artwork in the gallery by tapping it (as is indicated by the finger image). Alternatively they could choose to see gallery-wide statistics.
Once they select a painting they see a group of people looking at the painting with the tag indicating that these are all museumgoers who saw the painting. They are offered a panel of the same faces from the app. They can choose one to see a colored group of people who felt that emotion.
The number of people colored is proportionate to the percentage of users who expressed that emotion. If the user taps the group, they see a comment thread.
Next to each comment there is a dual option: to “View Thread” or “Reply”. If they select “reply” a large text box appears on the screen with two button options: “Type” or “Write”. If they choose to Type an on-screen keyboard appears.
If they choose to write they are directed to write using a stylus located near the board.
Discussion
Through this iterative design process, we have altered our design to increase both user understanding and user engagement. Our usability tests revealed a lot of universal usability issues that needed to be addressed, but they also revealed ways we could add or change content to enhance user enjoyment. An important component of these realizations was understanding that users don’t necessarily know how to solve their own problems, and at first we also may not know how to address them. Changes between iterations do not always solve the problems we hope they will, but it is important that the overall design improves over time. We now better understand that while the user is not like us, the user may also not be like fellow users. Not every user would like every new addition, and it’s good to think a bit outside of our targeted audience as we did in arranging our final usability test. Through multiple usability tests and other diagnostic exercises, we have also improved the flow of our most important tasks while making those tasks more specific and achievable for users. If we had even more time, we could have continued adding and refining more content rather than focusing on fixing usability issues. Overall, the iterative design process was a valuable tool for improving our design.