P4 Testing: Nan Nan Art Studio Website

1. Document

P4 Testing: Nan Nan Art Studio

Megumi Takada and Meltem Ozcan

CS 110-01 May 9, 2014

2. Administrative Details

Client Name: Nan Nan, artist and founder of Atutu Art School

Website Name: Nan Nan Art Studio

Contact person: Jennifer Henbest

Link to our website: http://cs.wellesley.edu/~melmeg/beta/homepage.html

3. Testing Document

Our Google Form includes the following four main sections:

  1. General Information:
    This section asked for the platform type, browser type, audience and Internet connection.
  2. Scenario 1 - Volunteering:
    This section asked that testers imagine being interested in helping Nan Nan out by volunteering. The main aim was to have testers find the volunteer page and to test whether the form worked. Here, we asked questions about their success in completing the scenario, how difficult the task was, what made the task simple or confusing, the steps taken to complete the task, and any other suggestions they had.
  3. Scenario 2 - Browsing the Artwork:
    This section asked that testers imagine being interested in Nan Nan’s artwork. The main aim of this scenario was to test whether the artwork galleries worked. The questions we asked were the same as the ones in scenario 1.
  4. General Questions:
    Finally, we asked for more general questions, such as how simple/confusing it was to navigate the website, how simple/confusing it was to understand who Nan Nan was, how aesthetically appealing the design was, details and features they would like to see, as well as any other comments they had.

Link to the Google form: http://bit.ly/1fYDAL2

4. Tester Audience

In order to receive feedback from multiple people from a range of backgrounds, we made an effort to make the feedback form right after we completed the website. We publicized our feedback form by posting a link on Facebook and emailing acquaintances. Ms. Jennifer Henbest, the international school art teacher in Japan who we worked with throughout the entire project, was able to help us receive feedback from a larger group of people that better fit our intended audience of potential donors and volunteers, people interested in Myanmar’s art and culture, as well as art teachers and students. We were surprised by the number of people who provided us with feedback, totaling a number of 24 people. Out of the 24 responses, 48% identified as college students; 24%, as those interested in donating and volunteering; 18%, as those interested in Myanmar’s art and culture; 3%, as K-12 students; and 3%, as art teachers. All people giving feedback could check more than one label they identified with. Given that it was difficult to reach out to people off campus, we are especially satisfied with the percentage of people who identified as those who are interested in donating and volunteering and who are interested in Myanmar’s art and culture. We were not able to perform live testing.

Audience Bar Graph

5. Testing Platform

The most popular platform our testers used is Macs (63%), followed from far behind by Windows (17%). 13% of our testers used iPads and tablets, whereas 8% of our testers used iPhones or smart phones to view our website. We had no testers using other platforms like Linux/Unix, hence we plan to test our website in such platforms in the future for bugs.

Chrome was the most common browser type with 58%, followed by Safari (33%). The third most popular browser type was Firefox with 8%. None of our testers tested our website using Internet Explorer or any other browser type. As we will with Linux/Unix platforms, we hope to test our website using Internet Explorer.

As for the Internet connection, 50% of testers used broad band, while 33% used the Wellesley College system. No one complained about slow-loading times.

Platform Type Chart
Platform Type
Browser Type Chart
Browser Type
Internet Connection Chart
Internet Connection

6. Feedback Summary

Feedback for Scenario 1: Volunteering

Most users were able to complete the task successfully, although there were some people who could not do so. Those who were successful commented that the volunteer page was easy to find through the nicely-labeled menu bar categories that made sense. As for the volunteer form itself, there were many comments made about their satisfaction with the “Availability” section: “You guys even had it split up into one-time and regular basis, which I think makes a lot of sense. Also, the way that those categories open and close is really neat. It’s a small thing but I think it definitely adds to the website.” Another tester was delighted that very little information was needed to fill out the form.

One main aspect that made the testers confused addressed what happens after clicking the “submit” button. Many people were confused as to whether the form was processed successfully, because it took some time to recognize that a “thank you” message had been added below the submit button. One tester suggested that the form clear when the button is pressed. Finally, others asked that we include more contents regarding the logistics of volunteering.

Could you complete 
	                                                       the task? Volunteering Scenario
Could you complete the task?
Rate how confusing/successful 
	                                            it was to complete the task. Volunteering Scenario
If you were successful, please rate how confusing/successful it was to complete the task. (1=very confusing; 5=very successful)

Feedback for Scenario 2: Browsing the Artwork

Testers reported an even more successful experience with this scenario compared to that of the previous one. They reported that the photo galleries were very easy to find, and once on the pages, testers reported it was easy to click on the artwork and to navigate between the pictures.

Some suggestions for further improvement included the advice to reorganize the pictures, so that those with the same theme were shown together. Others suggested the title to be larger and a darker overlay and overall larger photo. Another suggested we customize the pop-up window to better fit the tone of the website.

Could you complete 
	                                                       the task? Browsing Scenario
Could you complete the task?
Rate how confusing/successful 
	                                            it was to complete the task. Browsing Scenario
If you were successful, please rate how confusing/successful it was to complete the task. (1=very confusing; 5=very successful)


The majority of people were satisfied with the color schemes, with particular comments addressing their satisfaction of the background color, the parchment texture, and the pastel colors of the tabs. Other parts of the design, such as the figures that show up on the menu bar, and the overall simple yet pleasant design was also appreciated. Here is a testimonial: “I thought the website was perfectly structured for an artist, but whimsical enough to double as a site for a children’s art school.”

