Page History

{pagetree2:DogPack}

h2. Table of Contents
{toc}

h2. Design

DesignOur design decisions changed somewhat drastically after each stage of prototyping and user testing. 

*After early prototyping:*

Significant changes were made during this phase of the design. Our prototype was tested by three users. We got the following feedback from our users.

User 1:
# Show current date in the calendar for scheduling a meetup
# Separate date from time. It’s ambiguous. Possibly put it on the next line
# Location field could be a pop-up of map when scheduling an event
# Misspelling a letter might cause a situation
# Also users might not know exact location \-> Placeholder should support exact and similar locations
# Default message of invitation helps user to understand he/she is expected to send
# Review meetup. Buttons looked like pictures
# Change history to past events
# Switch upcoming meetings to the left

User 2:
# Accept/Reject Page : Availability is not obvious
# Hitting Calendar for “Meet up”
# Hit’s previous meetups title for meetup

User 3:
# Hit Meetup \-> cupcake to review Allen (mistake)
# Hit History title/Review to review => affordance not good.


We made the following design decisions. 
* The calendar on the schedule should show the current date. The date should be separated from the time. We kept the location field as a text field.
* We changed history to past events.
* We changed the buttons for the review.
* We switched the position of upcoming meetings on the home page.

*After heuristic evaluationhas changed drastically from how we first envisioned it. As we completed different evaluations, a common theme amongst our feedback was the need to simplify the user interface. Because of this, between the various iterations of our design, we spent majority of the time attempting to simplify the interface while still offering the functionality wanted by the user.

h6. Home Page

!home_page.png|border=1!

In our paper prototyping stage, the home page contained separate sections for upcoming meetups and previous meetups, and notifications had to be viewed via a dropdown which was triggered by clicking a button in the navigation bar. After performing user evaluations on the paper prototype, we quickly realized that separate sections made the home page too bloated, and users had trouble recognizing the notification button in the navigation bar. In the computer prototyping stage we tried making the sections smaller and scrollable and adding more affordance to the notifications dropdown, but feedback from heuristic evaluations were still negative. As a result we did away with the sections and added a tab view for viewing notifications, upcoming meetings, and past meetings. Because the meetup notifications need to be handled first upon login, the notifications tab is set as the active tab when the home page is loaded. We also added a header to point out how many pending invitations a user currently has right below the greeting headline, and fixed the sizes of images in each tab to increase internal consistency.

h6. Rating Feature




!Screen Shot 2013-05-15 at 1.05.19 AM.png|border=1!

In the paper prototyping stage users complained about the affordance of the rate buttons, and in the computer prototyping stage users complained about the lack of feedback and safety with clicking the negative or positive buttons.  As depicted in the screenshot, we addressed the users concerns by different colorful buttons with better affordance, and using a confirmation dialog when performing negative ratings. We also provide feedback by disabling the buttons once a review is submitted.

h6. Profile Page !profile_page.png|border=1!
The final design of the profile page is shown above. During the paper prototype stage, the design of this page was cluttered with attributes about the dog and comments left by reviewers. We simplified the design by first reducing the amount of attributes that are shown about the dog, and using white space to properly group items. We also made sure to only show positive reviews versus listing every single review that the dog has received. Because we fixed these major problems, feedback from heuristic evaluations did not yield many issues regarding this page. From the computer prototype to the final design, the only major change was making the button more descriptive by making it say "Let's Meetup\!" versus just "Meetup".

h6. Schedule Page !schedule_page.png|border=1!
The final design of the schedule page is shown above.
!search_page.png|border=1,width=300! !review_page.png|border=1,width=308,,height=212! !respond_page.png|border=1,width=302,,height=212!
The final design of the search page, the review page, and respond to invitation page are show above. Most of the major changes, such as adding autocomplete to the search page for efficiency or allowing users or listing the schedule in the respond page,were captured early on during paper prototyping. Other then a few cosmetic issues that were fixed after hueristic evaluation, these page have not changed much since the computer prototyping stage.

The final design of both the


*Paper Prototyping:*

Multiple iterations of our paper prototype were tested by various users. We received a tremendous amount of feedback. From this feedback, these were the maor design decisions we made:
* The date and time fields on the schedule page were placed on separate lines
* The "History" header was changed history to "Previous Meetups".
* Autocomplete was added to the location field on the schedule page to increase efficiency
* The calendar from the home page that showed upcoming meetups was replaced it with a list
* More affordance was given to the button that lists invitations
* The current date was highlighted in the calendar on the schedule page


*Heuristic Evaluation:*

Our heuristic evaluation turned out to be quite favorable. We consolidated our feedback and the following design changes. We identified the need: 
* toPhoto standardize photo sizes forwere consistencymade inconstant ourregardless layout
*of toaspect changeratio font for regular text to standard fontsinternal consistency
* All totext rephrasebesides theheaders "meetup" button
*were changed to standardizeuse thestandard timeserif zonefonts
* forThe better"Meetup" affordancebutton for review buttons
*was changed to improve the search results page"Let's Meetup"
* toThe showreview thebutton previouswas ingiven thea reschedulegreater pageaffordance
* toA show specific confirmation alerts
*dialog tois notshown usewhenever athe textboxnegative toreview displaybutton date/timeis onselected thefor schedulesafety pagereasons

We took this feedback into consideration in finishing up the design of the interface.

*AfterUser user testingTesting:*

Finally the user testing still revealed shortcomings with interface that might have been difficult to perceive earlier. We admittedly did not take every single suggestion into effect in our final design due to time constraints.

{color:#222222}{_}Notifications{_}{color}

{color:#222222}Up until now the notifications appeared as an icon in the navbar but this was confusing to users and therefore changed.{color}

{color:#222222}{_}Previous meetups{_}{color}

{color:#222222}Layout should make use of space on the right. Layout should be consistent with other pages.{color}

{color:#222222}{_}Invitations{_}{color}

{color:#222222}The words “reject” and “accept” on buttons should be written in full.{color}


{color:#222222}{_}Navbar _{color}

{color:#222222}There should be clear navigation to the "Home" page.{color}

h2. Implementation

The website has been tested using Google on the Windows 8 and Mac OSX platforms.

h2. Evaluation

Our user testing involved the following tasks:

{color:#500050#000000}{*}Task 1{*}{color}{color:#500050#000000} : Respond to the invitation from 'Lassy'{color} {color:#000000}{_}Lassy{_}{color}


{color:#222222}{*}Task 2{*}{color}{color:#222222} : Search for dogs in Beacon Hill and schedule a meetup with "Cupcake"{color} {color:#222222}{_}Cupcake{_}{color}

{color:#500050#000000}{*}Task 3{*}{color}{color:#500050#000000} : Review a previous meetup with 'Allen'{color} {color:#000000}{_}Allen{_}{color}

{color:#222222}{*}Task 4 :*{color}{color:#222222} Reschedule the meetup invitation from 'Tony'{color} {color:#222222}{_}Tony{_}{color}


h2. Reflection