Design
Our final design (shown above) consists of a few main parts: the header, the 'find a ride' panel, the 'post a ride' panel, and the rides listing (which can either show all rides or just the users rides). We decided on a minimalist design in which all of the site's functionality is plainly visible on the main page, including the functions of searching, posting new rides, and viewing ride posting. We did this to improve efficiency and visibility for the user.
The user can interact with the 'Find a Ride' panel to filter rides according to three distinctions: Purpose, Date, and Time. Since we expect that the total number of rides on the site will be pretty low at any given time, we did decided not to include a search for location . It isnor vehicle type after receiving feedback on our initial designs. These fields aren't necessary when trying to find the ride you want and the user might feel like they have to know exactly where they're going before filling out the search. It is easier to have them browse ride rides listed for the category or date they are interested in.
Filters are applied right when the user adds or changes them (using ajax). We decided to do this because it gives the user immediate feedback. During paper prototyping, we considered using a standard form with a search button or having a filter button for each category, but testing made it apparent that immediate ajax response was the best option and made the most sense to most users.
When filters are applied, the user is shown a message that contains the tags they are searching for (as in the above image). The This makes it clearly visible what is being shown and the user can easily clear all search filters by using the standard 'x'.
...
Note that, if a ride belongs to a user, an 'X' is added in the top right corner so that the post can be removed (all of a user's rides can be found by clicking the 'your rides' tab). There is not an edit function yet because there is so little information to be input to post a ride that it is almost just as easy to delete the ride and repost it if a mistake is made (although edit functionality might be something we'd want to add in the future).
Each ride also has a 'share via email' and 'join ride' (if the ride belongs to someone else) link. When clicked, the above dialog pops up so that the user can contact the poster or share the ride with friends. It is auto-filled with a suggested message so that the user understands the purpose of the e-mail, but it can be changed to whatever the user would like.
To add a new ride to the listing, a user can fill out the 'post a ride' form, shown above. We use the icons that are consistent with the rest of the site and try to use form elements that are as easy as possible and restrict the user to only valid inputs (like the calendar widget for date, the drop down lists for time, and the radio buttons for vehicle)
Implementation
Our interface front end was implemented using a combination of JavaScript, JQuery, HTML, and CSS. We decided to use a separate CSS stylesheet and incorporated aspects of the JQuery-UI module, such as for out-of-the-box widgets like the date picker, time slider, and autocomplete. We tried to make our website have a Web 2.0 look-n-feel; we utilized rounded corners for all boxes, and made every search field use AJAX to filter the matching rides in real time. We also decided to include a throbber to signal to the user that a request was being processed. Additionally, we decided to implement login as a necessary component to access the website, which meant that we could use MIT certificates to facilitate login and not require a user to enter information or click a login box to enter the website's functionality.
...