GR6 - User Testing

Design

The design followed a very simple theme. Text was minimized as much as possible without sacrificing usability and visibility.

The login page was also the home page of the website. The home page consisted of the logo, the title, a brief description and a login component. If the user is a new user (i.e. without a login name/password combination) or has forgotten their password, the interface prompts them with additional components, appropriately. A snapshot of the primary view of the home page is shown below.  Image Added
There is one main navigation bar at the top of the page that allowed the user to navigate between the different components of the interface. There is also a "Help" option for users to see instructions about how to interact with the interface. This was included because users said that the interface did not allude to its purpose at first, nor did it give any instructions of what to do at first for novice users.  At the top left of the navigation bar is the account settings option for the user which, when clicked, pops up a small pop-up which allows the user to edit his/her profile settings, add friends, change picture and sign out. This is shown in the figure below. Image Added
The below snapshot is the pop up that allows a user to add a trip to his/her trip list. The design has very little text and most of the instructions are embedded into the actual input field boxes. This was a design decision that came up from a lot of the trial and error of designing this pop up, as it proved difficult at first to remove all the unnecessary textual clutter. There is also a dynamic satisfaction rating that is in the form of stars next to the Country drop down list. The design for the input trip pop up is almost identical to how trips look when saved into the trip list. This allows for consistency and increased usability for users, who will understand how their inputed information will get translated into the website.  Image Added

The Maps section of the website allows users to search locations and see which of their friends, if any, have been to that location previously. The interface is also very simple and intuitive. It simply contains the map, and one search component.The below snapshot shows this portion of the interface. At first, the search component of this section of the website was placed on top of the map and no side bar was included. After the GR4, this design decision proved to be inconsistent with other portions of the website. Thus, the search component was placed to the left of the map, on top of the side bar, making it consisten with the other portions of the website.  When a user searches a location, a "bubble" pointer appears on the map. When clicked, it will present a clickable pop up with all the friends that have traveled to that location. If a friend is clicked on, the website will direct the user to his/her friend's trip page so that they can view the trip information. 

Image Added

The below snapshot is of the My Friends portion of the website. This was completely reconstructed in an iterative design process to increase usability and consistency with the other sections of the website. Users may invite their friends by email, by searching the website for users, or through their Facebook accounts. The example below shows the user searching for Adriana within the website directory. The website returns "Adriana Vazquez" in the Results portion of the interface. As with the My Trips portion of the website, the panel that contains all the components is the same size and model of the Add Trip panel. This suggestion was made to us during GR4 and increases the consistency and the esthetic cleanliness of the interface. 

Image AddedDescribe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).

Implementation

The main software used for the development of this project is Flex (Adobe Flash Builder). This includes xml along with the GUI builder for designing the website and Actionscript for handling the changes in the design

...