GR2 - Designs
Scenario
Sarah has just received a summer internship offer from a company in downtown New York, and begins to make arrangements for the summer. Though she is excited, Sarah realizes that she has never before been to the city and is wary about being alone and finding a place to live. She needs a roommate but none of her closest friends will be in the city; she hopes to at least find a roommate who goes to MIT. A friend of hers tells her about TravelTech, indicating that it is a great website to find a roommate and an initial circle of friends. Sarah is intrigued and decides to take a look.
After creating a TravelTech account, Sarah begins to browse the website. She first uses the interface to see which of her fellow students will be traveling to New York in the upcoming summer. She then narrows her search to those in her year who will be downtown. Sarah then creates a Travel Group containing the results of her search and sends them a brief message, introducing herself and briefly elaborating on her New York plans. Lastly, she visits the bulletin page and posts an advertisement for roommates.
Storyboard Designs
Design #1
Home Page: This is the page that is presented to the Sarah upon creating an account / logging in. The website is organized by tabs for ease of navigation. The "log out" link is always accessible in the corner of every page.
The picture below shows the "Map" tab.
On the Map page, Sarah can view other users' travel plans and can also search the map for friends or by location. The search results will be displayed in a list and will also show up on the map itself. Selecting one of the search results in the list or on the map will show that person's personal information as an overlaid box (shown below).
Profile Page: This tab will display the Sarah's own information (name, school, class year, location) along with travel plans and travel networks. On this page, Sarah can edit her information along with travel plans and networks. Sarah can also create travel networks on this page; selecting the "Create" link will display an overlay where she can enter the group's information and members. Sarah can also send a group email to a certain network by selecting the "message" link next to a network name. Pictures are shown below.
Bulletin Page: This tab will show the user bulletin page. Here, Sarah will be able to advertise for a roommate by selecting the "Add Post" button, which will display an overlaid box where she can enter the details of her advertisement (shown below). Selecting a specific posting will display an overlaid box with details about the posting. Sarah can also reply to other users' postings by selecting the "reply" button, which will allow her to send a message to the user in a manner similar to sending group messages. The only function of this page is to advertise for a roommate; Sarah will only be able to enter relevant information regarding what kind of roommate she is looking for, how many roommates she would like, etc.
Pros of Design #1: This design allows for ease of navigation between the pages. The use of overlaid boxes rather than separate windows or tabs will minimize the number of open windows, which increases efficiency. Many features of this design are also easily editable, providing extra safety, so that if the user enters incorrect information then he/she can easily change it.
Cons of Design #1: Learnability may not be very high, as it may be difficult for the user to figure out where each of the features are located (ie, travel networks are created from the profile page). The use of overlaid boxes for several actions might also result in some confusion to the user. Furthermore, although the Bulletin page only allows the user to post for roommates, it still has the potential to turn into a forum-style page; this would be an undesirable side effect.
Design #2
Home Page: After creating an account and logging in, Sarah will be directed to this simple page, where she will be presented with the choice of adding a trip or searching the current trips that have already been inputted by other students. Each of the pages on the site contain a navigation toolbar with three links: Home, Edit, and Logout. The "Home" link redirects here.
Add Trip: When Sarah selects the "Add Trip" button, this new page will be displayed where she can enter her personal information and the details of her upcoming trip. After clicking the "submit" button, Sarah will then be directed to the "Edit My Info" page. The "advertising" function has been incorporated into this page; if Sarah would like to search for a roommate, for example, she can post this in the comments section so that others can see that see is searching for a roommate.
My Info: The "edit my info" link at the top redirects here. Here, Sarah can view all of the trips that she has previously entered into the system, and she can also change, delete, or add trips. A list of Sarah's current travel groups is also displayed, and Sarah can create, edit, message, or delete travel groups as well. (The "message group" button is missing from the design below.)
Search: Sarah can search other students' trips by way of name or location. After submitting a search query, Sarah is redirected to the "Results" page.
Results: This page displays all results from Sarah's search in a list and on the map. She can navigate the map by clicking and dragging, scrolling, etc. If she selects a particular student, that student's personal information will be displayed on the page as well.
Pros of Design #2: This design's advantages lie in its simplicity; many unnecessary pages are cut out, allowing for ease of navigation and increased efficiency along with easy learnability. User-inputted information is easily editable, which provides more safety.
Cons of Design #2: Since the design is so minimal, users might be underwhelmed by the lack of many possible desired features (such as a bulletin page to advertise for roommates).
Design #3
Home/Profile Page: Upon logging in, Sarah immediately sees the bulletin page, full of other students' advertisements. Her profile information and travel plans are visible on the left of the screen. The bulletin updates every five minutes. Please see attached PDF.
Map: To find people traveling to New York, Sarah clicks the Search tab at the top of the page and is confronted by a world map and a list of sample groups as well as groups she created. To narrow down her search to people in New York, Sarah double clicks on New York until she is zoomed-in. Sarah then clicks and selects all people in the immediate area of New York, and drags them to a group. A new group has thus been created.
This feature is easily learnable and demonstrates direct manipulation. It is also clean and a good change-up from the other text-based components (Bulletin and Search).
Search: To see if there are other people in her New York group who are looking for roommates, Sarah clicks on the Search tab at the top of the page. By typing into the search textbox and applying the correct filters, Sarah can see a list of other people’s advertisements for New York roommates.
Design #4
Home Page: Sarah is immediately shown a "pick a location" page for the purposes of both searching locations and adding The page as the website-wide TravelTech logo that acts as a link to the homepage and also My Info and Logout buttons that take Sarah to her account page and log her out, respectively.
Trip/Search Details: Once Sarah selects a location and clicks the arrow to go to the next page, she is presented with a calendar view that allows her to select the date range of her search/addition. The top of the page once again contains the links to the homepage, her account page, and to log out.
Results: When Sarah has chosen the date range of her trip or search, she is taken to a results page that shows her an interactive graph of other people in the area during the time of her trip. She can scroll over any of the trips on the graph to see the name of the person and to be given the option to add them to a Travel Group (chosen from a drop down menu). She also can choose to Add Trip to add her "search" as a trip under her name.
Profile Page: If Sarah clicks the My Info button at the top of any page, she will be taken to a page that allows her to edit Travel Groups and her Trips. Her Groups will be displayed as a simple list while her trips will be displayed on a map (by location), and clicking the locations will provide an edit and delete popup window.
Pros of Design #4: Design 4 provides the user with a very interactive and intuitive interface that allows for adding trips and conducting searches with very little typing and effort. The results are also shown in an a fresh style that lets the user see specific timing and distance details. The system is very efficient once users learn it because data can be quickly entered with just the mouse. This design is also safe, it allows the user to change any of the inputted data, though the user may have to navigate through a few pages to do so.
Cons of Design #4: The design may be initially confusing to some users because of the lack of instructions and the dependency on a user's prior experience with Google Map-style apps. Also, while the results are displayed in a new fashion, users tend to have a hard time to read graphs and process large amounts of data at once. Because of this, learnability would be the largest issue with this type of design.
1 Comment
Sacha Zyto
"Presentation: Please discuss the pros and cons of each design along the dimensions of usability seen in class: YourGR2 report is also a UI, so we need to be able to know immediately what are, say, the learnability pros of your design #2 etc...
Overall: comments from meeting: it would be great to ""stretch"" the designs: tune them to help your users to find typical to their domain. For instance:
- By adding information scent, could people use TravelTech to *plan* their traveling instead of finding friends at a place they've already decided to travel to.
- Another idea is to explore the typical needs of your users: what do they need to do with the output of your app (i.e. a list of contacts): If it's almost always the same thing (send them an email ?, friend them on FB etc...), can you help them streamline the process ?
"