• Created by Unknown User (eyas@mit.edu), last modified by Unknown User (johnnyb@mit.edu) on Mar 11, 2012 21:36

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

Visual and Simple

This design relies more on pictures and other visuals rather than text. It was designed to afford actions like drag and drop. It is meant to be simple and uncluttered. Rare actions like adding a new daycare account should not clutter the interface.

From the daycare worker perspective the tasks follow the following logic:

  1. Select action (Eg Post Story)
  2. Select Child/Children
  3. Fill in Information

From the parents perspective, the interface is suppose to give an idea of a feed (like Facebook Timeline), where interesting stories about the child are posted. For regular/daily information (Eg. How much the child ate, Did the child sleep well, etc) the parents go to the Daily Info section, which is separate from the feed.

The sketches here are of the desktop version of the interface. The version for mobile devices would be slightly different, but would have the same general look and feel.

Storyboard

Illustration

Comments and Description

This is the starting point for the daycare worker. When a Paul drops off Chuck at daycare, Dan clicks in Check in kids.

The comment in the picture is pointing to the cogwheel and says: Cogwheel shows menu with options like create parent account, create daycare worker account, etc. to be sick

In this screen, when Chuck arrives Dan drags the picture of Chuck from the Not Present window to the Present window. Dan does this for every child, and when he is done he has a working list of the kids that are at daycare today. In the top right corner we can see that Dan is the user that is logged in.

To post the story about Chuck's adventures with fingUpdate daily infoer painting, Dan clicks in Post Story in the initial screen, which takes him to this screen. In this screen we have an list with the images of all of the kids that are at daycare today. Dan selects Chuck and then clicks Post Story. Alternatively Dan could have double clicked Chuck's picture instead of pressing the Post Story button. chuckis the logged in user.

After clicking the Post Story button Dan is taken to this page. He fills up the textbox with the details about the story, and choses to attach a picture.
Dan clicks Post, and this story gets posted to Chuck's feed.
The comment in this picture is referring to the fact that when Dan clicks in attach picture, it brings up the file browser if Dan is doing this from a desktop computer, or it brings up the image gallery if Dan is doing this from a mobile device.

This is the screen that Dan sees every time he wants to update the daily info (Eg: What the kids ate, what was their mood, etc). Dan can selects the individuals that for which he wants to update the daily info, and then clicks in the Update daily info button.

After pressing the Update daily info button, Dan sees this screen. At the top, he can see the selected kids (the kids whose daily info is going to be updated). The information is updated by moving the sliders. The sliders are initially set to a default value in the middle. Bellow the sliders there is a minimized comment box in case the daycare worker wants to add any comment (Energy Level: Low Comment: he seems to be sick, had a runny nose all morning). The information about how much the kids ate is also inserted in this page.

This is Chuck's feed. Next to Chuck's picture we can see the drop off time. The stories that the daycare worker posts about Chuck throughout the day get added to this feed.

This is the daily report where parents can check information like How much did chuck eat? or What kind of mood is he in?.
As we can see there is a calendar bellow Chuck's picture that indicates which day this information belongs to. Clicking in some other day in the calendar takes you to that day's daily info report.
The information is color coded. For instance, if Chuck did not eat much, that piece of information is highlighted with a different color in order to make it glanceable.

Image 9

  • No labels