Prototype Photos
These photographs were all taken of our first iteration of our prototype, which currently has 3 screens to step the user through the process of finding schools, selecting which ones to visit, and planning a trip.
Search
This screen would be the welcome screen for our web page, where a user can quickly enter information relevant to their college search and then proceed to begin searching. The GPA, SAT, Similar Schools, and Region fields are all text-boxes that can be filled in by the user that will be used to narrow down the school search. In the top corner there would be an option to log in, which would allow the user to access saved trips and schools that they might be interested in visiting so that they can plan multiple trips and save the results.
Select
The selection screen is divided into 3 panels and allows the user to begin picking which schools to visit based on the search criteria entered on the previous screen. The center panel is the focal point, presenting the user with an interactive map that they can use to navigate around and see available schools. At the highest level (i.e. if no region is specified) a map of the U.S. would be shown with dots over each region that have the number of possible match schools in that region. As the user zooms in on the map (either by clicking on the map or using the zoom bar), more views will be shown and the labels will split and show more and more specific divisions of where schools are located. At the final zoom level (presented in this photograph) the specific schools in an area will be shown with pins in the map. These schools will then populate the left hand panel labeled "Results," and the user can add the schools to the "Selections" panel (either by clicking on them in results or by clicking on them on the map and adding them that way). Then the user can specify the dates of their visit and be taken to the planning screen.
Plan
The final screen plans the visit itinerary. Keeping with the 3 panel scheme, the left hand panel is populated with the list of schools selected by the user to visit. The user can then select schools from this panel and the middle panel will show tour and information session times for that school that the user can add to their schedule (the right panel). The schedule panel is dynamic and the user can rearrange the order in which they plan to visit schools and on which day they plan to go to which school. Each school will be attached to the selected events (tour, info session, or custom events that the user would like to enter, such as a visit with a coach or department tour). The user can go through the process of selecting times for each school that they plan to visit and then rearrange the schedule accordingly.
Briefing
We had the following notes for briefing participants:
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.
Scenario Tasks
These are the three tasks that users were given when interacting with our interface, the first roughly corresponds to the first and part of the second screen (mainly focused on searching), the second task targets the second screen (selection) and the third the third screen (planning the itinerary).
Task 1
Imagine you are a high school junior with a 3.6 GPA and 2050 SATs. Find schools in Northern California that might be a good fit.
Task 2
Select 4 schools that you would like to visit on spring break (March 23-30th).
Task 3
Plan an itinerary for visiting the 4 schools selected in Task 2.
Observations
Task 1 (Search)
Most of the users were able to go through the first screen very quickly and with no confusion, entering the information and clicking the "Go" button to move on to the next task. However, some users made a couple of comments and there were a few key observations from this stage:
- For efficiency purposes, some users hoped that there would be autocomplete entries in the text fields on the search screen
- There was some confusion and learnability issues with the "Region" text field because users did not know how specific to be or what regions would be accepted in their search (one user suggested the "Region" being a menu of some kind so that users do not have to guess at whta the system wants)
- Some confusion about which fields were optional or whether every field was required.
Task 2 (Select)
This task presented a little bit more of a challenge for users to complete than the first task, and our observations provided some important feedback for points of confusion in the interface
- One main learnability issue was entering the start and end dates of the trip to advance to the next screen. Users often weren't sure where the "Go" button was located, some tried to navigate using the "Plan" button on the bottom before filling in a date (note: we decided to combat the lack of date by having the default be the date of the search as the start date and one week later as the end date).
- Some of the zooming capabilities confused users and they did not understand what the values on the red circles meant, but once they discovered they could zoom by clicking on them and that the value represented the number of schools this feature was really learnable and intuitive.
- Some users did not realize that they could click on specific schools on the map to receive more information, however one user who did find this feature thought that the provided information was not detailed enough.
- A couple of users tried to click and drag schools from the map to the "Selections" panel, and others thought that all three panels weren't necessary because the map could provide the same capabilities as the "Results" panel.
- Originally one user was confused about why the results panel was empty (thought their search returned no results), but once they began zooming that became clear, so filling the results panel is learnable.
Task 3 (Plan)
Planning the actual visits appeared to be the most difficult task for users and the last screen seemed to be the least intuitive and cause the most issues for each user.
- At first some users struggled to figure out which school the events were being shown for, but others noticed that one school was highlighted right at the beginning.
- Many users were confused about what can be dragged and dropped and what had to be clicked and selected. Although playing around with the interface allowed many of them to figure out what could be dragged, it was not learnable at first and often things that they wanted to be able to drag (such as the events in the middle panel) would not drag, or others never discovered they could drag around the times in the "Schedule" panel.
- Some users were unclear about the use of the "Custom" panel and either didn't see it or didn't know how to use it. However, one user did select and add their own custom event to their trip successfully.
- Some users struggled because the layout didn't seem to flow with the decision process, so adjusting the layout will probably be necessary (observation after first iteration).
- Once users had finished planning their trip they would look for a way to either e-mail or print their itinerary or save it somewhere. Although we expect this capability to be possible with users creating accounts for the website, it was not intuitive for this round of prototyping.
- In our second iteration some users had trouble transitioning from the calendar to the tour times.
- Suggesting a default plan makes learnability of the sight challenging because users did not explore as much or realize they had the freedom to change things.
Iterative Prototyping
The main change that we made between our paper prototypes was adjusting the third screen where the user planned their trip. We wanted to make this screen more intuitive and fit the user's expectations more than it had originally because there was a lot of confusion about the layout and the order of selections.