Table of Contents
Scenario
It's the second day of the new semester, and Sally Student decides that it's time to get organized. She loads up HAAG, and goes to add a new class. She types in 6.005, but notices that someone else has already added the assignments for that class. She subscribes to this feed, saving her the work of entering all of the assignments. Sally also wants to keep track of her assignments for 6.813, but it appears that no one has created an assignments feed for this class. Sally decides to spend 10 minutes adding all of the assignment for the term, and then makes the feed public for others in the class. Sally now has all of her assignments in one location, and saved herself a bit of work.
A few hours later, after finishing her first pset, Sally goes on her laptop and marks that assignment as done. She decides to include a personal milestone for the 6.005 project, and creates a private assignment, hidden from everyone else.
The next day, after finishing a pset with a friend, Sally visits HAAG with her iPhone, and crosses off her assignments list the pset she just finished. She can see that she doesn't have anything else to do until the next week, and decides to go watch tv instead.
Design 1 - Tabbed UI
This design is based on a main window that uses tabs to organize classes and two lists showing incoming messages and the student’s next assignments. This layout forms a dashboard with the items that will be interacted with during daily use.
The message panel aggregates information from different sources, such as new assignments entered by other students (which must be accepted or declined), news, reminders, and system messages. The assignments panel lists the assignments already accepted by the student. Most of the time, only due assignments will be shown, ordered by their due date or urgency.
New classes and assignments can be created with the “+” icons located in the tabs row and at the bottom of the assignments list. These operations are performed in specifically designed dialogs.
Storyboard
|
Sally decides to get organized for the semester that just started. She logs into Haag and is presented with the dashboard; for the moment, it is mostly empty except for a welcome message and a sample assignment prompting her to read the application FAQ. |
|
She decides starts to start with course 6.005 – Elements of SW Construction, and clicks the (+) icon to add the new class. In a dialog, she is prompted the class name and whether she wants to keep its feed public (default) or private. |
|
As she enters the course name, she is told that a class with a similar name already exists. After viewing its details and seeing that it was created by her friend Jill, she simply subscribes to this class. |
|
As a result, all assignments on that feed appear on her messages list. She is given an option to add all assignments at once or to review them individually. She decides to add all assignments, knowing that she can always edit or delete individual items later. |
|
Verifying that no class feed exists for 6.813, Sally decides to create this new class and enter the corresponding assignments into Haag. Now she faces the most laborious in the entire application. With a list of assignments in hand, she need to feed them to the system. The UI is designed to make this task very efficient, with no need to navigate back and forth while adding each new assignment. To create a task, she just needs to click a date in the calendar and type in a short description. When she clicks the button Add to preview list, the new assignment is included in the preview panel on the right. At his moment, her new assignments are not available for everyone to see. Only when she clicks the Done adding assignments button will the new entries be added to the class feed. |
|
Now Sally just finished a Pset, and wants to cross that assignment off her list. On the assignments panel, she marks the checkbox and the assignment appears crossed of in the UI. The completed assignment will linger around in the list for a while (to give the user a sense of accomplishment), but the next time she logs in it will not be shown (unless she explicitly asks to see all assignments). |
|
The next day, Sally finishes another Pset, but she is not at her laptop right now, so she picks her smartphone and uses Haag to cross that assignment off the list. She sees that there are no assignments due that week and decides to watch some TV. |
Analysis
Learnability, |
|
Learnability, |
|
Efficiency, |
|
Efficiency, |
|
Safety, |
|
Safety, |
|
Design 2 – Calendar View
This view uses the metaphor of a calendar. The main view displays a large calendar, with color-coded assignments visible at a glance. The search function shows a mini-calendar for each result, allowing the user to quickly asses if it has correctly-timed assignments. The assignment creation view allows the user to select a day from a calendar, allowing the user to work with the model (psets that are due every Friday, for example, become very easy to input).
Storyboard
|
Sally logs at the start of the semester, and decides to get organized. At the moment, she sees a blank calendar, as she hasn't added any assignments yet. She selects the + button next to classes, and goes to add her first class. |
|
She searches for 6.005, and sees that Tim the TA has already created a feed for this class. She selects it, adding all of the homework with the click of a button. |
|
Sally goes to add her second class, 6.813. She is the first to input the assignments for this class, so she opts to make it public and let others subscribe. She quickly adds all of here assignments from this one page, selecting the due date from the calendar. After a few minutes, she has added everything for 6.813 |
|
Sally now has the assignments for her classes organized. She can easily see what she due over the coming weeks, and can, with a glance, see when she will have a busy week. She can use the arrows to view the next month or go back and see old assignments. |
|
A little while later, after Sally has finished her first pset for 6.813, she goes on and clicks on it. This marks it as finished, and it gets crossed out. |
|
Sally decides to add another assignment to her 6.813 calendar. This is a personal reminder to study for the nanoquiz, so she decides to make it a private event. No one else will see it, but she can still cross it out when finished with it. |
|
Later that night, Sally finishes another pset. She is away from her laptop at the moment, so she goes on her iPhone. She marks the pset as finished, and can also see what else she has due next week. |
Design 3 – Sliding Panels
This design is centered around four panels:
- Task List - Displays upcoming assignments in chronological order, optionally filtered by feed, with assignments past their due date at the top of the list. From here, users can mark assignments as completed or skipped.
- Add Assignments - Lets users add assignments to public class feeds or the users private feed(s)
- My Subscriptions - Lets users see the feeds they are currently subscribed to, along with recent edits for each.
- Find Classes - From here users can search for class feeds, or create a new one.
Users can click on the label for each panel to switch to that view, or drag the label in order to see two views simultaneously.