Final Writeup

Final link: http://mv.ezproxy.com.ezproxyberklee.flo.org/collegeroute/

Design

Over the course of the semester, our design has changed and adapted accordingly to the many iterations of paper prototyping and user testing.

...

As we received feedback from our peers, user tests, and instructors, we drastically changed the flow of our website by suggesting to embody more of a two-step process. The On the first page is for searching , users search for schools. The second page is a combination of selecting schools, planning an itinerary, and reviewing the itinerary. We made this decision because we realized that those three tasks are very much intertwined with each other, and it would be very inefficient for the user to have to switch back and forth between two pages.

...

We knew that planning a college visiting trip usually revolves a lot around location. Most logistics are determined based on colleges' relative locations to each other. For this reason, we used a map to allow the user to visualize the schools that s/he searched for. We decided it was most intuitive to pick a school to visit based on its location. Our map started out at the smallest zoom level, so we can display all school results. We did this by clustering schools in certain locations together. As the user zooms in, the granularity decreases and the specific schools are made knownpins appear for each school. This page allows users to select schools that they plan to visit. They can do this in two ways: users can either select the school from the panel at left, or, they can select the pin representing the school to view a detailed pop out that will allow him/her to select the school. We decided to give the user two options because the affordance of clicking on the pin was sometimes lost on those not familiar with the Google Maps API. Since selecting schools is a very important task, we give a lot of feedback when a school is selected - we add a green border, and move the school to the top part of the panel. We also change the color of the pin.

Planning the itinerary:

This part The itinerary planning portion of the website was the part that underwent the most changes. The task of event and trip planning is a tough task, in any context. Being able to represent different types of events at different schools at different times that are or aren't selected proved to be our most challenging problem. We went through multiple iterations of lists and panels, and ultimately ended up with a calendar style representation-based interface. We decided the intuition behind a calendar was the most consistent with the user's mental model, since they are trying to schedule what events to attend. To prevent information overload, we decided to split up the events by school so the user isn't overwhelmed by the display of many multi-colored events. One aspect we toyed with was how to represent selected events of different schools. Since we decided to use tabbing to filter our events, we wanted to make sure selected events weren't lost in the mix. Our main goals were to allow the user to choose events in an order that made the most sense. This means that the user will make decisions based on school location. This is why we have access to the map pane handy, so that the user can choose an order of events that minimizes uneccessary travel, etc. Adding tabs to the interface was a risky decision because the affordance of tabs can be vague. We try to fix this by color coding the schools and changing the entire background color to the school's color, so that the feedback from changing schools is very obvious.

Reviewing the itinerary

Image Removed

When the entire process is done, we realized that the user might want to summarize their plan. While a calendar may be useful for actual event scheduling, it is usually more efficient to refer to a list as an agenda. We fix this by providing an itinerary summary, and a print feature.

Implementation

Our system, built with a Django backend, allows users to store and save the trips that they plan as well as the personal information used to match the user to particular colleges. The system is scalable in the sense that it would be easy to add additional attributes (top majors, etc.) as new search criteria in the future, but some aspects of our implementation have led to latency issues in loading different pages. 

...

Search Page

...

Each school has attribute values associated with it for each of the different search criteria (GPA, SAT, and ACT); users who are logged in will also have attribute values for each of those criteria. The search functionality(the "Find Schools" button) runs a matching algorithm between student attribute values and college attribute values. When the user hits the "Find Schools" button, a new Trip object is created in the database.

...

Select Schools Panel

...

We combined the "Select Schools", "Plan Itinerary", and "Review Itinerary" options into one page using JQuery UI Tabs; whenever a user searches from the Search Page or selects this tab after being on another tab. The latency associated with loading the search results and the map features in the Select Schools Panel was one of the primary usability issues with our interface. Our interface gives the user some feedback about the latency associated with that page through the use of a "loading spinner" and text which indicates that our application is "Finding schools for you...". However, we do not direct the user to a cached version of the search result page if they want to revisit their school selections; the page only displays once it has been reloaded. We were concerned about potential race conditions between AJAX requests to modify the list of selected schools on the cached page and the refreshing of the page. We did not analyze the implementation bottlenecks that were causing these delays, but in future work, we would want to understand better and address the source of these delays. We would also want to implement a stronger result caching scheme, either in our data representations or in the manner in which the tabs are loaded.

Plan Itinerary Panel

Our application uses the FullCalendar to allow users to display events within a date window specified at the top of the page. When we began the design process, we expected that users woud select their trip dates before selecting the events that they wanted to attend. As we shifted to a calendar-based itinerary in the latter stages of the iterative design process, it made more sense for users to be able to update the dates of their visit on the same page as the calendar. One alternative for implementation would be to dynamically update the contents of the calendar as the view display changed. In this alternative model, there would be no concept of trip start and end dates. This design could be more efficient for the user; users would not have to enter their trip dates. However, given the logistics involved in a college visit, we would expect that most users would have start and end dates for their trip in mind. Users would still have to navigate to their desired timeframe, limiting any potential efficiency benefits. Our design also offers safety advantages; users won't accidentally select events that are outside the trip dates that they have in mind.

