An online study room, dedicated to a course being studied in the University. Every student studies from the same e-textbook. Students can make markings, notes - for everyone to see and share. Track the progress of peer students - Who's on the same chapter as you?
Social collaboration, real time tracking, sharing bookmarks, notes et al. In the age of Facebook, why shouldn't learning be as fun.
Online classrooms (like Coursera) are the future of education. However, the activity of 'Study' in physical classrooms and studying from textbooks at home, is not going to disappear, any time soon. How can we digitize this 'analog activity' and make it as collaborative and fulfilling as its digital counterpart.
Classroom is an attempt to do just that.
— User Interviews —
— Storyboarding —
— Wireframe —
Wireframing Tool: Balsamiq
Initial stage wireframes of the following pages:
1) Course Page
2) Library Page 3) Reader Page
Frankly I had been a little lazy in the wireframe stage, hence the wireframes are not updated to the renewed designs. Also, not all the pages are wireframed . I had directly jumped to the prototype stage.
— Prototype —
Time Taken: approx 70 hrs
This is just a static prototype, with dummy data. There is no database in the background. Hence, no data gets stored.
Below are some snapshots of some major pages of the application. Launch the prototype to interact with the application.
— User Testing —
I observed as the users performed the 3 main tasks I had given them:
1. Check the syllabus for the current classroom. Evaluate your progress, and how (which textbook) to proceed.
2. When reading a textbook, identify a point you don't understand, and ask a question to a friend. How would you choose which friend to ask?
3. Mark important points for later. Use the scratchpad to prepare notes from the textbook. (Utilize the important points you had marked in some way.)
I noted down breakdowns where the users where stuck, guided them when the feature existed and they were unable to locate it (like the context menu) and noted down featues that new features that users expected to find.Interesting moments captured in user testing Summary of findings: mention substantial issues you found with interface design
Scenario 1 - How to use the Scribble and Notes option:
The Scribble this option, is hidden behind a context menu. Not everyone discovered this immediately on their own. Hence, they were unable to find it initially. Also the title "Scribble this" did not make it very evident, what it does. Continued in second photo.
On scribbling it takes you to the My Scribbles page. Here you can add to any note using the "Add to note" option. One user found all the concepts like scrathes, scribbles, notes very confusing.
Also, the user found it tedious.
Scenario 2 - Collaboration with friends:
When the users saw the photos of friends, they tried to click on them. They wanted to know more about what they were doing. A interesting request was a feature to chat with them, to initiate an asynchronous communication.
Scenario 3 - Add reading material other than just textbooks:
The 3rd student brought to light that many times professors share PPTs, pdfs, other media to study from. Thus more media should be supported, other than just textbooks.
- ScratchPad: There were major usability issues with the ScratchPad section, and the Task flow of adding something to Notes. I had consulted an expert user earlier, who had pointed out the issue and had discussed potential solutions. My new prototype solves a lot of those issues.
- Context Menu: Most of the users did not discover the context menu easily. For example, the Add to Note option is available through the context menu only. Other options like Highlighting, ask a question are available as buttons on the left and behind the context menu. Thus, the user did not get stumped it he/she had not discovered the context menu yet. Once, the user discovers the context menu, the tasks become more intuitive. Thus, provide multiple ways to achieve the same task (atleast for important ones like Add to note).
- Add Note or Add to Note:The users got confused between "Add Note" which adds a sticky note to the page, and "Add to note". Most times they would click on Add note, hoping it will let them add to note. Ambiguity.
- Navitgation: Mixed reactions on the navitgation complexity. In my second iteration I had added dropdown menus to the sub header options like Class Home, Reading Pane, Scratch Pad, so the user can navigate to any section from anywhere.
- Support for other file types: The 3rd student brought to light that many times professors share PPTs, pdfs, other media to study from. Thus more media should be supported, other than just textbooks.
- Lack of Dashboard: Now the landing page of a given classroom is the Library to choose a book to read. The user wanted a more generic dashboard style homepage, where he/she could see the latest announcements, quiz deadlines, progress of self and friends, calendar, etc.
- Better collaboration with friends: The users were looking for more ayschronous modes of collaboration like chat, etc.
— Future Enhancements —
- Create a dashboard which has widgets that keep the user informed of their progress in one glance, what percentage of students are ahead of him/her. Detailed graphs if required. Deadlines, and calendar of lectures in class. Direct access to notes and favourite textbooks.
- Consider adding support for additional media types like word files, ppt, pdfs.
- Implement the Questions managemnent section.
- Implement the workflow of the professor. Add textbooks, generate syllabus, etc.
- Rename "Add Note" button to "Sticky Note". Remove the ambiguity with the Notes feature.
- Add a more visible button to add to note. (This will complement the context menu option).
- Improve collaboration. Hover on a friends photo to see a hover window, with options like "Chat", "Ask a question" or "See/compare progress"
- When adding to note from the textbook, provide a "Quick add" option, which will add the selected text as a comment to the note. It can then be organized whereever in the note the user wants, later.
- Also, apart from the Quick add, provide an option to edit note. This will open the note in a text area, in the modal window itself, and the user can organize from right here.
- Reduce the confusion by eliminating similar terms like scratches, notes, and scribbles. Just use the term, Notebook or notes.