Design

Main Page

One major decision we made was to keep the corkboard metaphor.  Though we received mixed reviews about it, we decided to keep it after our heuristic evaluations mentioned it as a good design decision.  While testing with other class members, we found that the primary issue with the corkboard background was that it made the background too noisy.  We found the response to this choice to be much more positive after desaturating the background and reducing contrast.

To-Do List

One major decision here was how to set due dates.  In initial user interviews, we found that users rarely thought about tasks more than a few days in advance.  Based on this, we decided to forego a date picker in favor of a drop down menu, simplifying the interface and making it more efficient at the cost of not allowing people to set tasks more than a week in advance. We also color coded tasks based on their completion status so users can see task status at a glance.

Edit Mode

Our heuristic evaluators all wanted ways to delete and edit tasks, and complained about the lack of safety in task creation.  We decided to forego an undo button in favor of an edit mode that would allow users to easily correct mistakes, as well as make changes to tasks that have been on the list for a while.  Clicking a button puts the list into edit mode, where users can edit or delete any tasks in the list.

Manage Family Page

Though we do not expect family members to change often in a typical use case, We included a family management page to add new members and remove members that have left.  An edit button was included to allow family members to change their name (or picture in a future implementation) without removing their history of tasks.  We decided to use a confirmation dialog to get confirmation before deleting a family member.  The efficiency decrease is negligible since this is an uncommon operation in the typical use case, and the extra safety is important because the operation irreversibly deletes that family member's task history.

Family Member History

This page is a list of tasks a given family member has done or is doing.  In a future implementation, we would like to have options to view longer histories as well as improving the look of the page.  This was designed to be simple, to allow a user to see what a certain family member has been doing "at a glance", and perhaps see if anyone has been slacking off.  

Implementation

Back end

We wrote the backend using Node.js and MongoDB. We used this setup because it would be really easy to set up a service where we could just post and get JSON data.

There are 3 types of objects that we keep in the database, Family, Member, and Task.

• Family - has the family name and login information.
• Member - contains a familyID, name and pictureUrl
• Task - contains a familyID, name, creation/completion dates, and status information

The API endpoints performed these tasks
login

• get/create/modify Family
• get/create/modify Member
• get/create/modify Task
• get all data (Family obj, Member list, Task list) for a specific family.

There were a couple of obstacles in cases where we wanted to get tasks for a given member, because we didn’t write that specific functionality into the API. This caused some headaches in the front end, because each page relied on getting all of the family data and doing some filtering client-side, as opposed to just getting what it needed from the server.

Front End

We wrote an apiClient pseudo-class that handled all communications with the backend. In order to test this client we created a page called /console.html, which gave us controls to sign in, create, modify and delete objects, and get all the data for a given family. We wrote this page using jquery and bootstrap.js.

The front end was developed based on the work that we did for GR4. The pages are purely jQuery and javascript functions. We made an attempt to start using bootstrap.js, but it would have taken too long to make the bootstrap design work with our corkboard metaphor. We also integrated the imgur.com api so we could have the ability to upload pictures.

Design decisions:

From the start, we wanted to keep the UI as simple as possible, and completely disregard some common features that most services have, such as logins for individuals. We opted to have only one login per family, because we wanted children to be able to add and complete tasks right away. We don’t keep track of who created what task. That way tasks created by children carry the same weight as those created by the parents, and we hope that this encourages children to have a more active role when it comes to maintaining the household.
Also, not having individual logins means that accountability is up to the family, not the system. So, if someone claims a task at someone else, the system just accepts it. It’s up to the family how they want to handle that situation.

Because we’re not tracking who’s using the page, it means that whenever the user takes an action on a task, a popup appears where they have to select who they are. This can get repetitive if the user is managing several tasks at the same time. We could have made the system a little bit smarter by remembering which family member was selected in the first action.

We spent a lot of time creating a very reliable backend and apiClient, where we probably could have spent a lot more time on tweaking the user interface, so we didn’t get to implement some features. For instance, the api has the ability to delete tasks, but we didn’t get to write a UI mechanism to do that.

Evaluation

Our user testing was very similar to our paper prototype, but with a few tweaks in workflow. Tasks became much simpler due to the fact that our actual UI was much cleaner than paper implementation, and our workflow improved (we think). We provided a briefing introducing ourselves, our problem, and the basic idea behind our solution. We also made sure to make the users feel as comfortable as possible before we began. Users were parents/children living at home.

