...
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
...
Possible improvement: Use jpegcam [https://code.google.com/p/jpegcam/ \\
]
Task 1b: Create your family members
...
-Users clicked on the user tabs, which they found very easy to understand.
Reflection
See Reflection