GR6 - User Testing

Design

Front Page:

The Campus Connect homepage is characterized by a very simple design. We decided that the main feature of this page should be the text box where users can search for the college they are interested in. Although we currently only implemented the MIT page, we added auto-complete to the search box because we thought this would be an important feature for error prevention and efficiency. We also added four boxes at the bottom of the homepage that reflect the colors of the tabs on the university-specific page. In each box, we added the name and a description of the corresponding tab, in order to introduce the user to the different section and thus increase learnability.

Tabs:

Our design is characterized by a tab layout that divides the information about each college into four different sections: Main, Student Reviews, Photo Map and Forum. These tabs are highlighted by the selection of four highly contrasting colors. Initially, we didn’t have a way to indicate which tab was currently being displayed and we found that users were getting confused about which section of the website they were in. To improve the visibility of the tab layout, we added the thick line of the same color as the tab.

Based on the user feedback from the paper prototype, we found that many students were confused about the difference between the Reviews and the Forum tab. They were unsure of where to find the information they were looking for and the majority of them went straight to the Forum when looking for current students’ perspectives since they perceived the reviews as being more formal and official. As a result, we decided to change the review tab’s name to “Student Reviews”. The feedback from the Heuristic Evaluation also pointed out that users were initially confused about why they were presented with a map in the Photos tab until they actually clicked on the pin to find the pictures. Due to this confusion, we changed the name of the tab to “Photo Map” in order to build the user’s expectations that the photos would be presented on a map of campus.

Main Tab:

The Main tab is a crucial part of the design since it is the first page the users sees about the college they are interested in. The final version of this page has four components: the quick facts, a carousel with pictures of campus, the average ratings in five categories and some recent reviews. We have the quick facts as a bulleted list so that the user can quickly skim over the facts, leading to greater efficiency. The ratings are shown as icons that represent the topic of the rating, for example footballs for sports. We chose to use icons because they are more learnable for the user and it is easier to understand what they represent (more books = stronger academics). Finally we decided to have a recent reviews section to reiterate the fact that Campus Connect is about students and their opinions.

Topic Visualizations:

Our final design includes two different visualizations for the topic names in the Student Reviews and Forum tabs. Both tabs follow the same design in order to maintain some consistency in the layout. While maintaining a consistent layout, we differentiated them by setting the color of the text to be the same color as the corresponding tab color (green for Student Reviews and purple for Forum) in order to improve visibility. This was especially important since the distinction between reviews and the forum was not always very clear in the users’ heads.In our initial design, we only had the tag cloud view for the topic names. However, based on the feedback from our paper prototype, we realized that the tag cloud was effective for browsing but very inefficient when looking for a specific topic. As a result, we decided to add the list view with the topics sorted alphabetically. We also added the possibility to sort the topics in the list view since the feedback from the heuristic evaluation pointed out that it would be useful to sort the topics both alphabetically and by frequency.

Ratings:

As shown in the screenshot of the Main page, a set of five ratings are displayed using icons that represent the topic of the rating. These ratings are out of five, and the number of colored icons represents the average value of the rating. We decided to use integer values for the ratings as it would make the graphic design more simple and clean; having partially shaded icons would make the rating values less visible.Our final design also includes a way for a student attending the school to add their own rating. We considered having this directly in the main page, but decided that this would be more confusing for the user so we placed the part to submit your own ratings in a separate overlay. While this might sacrifice some efficiency, it improved learnability and visibility. We also wanted the rating system to be very intuitive and consistent with other star rating systems, while still keeping the icons used on the Main page. The final rating system is an example of a direct manipulation interface since the user can drag across the icons to fill in as many “stars” as needed.

Photo Map:

The Photo Map tab displays a map of campus with pins on locations where photos are available. When the user clicks on the pin, they can see the name of the building and a link displaying the number of photos present for that building. When they click on the link, they can scroll through all the corresponding pictures.

Originally this tab was just called Photos.  After confusion from our test users about seeing a map when they clicked on photo, we changed the name to Photo Map. During user testing our users also praised our improvement on the Facebook photo overlay.   They loved how you could see which pictures were coming next.

Reviews Page:

The review page shows the reviews about a certain topic, in this case Parties. On the review pages we wanted to have all the information about the user next to the review they posted since some students might want the opinion of younger students or from a certain major.  

When the user clicks the button to add a new review we added the option of creating their own topic if they wanted to even though the current topic is automatically filled in. The reviews are sorted chronologically, with the most recent at the top.

Implementation

Our implementation uses the Facebook Connect API in order to sign into the website. We decided to use this instead of having the user create a new username and password, seeing as it would be more efficient and easy for the user. We used Facebook Connect to obtain the user's profile picture, name and educational history. In fact, the application only lets users post reviews and ratings about their own college, so we used the educational history in order to access the names of the schools they have attended.