Review Itinerary Panel

The implementation of the review itinerary panel was fairly straightforward. Print functionality was added via standard javascript methods.

Evaluation

Users

We tested our interface on three users. Our two original user classes were students and parents who were applying to colleges and planning to visit those schools. The three users tested were broadly representative of those user classes. The users in the evaluation were personal contacts of our team members (either 

• MIT undergraduate who has several siblings currently looking at colleges
• Mother of three children with one child currently looking at and visiting colleges and two children who have already completed the college search process
• Mother of two children who have already completed the college search process

Tasks

Our users were given the same tasks that had been given to those testing our paper prototype. Namely:

1. Imagine you are a high school junior with a 3.6 GPA and the following SAT scores: Math: 640, Reading: 690, Writing: 710. Find schools in New England that might be a good fit.  Note: for this prototype the SAT, GPA, and ACT data for each school was randomly generated and does not reflect the actual data associated with that school.
2. Select a few schools that you would like to visit during summer vacation (June 1-8^th, 2013).
3. Plan an itinerary for visiting the schools selected in Task 2.

Users 1 and 3 were briefed on the task in person; User 2 was briefed on the task over Skype (screen-sharing was used to allow for remote observation).

Usability Problems

Adding tabs to the interface was a risky decision because the affordance of tabs can be vague. We try to fix this by color coding the schools and changing the entire background color to the school's color, so that the feedback from changing schools is very obvious.

Based on our user testing, we also changed how users select the dates associated with their trip. Originally, users had to select the dates and then select "Refresh Events" in order for their events to appear on the calendar. Based on user feedback, we changed this so that events will automatically refresh when a user selects a new start or end date for their trip.

We also introduced safety mechanisms to ensure that when deselecting schools or changing trip dates, users are made aware of whether they would lose any selected events as a result of their changes. If the changes do not affect the selected events, the changes go through immediately; otherwise, the user must confirm that he or she wants to make those changes.

Reviewing the itinerary

Image Added

When the entire process is done, we realized that the user might want to summarize their plan. While a calendar may be useful for actual event scheduling, it is usually more efficient to refer to a list as an agenda. We fix this by providing an itinerary summary, and a print feature.

Implementation

Our system, built with a Django backend, allows users to store and save the trips that they plan as well as the personal information used to match the user to particular colleges. The system is scalable in the sense that it would be easy to add additional attributes (top majors, etc.) as new search criteria in the future, but some aspects of our implementation have led to latency issues in loading different pages. 

...

Search Page

...

Each school has attribute values associated with it for each of the different search criteria (GPA, SAT, and ACT); users who are logged in will also have attribute values for each of those criteria. The search functionality(the "Find Schools" button) runs a matching algorithm between student attribute values and college attribute values. When the user hits the "Find Schools" button, a new Trip object is created in the database.

...

Select Schools Panel

...

We combined the "Select Schools", "Plan Itinerary", and "Review Itinerary" options into one page using JQuery UI Tabs; whenever a user searches from the Search Page or selects this tab after being on another tab. The latency associated with loading the search results and the map features in the Select Schools Panel was one of the primary usability issues with our interface. Our interface gives the user some feedback about the latency associated with that page through the use of a "loading spinner" and text which indicates that our application is "Finding schools for you...". However, we do not direct the user to a cached version of the search result page if they want to revisit their school selections; the page only displays once it has been reloaded. We were concerned about potential race conditions between AJAX requests to modify the list of selected schools on the cached page and the refreshing of the page. We did not analyze the implementation bottlenecks that were causing these delays, but in future work, we would want to understand better and address the source of these delays. We would also want to implement a stronger result caching scheme, either in our data representations or in the manner in which the tabs are loaded.

Plan Itinerary Panel

Our application uses the FullCalendar to allow users to display events within a date window specified at the top of the page. When we began the design process, we expected that users woud select their trip dates before selecting the events that they wanted to attend. As we shifted to a calendar-based itinerary in the latter stages of the iterative design process, it made more sense for users to be able to update the dates of their visit on the same page as the calendar. One alternative for implementation would be to dynamically update the contents of the calendar as the view display changed. In this alternative model, there would be no concept of trip start and end dates. This design could be more efficient for the user; users would not have to enter their trip dates. However, given the logistics involved in a college visit, we would expect that most users would have start and end dates for their trip in mind. Users would still have to navigate to their desired timeframe, limiting any potential efficiency benefits. Our design also offers safety advantages; users won't accidentally select events that are outside the trip dates that they have in mind.

Review Itinerary Panel

The implementation of the review itinerary panel was fairly straightforward. Print functionality was added via standard javascript methods.

Evaluation

Users

We tested our interface on three users. Our two original user classes were students and parents who were applying to colleges and planning to visit those schools. The three users tested were broadly representative of those user classes. The users in the evaluation were personal contacts of our team members (either family or friends).

• MIT undergraduate who has several siblings currently looking at colleges
• Mother of three children with one child currently looking at and visiting colleges and two children who have already completed the college search process
• Mother of two children who have already completed the college search process (was already familiar with tasks and was not administered standard briefing)

Briefing

Purpose:

• Parents often plan trips for their high school age children to visit colleges, but there are a lot of challenges along the way that we are trying to alleviate.
• Find good fit colleges in a certain geographic area
• Balance multiple campus tours/info session times in one easy place

Tasks:

• A few tasks as if you were a college junior planning visits to schools

Disclaimers:

• We’re not testing you, we’re testing the interface, feel free to ask questions, but also try to explore and see what happens

Conclusion:

• Do you have any questions? If I can’t answer them now because it will interfere with the test I will definitely answer all unanswered questions at the end.

Tasks

Our users were given the same tasks that had been given to those testing our paper prototype. Namely:

1. Imagine you are a high school junior with a 3.6 GPA and the following SAT scores: Math: 640, Reading: 690, Writing: 710. Find schools in New England that might be a good fit.  Note: for this prototype the SAT, GPA, and ACT data for each school was randomly generated and does not reflect the actual data associated with that school.
2. Select a few schools that you would like to visit during summer vacation (June 1-8^th, 2013).
3. Plan an itinerary for visiting the schools selected in Task 2.

Users 1 and 3 were briefed on the task in person; User 2 was briefed on the task over Skype (screen-sharing was used to allow for remote observation).

Usability Problems

1. Calendar view does not default to selected trip dates - Major (Fixed)
   Both Users 2 and 3 could not find events on the calendar originally because the calendar view did not default to the selected trip dates. Therefore, users had to navigate through an unfamiliar calendar interface to the dates they desired. This issue was not fully apparent to the developers because the start date of the trip defaults to today. This issue was easily fixed by changing a setting in the calendar initialization.
2. Users must hit refresh button to apply new date range - Major (Fixed)
   After selecting the dates, Users 2 and 3 struggled to apply their changes; they expected that the new dates would take effect immediately. They did not realize they had to hit "Refresh Events" in order to apply their changes. This issue has been resolved; now, once the start or end dates are changed, the calendar refreshes to reflect the new events.
3. Users did not understand the map affordances - Major
   Users 2 and 3 did not select schools from the map or click on the map in their initial run through the tasks; older users may be less familiar with viewing and clicking on map clusters. User 1 discovered the affordances associated with the clusters and the map pins by accident. Help text would be a convenient way to allow users to discover these affordances.
4. Users did not immediately understand the relationship between displayed search results and map display - Minor
   The displayed search results only include those search results that are within the viewport of the map. Text which explicitly labeled the list of results could help explain this (e.g., "Results in map view") 
5. Users did not understand the ordering of the search results - Minor
   User 3 did not realize that the schools were ranked according to how well they matched the user's search criteria. Using more explicit text for the results list woud also clarify this issue; a header like "Top Results in this Area" could be an effective fix.
6. Users did not initially understand calendar affordances - Minor
   Despite helptext, some users attempted to double-click on calendar events, which has the effect of selecting and deselecting the event. More explicit instructions could resolve this issue, like "Click once on an event to add it to the trip".
7. Users could not figure out how to go back and start a new trip - Minor
   The logo in the top-left hand corner could be bigger or become highlighted upon hovering to better indicate a link functionality.
8. Users creating profiles have to delete the pre-filled values (fragile text does not work) - Minor
   We could change the event handling of clicks inside the input box.
9. After entering scores for a given test (SAT or ACT), section labels (Math, Reading, Writing, etc.) disappear in the user profile page - Minor
   We could add a set of labels for each of these boxes, or add tooltip text
10. Calendar view does not default to selected trip dates - Major (Fixed)
    Both Users 2 and 3 could not find events on the calendar originally because the calendar view did not default to the selected trip dates. Therefore, users had to navigate through an unfamiliar calendar interface to the dates they desired. This issue was not fully apparent to the developers because the start date of the trip defaults to today. This issue was easily fixed by changing a setting in the calendar initialization.
11. Users must hit refresh button to apply new date range - Major (Fixed)
    After selecting the dates, Users 2 and 3 struggled to apply their changes; they expected that the new dates would take effect immediately. They did not realize they had to hit "Refresh Events" in order to apply their changes. This issue 
12. Users did not understand the map affordances - Major
    Users 2 and 3 did not select schools from the map or click on the map in their initial run through the tasks; older users may be less familiar with viewing and clicking on map clusters. User 1 discovered the affordances associated with the clusters and the map pins by accident. Help text would be a convenient way to allow users to discover these affordances.
13. Users did not immediately understand the relationship between displayed search results and map display - Minor
    The displayed search results only include those search results that are within the viewport of the map. Text which explicitly labeled the list of results could help explain this (e.g., "Results in map view") 
14. Users did not understand the ordering of the search results - Minor
    User 3 did not realize that the schools were ranked according to how well they matched the user's search criteria. Using more explicit text for the results list woud also clarify this issue; a header like "Top Results in this Area" could be an effective fix.

General Feedback

All in all, the feedback for CollegeRoute was positive. Users were generally excited about the idea and thought that the overall experience was well-designed and implemented. Very little comments were negative in such a way that required immediate and drastic change or improvement; instead, any constructive criticism seemed to point to features that could be implemented and added on top of the current design.

...