Glance: A family collaboration app
Sometime in June 2016, I started on a Coursera specialisation in Interaction Design. The last course in this 8 course specialisation is a 10 week Capstone project. In this project, we had to work on one of the 3 design briefs provided, themed around Time, Change, or Glance.
My chosen design brief was Glance. Here is the design brief for the project.
Glance
We are surrounded by information. Some might even call it overload. How might technology show us the essential pieces at a glance, so we can quickly navigate through the noise to get to what we really want? We compulsively check email, Twitter, Facebook, and the news — — just in case there’s something there. Right now we are doing the filtering and finding ourselves, why not let our devices do it for us? How can a screen summarize information and present just the most relevant parts (especially if it is tiny)? How can these devices use social and physical context to more effectively have the key information ready at a glance? Today the home screen of many devices is a grid of icons, or a static picture. That’s not very creative. You can do way better!
My Mission
Find people and design a personal dashboard tailored to their needs.
Design Idea
I worked on a Remix project Prototype Assignment — Remix Project (Glanceable Collaboration in a Shared Household) by Prasitha Thomas
Prasitha’s work was based off Christopher’s Griffin’s Ideation assignment
“Shared living would be much more convivial, if communication and collaboration were seamless. Every click is an obstacle, this communication should be available at a glance.” (from the Ideation Remix Project- “Glanceable Collaboration in a Shared Household by Christopher Griffin”) I have attempted to build off a storyboard and prototypes based on this point of view where communication between people in a household are more streamlined and effective. This app would allow them to share messages and calendars, delegate chores between them, operate the smart devices in their home, and check the weather and news at one glance.
I have tried to cover two of the features — messaging between members, and assigning and sharing household chores.
Some storyboard ideas (by Prasitha Thomas)
Some initial sketch prototypes
Home screen design by Prasitha Thomas
Messages feature
Household tasks feature
Heuristic Evaluation
From the paper prototype, a heuristic evaluation was done. As the paper version is a high-level initial prototype, many of the major problems relate to the subtler details, like lack of help and documentation, error prevention, helping users recognize, diagnose, and recover from errors. It is expected that these are uncovered in the early prototype versions, as these issues are normally addressed in a later-stage prototype. Also common are things like no control to go back to home page, inconsistency in interface elements (and their placement). As these are done in a quick sketch, understandably the grids are rough, and these issues may be overlooked. A potential consideration could be to have the 10 heuristics used as reference before the first prototype is sketched, so that these issues may be overcome.
I’ve found the 10 heuristics to be very useful in uncovering the breadth and broad range of potential issues that may affect a design. I feel it is very useful for mid-and late stage prototype evaluation (of moderate to high fidelity). For a very first rough sketch of the prototype, especially when the paper prototype does not have many screens, it may sometimes be pre-mature to apply them. E.g. Error prevention, and helping users recognize, diagnose, and recover from errors, this is quite challenging to ‘demonstrate’ on a paper prototype, unless the multiple pathways, and error validation mechanisms are drawn out.
Making a Plan
How I decided which were the concrete changes to the project to be made was based on the severity levels of heuristic violations. The chosen ones to be remade in the InVision app (versus the paper protoype), were of severity violations ratings of 3 or more. Also, these violations are more fundamental and affect multiple screens (e.g. navigation).
Specifically, these are the changes that were better aligned with the brief:
1. In Messages screen: In the Message board view, there was no time stamp of when the message was sent. The status showing the time of messages can be an important in coordinating activities, as there can be multiple threads, and channels of communication. CHANGE: A timestamp was added to each message in the prototype. (Visibility of system status, Rating 3)
2. In both Tasks and Messages screens: On landing page for Tasks, there is no button for user to back up to the home screen. CHANGE: Navigation controls for user to go back to home screen were created in the InVision prototype (User control and freedom, 3)
3. In Tasks screen: The landing page for tasks highlights the 2 tasks that were due for Mary (the user). In a real world, to-dos are often represented in a checklist for the user to check off, when done. However, this screen does not seem to offer a direct option for the user to check them off as done. Instead, exclamation marks are used, on the left of each item. CHANGE: Checkbox bullets to the left of each task were created in the protoype, so that the user can match tasks in a real world, to that in the system. (Match between system and the real world, 3)
At this stage, the prototype is a skeleton at best, for user to get a feel of the navigational flow through the app. I made a development plan that outlined the tasks ahead, for me to flesh out the skeleton to be a more complete prototype ready for interaction testing of these 2 features (messages and tasks).
Link to first prototype
Features to be tested (in order):
- Messages feature: TASK: Read and post a message: Test if messages, once read, this status is reflected in the home screen (using back button).
2. Tasks feature:
a. TASK: Check off 1 or 2 due tasks. Test back button to see if checked off tasks remain checked, and if number of tasks remaining reflects correct figure (i.e. after checking off 1 task from 2, there should be 1 task left).
b. TASK: Specify new task for “Clean out fridge” and assign to Andrew, due 21 Jan 2017. Test if prototype allows for Task description, Due Date, and Assignee to be specified in any order. Back button should reset any incomplete task specification.
c. TASK: Task to be successfully added to Andrew’s Tasks list (1 task, and once only). Test that Checking off tasks or Adding tasks can be pursued separately. E.g. I can add task without checking off my due tasks.
Supporting information: The prototype developed allows for a user (e.g. Mary) to read messages, and post a response. It also allows Mary to see tasks due to her, and add a new task of cleaning out the fridge by Saturday 21 January 2017 to a family member Andrew. Some attention has been placed to allow user to go back to the previous screen with info that persists (e.g. tasks that have been checked, or messages that have been read).
Some screenshots of the app that I designed
Testing Protocol
The prototype was put through a testing session with 2 real users. The preparation and setup for this is outlined below.
Preparation and setup
- The location is a comfortable home setting which is relevant for this Glance app.
- First, I welcome the participant and explain the purpose of the test session, how it will be run, ask any pre-test or demographic questions, and ask the participant to sign the consent form.
- Remind myself to keep user comfortable, and be respectful.
- I will also remind the user that this session is about testing the prototype, not the user, and that they are helping us in our prototype.
- I will encourage the user to use a thinking aloud method and asks if the participant has any additional questions before starting.
- I will explain the tasks that will be tested.
- The participant begins working on the task while they think aloud. As an observer, I would remain neutral, and sit to listen and watch.
- I will try to take notes of the participant’s behaviours, comments, errors and success or failure in completing the task. The recording would also be in the form of photos taken during the observations.
- When the task scenario is completed, the session ends.
- When the session is over, debrief, thank the user, give the user the agreed-on incentive, if any.
- Reset the materials, and invite the next participant.
Participant 1:
User was confused with the Andrew icon near the Add Task button, assuming that she should tap on Andrew first, and then click on the Add task button
User decides to switch profile at the top of screen, to see if she can switch to Andrew, before starting to add task. That did not work.
BREAKDOWN or DESIGN OPPORTUNITY: Redesign the initial tasks screen so that it is clear from the screen how one can add task. Apparently, the proximity of icons of people near the Add Task button makes users associate their functions together, which is not correct.
Participant 2
Like Participant 1, this second user assumes that the user needs to be clicked on first. He has missed that the design had meant for that to show the tasks for the other persons.
User finally realise that the Add task button should be used instead, and in the next screen, he can specify the task assignment.
User says: When I think of a specifying a household task, the way I see it is “Get So-and-So to do something”, so my mind is set to first specify the person, and then say what the task is about.
BREAKDOWN or DESIGN OPPORTUNITY:
Same challenge encountered by the second user!
Planned Changes after the initial testing
From the testing, it was clear that I needed to review how I can offer an alternative to the screen to make it clearer how tasks can be assigned.
- Remove the View User Tasks people icons near the Add Task button
- IMPORTANT: Redesign first task screen to show list of tasks for others at the initial task screen
- Include an Add task screen beside the person’s name
- Remove the ‘assign to which user’ function from the add task screen.
Alternative Designs (Prototypea A and B)
Original design: Glance (A) https://invis.io/2SA1C77BN
Redesign: Glance II (B) https://invis.io/U4A4LY27V
The redesign stems from the user testing from the 2 participants, and well reflects an underlying design opportunity solution for the Add Task screen.
A/B testing and results
After A/B testing by 4 users on UserTesting.com, it was clear that Prototype B was the more user-friendly version
Some pictures from user testing sessions.
Final Prototype
Final video
This short 1 minute video is an attempt to advertise and showcase how this Glance app can help family members collaborate better. In the video, I highlight the 2 main features I worked on in the prototype, i.e. the Messages feature (replacing messy Post-it’s), and a household task feature, allowing members to check off tasks due to them, and also add new tasks for others.
I hope you like it, thanks!
