 |
Main Layout
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.
|
|
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.
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. |
 |
Scheduler
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). |
 |
Stream Scheduler
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”.
|
 |
Stream Scheduled Post
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
|
 |
Resources
Action: 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 posts a new message for Brenda view.
|
 |
Calendar
Action: 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 New 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).
Action: Tammy fills in the content for a new event by filling in the appropriate dialogs. |
|
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.
Action: Tammy adds a new reminder for the event and clicks the coalescing dialog to select the reminder to only Sarah. |
|
When the event is published, this post is added to the content stream. |
|
Notify Settings
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.
Action: Tammy switches back to Sarah’s context, and clicks on the “Notify Settings” tab in the publisher. Here, she edits Brenda’s notification settings. She then clicks "Save" and updates her settings, but nothing is posted to the content stream.
|