...
As we received feedback from our peers, user tests, and instructors, we drastically changed the flow of our website by suggesting more of a two-step process. The first page is for searching 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.
Searching for schools:
We want to make it as easy as possible for the user to get started. The user can click "Find Schools" immediately, and be taken to the results. However, we'd also like to give the user control over what type of schools to search for. Usually, users have a general idea of what sort of schools they are looking for - for example, they may be looking for schools that will best match the user's test scores and GPA. We realize that the home page is where all new users will first land, so we want to make sure that they can get started immediately. This is why we put the 'Find Schools' button at the very top, in plain view.
Selecting schools:
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 known. 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:
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.
...