Usability Problems
Task 1a: create an account, upload your image
1. Email / Password input fields on the login screen ignored when register button 
pressed
⁃ Major
⁃ Information should be transferred to the new account page
2. "Your name" field ambiguous - user inputted full name
⁃ Minor
⁃ Automatically strip last name if it's entered twice
3. User did not add picture to profile
⁃ Minor
⁃ Require profile picture upload 
⁃ Use jpegcam https://code.google.com/p/jpegcam/
Task 1b: Create your family members
1. No clear way to do this from the To-Do list screen.
⁃ Major
⁃ No indicators that family name is a pulldown menu
⁃ Consider making "Edit Family" explicit visible option
2. After creating, new user tab does not appear in the navigation
⁃ Major
⁃ Make the interface update 
Task 1c: edit one family name
1. The Edit / Delete Buttons do nothing
⁃ Critical
⁃ Fix them
Task 2a. Create a "wash the bathroom" task that needs to get done ASAP
1. User clicks on her own profile to create a task, gets stuck there, navigation 
fails to function
⁃ Critical
⁃ Examine logs to determine what went wrong here.
2. Profile page heading text does not properly format spaces
⁃ Minor
⁃ Fix space output
Task 3a: Claim "make dinner task"
1. In task-claim menu, user icons don't visually differentiate with default 
picture.
⁃ Major
⁃ Default picture should change
⁃ Require users to upload picture
Task 4. Check on the tasks you created1. Clicking on completed tasks makes the completion popup show up
⁃ Major
⁃ Completion popup shouldn't show 
⁃ informational popup should show
2. Clicking on task user image shows the completion popup
⁃ Major
⁃ Don't show the completion popup
⁃ Show the profile
Followup Questions:
• Is this useful?
⁃ Yes
• What did you find most confusing?
⁃ Using the Mac touchpad interface, I'm used to a PC
• What did you like?
⁃ I like the cork board and title "Cork Together"
⁃ Question mark mystery guy is creepy
• Wish this could do?
⁃ Show if there was a problem completing the task
⁃ Multiple lists - one for special event, one for weekly maintenance 
tasks
⁃ Notification of new tasks on mobile platform
Task 1a: create an account, upload your image

-Users tried to enter their full name when we asked for "Family Name". They often realized their mistake as they proceeded.

Severity: Minor

Possible improvement: Change the order in which questions are asked

-Users were confused by photo upload. User did not add picture to profile, and one became so confused they decided to go to facebook to grab a picture before proceeding. 

Severity:Minor

Possible improvement: Use jpegcam [https://code.google.com/p/jpegcam/
]

Task 1b: Create your family members

-No clear way to do this from the To-Do list screen. Parents had a hard time finding the pulldown menu, whereas kids found it easily.

Major

Possible improvement: adding more contrast, improving the menu wording and making it more obvious that clicking it will make something happen.

-After creating, new user tab does not appear in the navigation

Major

Possible improvement: Providing feedback is important. Not a huge design decision required. Implementing the auto update should improve user experience. 

Task 1c: edit one family name

-There is a bug if there exists a space character in a user's name, where edit/delete will not function

Critical

Possible improvement: Fix this

Task 2a. Create a "wash the bathroom" task that needs to get done ASAP

-Users found it incredibly simple to create tasks, and very responsive. 

Task 3a: Claim "make dinner task"

-In task-claim menu, user icons don't visually differentiate with default picture.

Major

Possible implementation: Provide different feedback other than just an image. Could possible include names on top of each image. OR: Require users to upload picture. (This would actually make the user creation process harder, though improving photo upload could improve the whole site experience).  

Task 3b: Complete "make dinner task"

-User tried to click "finish" and was visibly surprised when the popup showed up. (Later, users explained they did not expect the popup to appear)

Major

Possible improvement: allow "finish" to be a 1 click action, where the claimed user will be marked as completed. Would have to add some safety feature here.

Task 4. Check on what family members have done this week

-Users tried clicking on finished tasks, which resulted in a popup appearing.

Minor

Possible improvement: This is a learnability problem and could be ignored. However, linking to the user profile that created task might be better.

-Users clicked on the user tabs, which they found very easy to understand. 

Reflection

See Reflection