Some of the main criticisms referred to the font, which was too small and fancy. Some regarded the font to be “a bit overwhelming to read.” Others also disliked the font used in the slideshow on the homepage, which they regarded to “not match the font of the tabs.” One person also said that they thought the background color was too plain. Finally, a tester on the iPad regarded that it was “hard to see the colors of the little people holding hands on the iPad.” As for the animation, one tester mentioned how “the slideshow looks rather plain in the homepage” and another suggested that we include animation in the children’s artwork page, such as “some kind of carousel.”

How visually appealing were the color schemes?
How visually appealing were the color schemes?
(1=very unappealing; 5=very appealing)


As can be seen from the graph, most people said that the website was easy-to-navigate.

Many people did complain, however, about the menu bar, which was a little difficult to click. We had made the text clickable but not the surrounding background color of each tab, therefore causing some confusion amongst testers. Another tester commented that it was confusing how some of the buttons changed color, but were not clickable. In addition, one tester also pointed out that it was not necessary to include links on the slideshow.

How easy/confusing was it to navigate between pages to find what you want?
How easy/confusing was it to navigate between pages to find what you want?
(1=very confusing; 5=very easy)


As can be seen from the graph, many people reported that it was easy to understand Nan Nan and the work that she does.

In the comments section, however, many people provided us with ideas as to how to make the website even more comprehensive. One person suggested that we come up with a clearer mission statement and display it largely on the page. Another person suggested we include a tab called “Yangon,” where we include pictures of downtown Yangon near the studio. Others suggested we include a short video clip of Nan nan working, more interesting content in the Inspirations page, and a “languages spoken” input field in the volunteer form. Finally, another person suggested we change the pictures on the top of the “About the School” and “Get Involved” pages.

How easy/confusing was it to get to know Nan Nan and the work that she does?
How easy/confusing was it to get to know Nan Nan and the work that she does?
(1=very confusing; 5=very easy)


In the “comments” section, some people also commented about our usability, saying that they appreciated it how user-friendly it was. Many commented on the volunteer forms and artwork galleries, which were easy-to-use, while others also commented on the “Contact Us” page. He/She said, “I really like the feature on the ‘Contact Us’ page that drops down the email/address/phone number when the corresponding button is clicked; it was a good way to save space on the page.”

Others provided suggestions as to how we can make the website more user-friendly. There were many comments made that they would like to see a “Facebook” like/share icon implemented onto the website. Another person also suggested a link to a PayPal account.

7. Our Response to the Feedback

Taking into consideration the constructive feedback we received, we plan to make a number of changes to our website that will make it easier to perform the two scenarios, as well as improve the design, content, navigation and usability.

In regards to the volunteer form, we plan to make it easier for users to know that they have successfully submitted the volunteer form by either clearing the form upon clicking on ‘submit’ or by making the ‘thank you’ message larger and more easily recognizable. We hope to add a “languages spoken” input field into the form as well. One tester was concerned about the volunteers “taking advantage of the children” which is not really a problem that we, the programmers of the website, can tackle and more of an issue that Nan Nan will have to deal with. However, we plan to bring this to her attention and suggest that she interview potential volunteers to get an idea of how trustworthy they are. These interviews can be scheduled upon the submission of the volunteer forms and can be conducted over the phone or by email. Once Nan Nan decides on the medium in which she would like to tackle this issue, we plan to add a warning about this interview on the webpage.

As for the artwork gallery pages, we will consider making the font size larger for the names of the paintings, but we think the overlay should remain transparent, because it will allow the users to both observe the enlarged picture and see the other options while scrolling at once.

As for the slideshow pictures, we plan to keep the font the way it is for now and ask Nan Nan how she feels. We actually manually edited the pictures through Pixlr and added the font on the image, so it will be a little time consuming to change the font. Thus, we plan to think about how urgent this change is based on how Nan Nan feels about it.

For the menu, we realized upon feedback that we had only made the text itself clickable and not the surrounding colored divs. Fixing this will be one of our top priorities, as it is not simply an issue of preference but one of usability. We plan to modify the cursor so it is obvious which tab is clickable, and we plan to change the link to encompass the whole of the tab rather than a section of it.

If Nan Nan requests the addition of extra content such as a page about Yangon as suggested by a tester, we will add such extra pages to the website. We also hope to add a Facebook icon, a PayPal icon and a Just Giving link to the website once Nan Nan creates these accounts.

We hope to continue helping Nan Nan in the future as her website audience grows and the content needs updating. It is our aim to help Nan Nan have a medium she can use to best reach her audience and we will keep in touch with her so that she can let us know of her requests.

8. Self-Reflection

This project has been more fruitful than any of us could have imagined. We came a very long way from our primary mockups to our fully-functioning website in such a short time. The fact that we could create something that will actually be in use makes us proud, and we are humbled by all the improvements we can still make and hope to make in the future. Leaving aside the challenging path of learning HTML, CSS and JavaScript well enough to understand and use it, we have also learnt about ourselves, our sense of responsibility and our priorities.

Not giving up and trying again and again seems to be the general theme that defined this whole process for us; we made a lot of mistakes and spent long hours debugging, but just the fact that we kept on trying to get it right helped us to eventually get it right. Tiring as it may be, we have learnt that the extra effort and time we put in to a task is bound to bring us closer to success. All the positive feedback we received makes us happy that we went the extra mile.

This project has been a complete team effort - we have both put in so much to our website, and we have cheered each other on when we were hindered by the coding issues that just did not seem to be fixed regardless of our attempts to solve them. We worked efficiently and in coordination, and our teamwork was solidified by our mutual respect and growing friendship. Through designing and building the Nan Nan Art Studio website, we have realized how powerful teamwork is when it is done right.

Valid CSS!

Valid HTML 5