We also used Google Maps API v3 for the PhotoMap tab. This new version of the API did not allow integration with the Fancybox framework that we were using for overlays. As a result, we changed our design so that the images would be displayed directly in the info window that pops open when a user clicks on a pin. In addition, due to the limited documentation and examples with the new API, we were unable to get the info window to resize when the user clicks on the link to see the photos. As a result, the info window is automatically as big as the photo carousel.  The new API allowed us to not have to use an API key which is good for working with partners.

For the persistence layer, we used Ruby on Rails, which unfortunately we were unable to integrate with the frontend.

Evaluation

Briefing:

Campus Connect is a website that helps high school students get more detailed and accurate information about the colleges they are considering through reviews, ratings and photos posted by students currently at the university. High school students can also post questions to ask for specific information they can't find anywhere on the website.

Today we'll be testing our design and we need your help to find the problems with it! We have some short tasks for your to complete. Think out loud as you're completing the tasks so that we can understand your thought process. Also keep in mind, that we're testing our application, not you!

Tasks:

College Student:

1. Log in
2. Rate MIT
3. Post a review about Party Life
4. Answer a question about Diversity

High School Student:

1. Log in
2. Find what the student center looks like.
3. Current students think about the party life at MIT is like?
4. Hispanic organizations on campus, already looked through reviews but didn’t find anything

User 1 (College Student):

Female senior at MIT studying Course 3. She is on the Tennis team and in a sorority. She hosts prefrosh very frequently for the tennis team. When she was a senior in high school she was very decided against MIT, until she visited campus for CPW and she understood that MIT was a better fit for her.

• Wondering why she has to log in through Facebook. Will it post her activity on Campus Connect on her Facebook wall? She suggested there should be a paragraph somewhere on the home page, explaining why she needs to log in.
• Confused by the “+ Rating” button. She said it would be more clear if the button said ”Rate MIT” or “Add your Rating”
• When adding her rating, she was confused about what the “Sports” rating was referring to. Was it about the sports culture from a fan’s perspective or the athletic program from an athlete’s perspective? Since at big schools most people aren’t athletes, she assumed it was the first of the two options. She suggested it should be called “Sports Spirit” or “Sports Culture”
• Said she knew was “+ Review” meant because she saw it when she added the rating, but she suggested we change it to “Add Review”
• Asked if there was a way to rate review (thumbs up and thumbs down) in case she really agreed or disagreed with a certain review.
• In the Photo Map section she commented that it was fairly similar to MIT’s campus map but that most schools don’t have a map like MIT’s so this would be really helpful! She also liked that she could look at the map with the satellite view

User 2 (High School Student):

Male senior at Carlsbad high school in San Diego. His high school has 3500 students and is fairly diverse. He wants to study math or engineering. He’s interested in MIT or colleges in California.

• Liked the Main page because it was very organized. He really liked the rotating pictures and the quick facts since they were really concise
• Knew exactly where to go when we read the tasks to him
• Found the topic names immediately in the tag cloud view

User 3 (High School Student):

Female junior at W.T. White high school in Dallas. Over 70% of students are Hispanic and her class has 900 students. She is number 9 in her class and she wants to study engineering. She already went to visit several colleges in the Northeast and she really wants to go into Columbia.

• Really liked the icons for the ratings, especially the drug culture one
• She was really interested in reading the quick facts and she said they provided really useful information that was easy to skim over
• Went directly to the Photo Map tab when asked to find the what the student center looked like
• When she was looking at the tag cloud in the Student Reviews section she was confused about what the acronyms stood for (UROPs, CPW, etc.)
• When looking for information about the Hispanic groups on campus, she wasn’t initially sure what topic to look under, so she clicked on the list view in order to see the topic names more clearly

Reflection

During this process we learned just how important testing can be.  After each task we gave someone, there was always an epiphany.  The user would say something that related to a use case that we never thought about.  

We also learned how important it is to have good team dynamics.  A problem we faced initially was that none of us are very opinionated and we didn’t know which project to chose or where to start in the design process.  Each person on our team had different strengths but they didn’t always match up to the demands of our project.  Sometimes we ran into issues of different technical skills especially when it came to the database implementation.  The decision to use Ruby on Rails instead of PHP seemed insignificant at the time but we later found out that it was difficult to integrate with the front end. Since only one person on our group had experience with Ruby, it was hard for the others to help out with the backend.  When it came down to crunch time, our final implementation suffered because we couldn’t work together to solve the problems.  

As a team we learned how the terms used in our design have such a huge impact.  Several times we found that adding more descriptive text or changing the wording of something made a huge difference.  We wanted to keep the text short but the user frequently asked for an extra word on a tab or a button.