Cross-Platform Filter

Logging In
This interface is a webpage with emphasis on a single content stream. The stream can include messages, calendars, grade information and more. 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 a corresponding tab at the top of the publisher (Message, Scheduler, Grades, etc.)
On the left-hand-side there is a panel that a teacher uses for switching user contexts.

Action: Since most of Tammy’s interactions will be in Sarah’s context, she clicks on “Sarah” on the left-hand-side context panel.
Description: Clicking on a student’s name filtrates the stream to contain information specific to that student. Additionally, content posted through the publisher in this context is only available to the parents of that student. 

Keeping Connections

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.

Action: Since Tammy would like to schedule a time to talk with Sarah’s mom Brenda, she first writes a message in the publisher. The message that she posts will only be shared with Brenda.

Initiating Contact

Action: To communicate her availabilities to Brenda, Tammy uses the “Scheduler” tab of the publisher to reveal which times she has available. 
Description: The scheduler tab can be used to 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. When the mouse is released, the corresponding cells in the grid are shaded in. Each selection is interval-sticky to the hour granularity. She can create multiple availabilities by clicking and dragging on another available time, and 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 she has a selected an availability, she can remove it by pressing the X (revealed on hover) in the upper-right corner of it to delete it.

Additionally, the columns can be paginated to days further than 7 days in advance by clicking on arrows surrounding the days of the week at the top (revealed on hover).

Communicating Across Platforms

Action: Tammy clicked "Publish" in the Scheduler tab of the publisher above and this post was generated 
Description: 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  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. Additionally, it 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 of the collapsed columns.

Whenever someone 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”.

Staying Updated

Action: Brenda added an appointment through the Stream Scheduler.
Description: Tammy is notified that she should accompany her scheduled meeting with a message in the content stream. The “Add to calendar” button is a link to an .ics file