Design

Describe 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).

Summary

Our final design relied on several key relationships. Firstly, Users are each a member of a Couple, in which another user is their Spouse. Each Couple has any number of Children and pieces of Content related to their Children. This Content can be organized in Albums, which are shared between Spouses in a Couple. There are several types of albums, which are explained below.

The interface for our site primarily revolved around the Browse Page.

Albums

Dividing Albums Into Wells

Implementation

Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface. 

Our design used Django as its web framework. Django's templating system was used to re-use pieces of our site, such as the navigation bar. 

Evaluation

Who we tested:

We conducted our user testing with members our family that had a spouse and children. Each user uses the computer at a very basic level for simple tasks like emailing and browsing the web. Because they each had a spouse, had children, and had basic computer skills they were representative of the target group of the average couple with children.

How we tested them:

• As we tested them remotely, we used screen sharing to see how they directly interacted with our interface.
• Each test was tailored to meet the real life specifications of each user (text surrounded with quotes in the briefing and text was changed for each test.)
• Accounts were made for each user prior to each test.

Briefing:

• Purpose of application: To help parents manage co-owning digital content of their children and family
• You are a parent of "list children".
• You and your spouse have already created accounts on CoShare and CoShare recognizes you both as each other's spouses.
• You have a iPhone with a web-browser.
• I have given you a folder of photos that you should put onto your desktop.

Tasks:

Task 1 - Bulk upload and organize content from desktop

1. Upload these pictures, from the folder I gave you.
2. Organize them by:
   1. Add the pictures to the site
   2. You didn't remember "a detail about that event" was so you added the pictures to your spouse's queue to look at and edit.
   3. Add the uploaded pictures to a new album that is appropriately named.

Task 2 - Retrieve content added by spouse

Unfortunately you were unable to see "name event in one of the pictures". Luckily, your spouse was their to take some pictures.

1. Locate these pictures
2. Mark three as favorited

Task 3 - Mobile upload and desktop refinement

You just took a cool picture of "child" from your phone. Upload it to CoShare via the mobile site.

1. Upload this picture from your iPhone to CoShare’s Mobile Site.
2. Login to your CoShare account on your computer.
   1. find the picture
   2. give it an appropriate description
   3. add it to a new album with an appropriate name

Demo:

We did not use a demo because we thought it was unnecessary and would cause us to lose some valuable information from the evaluations.

Usability Problems:

1. "Add Content" can be confusing, if it is adding it to the site or the selected album.
   1. Type: Internal Consistency
   2. Severity: Minor
   3. Solution: Replace with Upload
2. "Submit" is not consistent with other sites.
   1. Type: External Consistency
   2. Severity: Minor
   3. Solution: Replace with Upload
3. Dragging a single file without selecting (clicking on it) it does not work.
   1. Type: Efficiency
   2. Severity: Major
   3. Solution: Consider adding the functionality for this. This could however breach internal consistency.
4. "Choose File" and always having "No File Chosen" on the mobile site is confusing.
   1. Type: Internal/External Consistency
   2. Severity: Minor
   3. Solution: Replace with Upload button and remove the "No FIle Chosen" field
5. No idea there was functionality for editing the description and didn't know how.
   1. Type: Learnability
   2. Severity: Major
   3. Solution: Add right click functionality for editing the description as well as a button at the top of the mosaic for editing. (Similar to remove content button)
6. Confusing that the description when added was not displayed in the mosaic.
   1. Type: Learnability
   2. Severity: Minor
   3. *Solution: *Add functionality for the users to be able to show descriptions below pictures in the mosaic. Option in account settings or in the mosaic button bar.
7. Likes the idea of using a trash can album for removing content
   1. Type: External Consistency
   2. Severity: Minor
   3. Solution: Add a static album that when content is added to it removes it from all other albums.
8. Upload Modal having album selected to "None" gives users the idea that it might not get added to the site even if they submit content properly.
   1. Type: Internal Consistency
   2. Severity: Major
   3. Solution: Change "None" to "All Content"
9. Upload Modal gets too big and the submit button is inaccessible if the picture height is too big.
   1. Type: Bug
   2. Severity: Catastrophic 
   3. Solution: Set a max height for how each picture is displayed in the upload modal. Also, make that div scrollable for an overflow and not the entire modal.
10. When a picture belongs to too many different albums, the modal height gets too big and the submit button is inaccessible. 
    1. Type: Bug
    2. Severity: Catastrophic
    3. Solution: Make that div scrollable for an overflow and not the entire modal.

Reflection