Storyboard 1

Main Layout
This interface is a webpage with emphasis on a single content stream. The stream can include messages, calendars, grade information and more but all of it is displayed in a way that is specific to the context of the person viewing the webpage. For instance, Sarah’s parents might see a post stating “Sarah scored a 25 on the Midterm” while Sally’s parents might see “Sally scored a 95 on the Midterm”. Likewise, Tammy the teacher might see “Grades have been posted to 23 students for the Midterm”.

Below the content stream, there is a publisher that is used to create new content for the stream. A user can add different types of content by clicking on the appropriate content type tabs (Message, Scheduler, Grades, etc.)

On the left-hand-side there is a panel used for switching contexts. Clicking on a student’s name filtrates the stream to contain information specific to that student and additionally, content posted through the publisher in this context is only available to the parents of that student.

Since most of Tammy’s interactions will be in Sarah’s context, she clicks on “Sarah” on the left-hand-side.

Sarah’s Context/Schedule a conversation
Now that Tammy is in Sarah’s context, she sees information that is specific to her in the content stream. The publisher also reflects this change by changing the hint in the textbox.

Since Tammy would like to schedule a time to talk with Sarah’s mom Brenda, she first writes a message which would appear in the context specific content streams of both users.

Scheduler
To identify her availabilities to Brenda, Tammy uses the “Scheduler” tab of the publisher to reveal which times she has available.
Tammy can designate her availabilities by clicking and dragging on the gridded calendar. To initialize a new available time slot, she clicks on the start time, drags to the end time and then releases. The selections are interval-sticky to each hour which means that the availability of each selection is at least one hour. She can create multiple availabilities by clicking and dragging on another available time, or she can click and drag on an already created availability to move it to somewhere else on the calendar (e.g. move it to another day). Finally, when the availability appears, she can remove it by pressing the X (revealed on hover) in the upper-right corner of it to delete it.

You can also paginate to days further than 7 days in advance by clicking on arrows surrounding the days of the week at the top (revealed on hover).

Stream Scheduler
The post is editable directly from the stream. The editing mechanism works exactly as it does in the publisher, except changes are published with the “Save Changes” button. Whenever changes to this availability scheduler are saved, the post is moved to the bottom of the content stream.

In the content stream,  the scheduler utilizes paging so that availability can span multiple weeks. in addition, it also uses a smart layout to maximize the amount of information seen by coalescing multiple days in a row where there is no availability from either party. For instance, if neither party has scheduled availability from Wednesday to Friday, there will be a single empty column with the label “Wed-Fri”. To schedule on one of these days, clicking on the title or the column will auto expand it to all columns.

Whenever a person loads the stream and days have past on the scheduler, the scheduler will reflect it by gray-scaling those specific days.

There is also a legend at the top to indicate the availability of both parties. Brenda can schedule a meeting with Tammy by clicking and dragging on any section that overlaps with Tammy and clicking the “Save Changes”.



Stream Scheduled Post
Upon clicking “Save Changes”, Brenda is notified that she should accompany her scheduled meeting with a message (through the publisher). Once she publishes it, this post will appear in the stream.
The “Add to calendar” button is a link to an .ics file



Resources
Now, Tammy would like to share some additional resources with Brenda, so she writes a new message in the publisher.
Upon posting this, the content stream renders these in a visually appealing way for Brenda to visualize the links that she wants her to visit.



Calendar
To notify the class of an upcoming test, Tammy switches the context back to “All” and clicks on the “Calendar” tab of the publisher. Upon clicking on a date on the calendar, she can click the “Add Event” button which prompts the screen to change to the event page.



New Event 
The event page in the calendar tab tries to capture a direct manipulation of the event. The first line contains a textbox with the text “New Event” which is the default title of the event. It be changed. The next line is the date of the event, where each of the boxes are dropdowns and the date dropdown options reflect the selected month. Tammy can set the time with the third line which are also dropdowns. The minutes are set in 15 minute intervals.

Finally, Tammy can add reminder(s) by manipulating the lines at the bottom. Clicking “Add new reminder” adds a new line like the one directly above it. The X on the right deletes the reminder. The first dropdown on that line is the time before the reminder is sent which has a range of common granularities (1 hour, 1 day, 3 days, 1 week, 1 month, etc).



New Event Dropdown
The second dropdown for each reminder is a coalescing of the parents of the students who Tammy would like to send the notification to. Upon clicking that drop down, Brenda sees this dropdown.
This dropdown allows her to select the students that should receive that particular reminder. Each of these are check boxes, where the “All” checkbox selects all of the names. The coalescing of the reminder recipients just serves as an indicator of the names selected.

When the event is published, a new post is added to the content stream:

Notify Settings
Lastly, Tammy wants to be sure that Brenda receives all of her updates. She knows that she doesn’t always have computer access but she prefers SMS updates and emails for her records. To account for this, she switches back to Sarah’s context, and clicks on the “Notify Settings” tab in the publisher. Here, she edits Brenda’s notify settings with the following form:
When this form is saved, nothing is posted to the content stream.