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.

Interview 1: Heeral Bhatia - MBA Grad in Finance

Persona: Advanced student (MBA), non-technical, non-engineering background.

Caption: The student is calling up a friend to explain a topic she found difficult to understand. Noting down/marking what the friend is orally dictating. This scenario can be hugely streamlined with an online study room. 


Q: How to decide which book to study from, and what topic to study, when?
A: An MBA grad is provided with the prescribed set of textbooks for each course. The professor suggests some pre-reading and post-reading, around the topic discussed per lecture.

Q: How do you generally do your studies? Take notes, etc?
A: Study in my room. At times, 4-5 friends would meet and do group studies for difficult topics. 
I generally study with a pencil in hand, and mark important points in the textbook itself. 

Breakdown: Few students note down those markings in their books and create notes for important questions. I generally do not do it, since it is a lot of additional effort. It would be good if I would be able to consolidate all the important points in one place.
Interesting Moment: Some students, write summaries of difficult-to-understand passages, in the margin of the textbooks next to them. If its a good friend, I take their textbook and copy that summary in my book, which comes in handy when I am studying it. 

Q: What do you do when you are unable to understand a particular topic?
A: I would call up a friend to explain it to me. Other times, I may wait till I reach college next day to meet my friend to explain it.
If none of us are able to understand it, we ask the professor to explain.

Interesting Moment/ Workaround: The interviewee was aware of some forums/communities for general finance realted questions. However, she trusted her friends better, since they are currently working on the same task, than ask a open community. 
She trusted her local community (who are in the same class) more than an open community. 


Interview 2: Karan Dhamejani - Engineering UnderGrad in Computer Science

Persona: Evolved student (Engineering), technical, engineering background. Goes out of the way to utilize technology.


 Caption: We barely study from one book. There is generally one main book, and a couple of reference books.

Q: How do you start your studies?
A: I first do a overview of the complete book, get a feel of the topics discussed in the book.
We generally get a syllabus sheet, which lists down all the topics that would be covered in the entire course. This is my checklist. I would study individual topics an tick each off in the checklist.

Interesting MomentWe barely study from one book. There is generally one main book, and a couple of reference books. (This is a very relevant scenario. My initial idea was to have a "textbook" as the focal point of the study room. However, on discussion, I realized there may not always be one book. Thus, I decided to change the focal point from a book to "topic of class". The professor can load all the books that would need to be referred for class.)
Breakdown: The student faced two problems with the above scenario. 
  1. If there are multiple books to be referred, then it becomes really costly to purchase all books. But, if those books are borrowed from the library, then we cannot do markings in the books, thus lose track of important notes. Thus, we have to take photocopies of important pages. (In an online shared textbook, every student can always have the book, at a fraction of the cost and have all their markings at all times.)
  2. The student gave an example of a topic "Divide and Conquer Algorithm". Its a task to identify find the topic in all the reference books. Also,  he needs to call up and ask friends which is the best book to refer for this topic. (Intead, if the online textbooks are searchable, the student can just search "Divide and Conquer". He will see matches in all books instantaneously. Also, students can vote which source is the best, for other friends to refer.) 

Q: What do you generally collaboate with your friends for?


  1. The most common thing we ask amogst our friends is, "How much have you completed?". We always want to know How far ahead (or behind) our friends are.
  2. If I have limited time to study, I want to understand what are the most important topics, that I should give priority before exams. The student would like to know what topics have their friends studied the most. (On facebook, we can see what articles my friends are reading. On Pinterest, I can see what others are pinning. On YouTube, I can see what others are watching. Now, students should also be able to see what topics students are studying the most. STUDY goes viral.)
  3. To clarify doubts.


Interview 3: Sanjana Dhamejani - High School Student (Science)

Persona: Growing student, Young, and next-gen ways of studying. Uses whatapp to ask doubts to friends.

Caption: Student using the mobile (whatsapp messenger) to click photos of notes, and ask doubts to friends.

Interesting Moment: Before exams, question banks are shared which have common questions that are generally asked in exams. People try to locate answers for these important questions. Either everyone has to look for answers seperately, or else it becomes difficult to take answers from those who have searched. (This requirement can be easily answered by an online system, where all the questions can be put up. Students can put the answers there to be seen by everyone. Thus effort can be easily shared.)

Breakdown: The student found the idea of being able to track the progress of friends fun and very useful. However, she had a question, would the professor be able to track our progress as well? Cause that will be horrifc! (This raised an important concern of privacy. The students would like to use the tool for collaboration. Not for being monitored).

Workaround: Student using the mobile (whatsapp messenger) to click photos of notes, and ask doubts to friends.

Storyboard 1: Collaborative Studies

Storyboard 2: Social Highlighting and Notes

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.

Prototyping Technologies: Twitter Bootstrap, jQuery
Time Taken: approx 70 hrs
Iterations: 3

The prototype is a high-fidelity mockup of the Classroom app, with a lot of interactions coded in order to give the feel of the product.
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.

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

Interesting moments captured in user testing 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.

Summary of findings: mention substantial issues you found with interface design
  1. 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.
  2. 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).
  3. 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. 
  4. 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.    
  5. 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.
  6. 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.
  7. Better collaboration with friends: The users were looking for more ayschronous modes of collaboration like chat, etc.  
  1. 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.
  2. Consider adding support for additional media types like word files, ppt, pdfs. 
  3. Implement the Questions managemnent section.
  4. Implement the workflow of the professor. Add textbooks, generate syllabus, etc.
  5. Rename "Add Note" button to "Sticky Note". Remove the ambiguity with the Notes feature.
  6. Add a more visible button to add to note. (This will complement the context menu option).
  7. Improve collaboration. Hover on a friends photo to see a hover window, with options like "Chat", "Ask a  question" or "See/compare progress"
  8. 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.
  9. 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.
  10. Reduce the confusion by eliminating similar terms like scratches, notes, and scribbles. Just use the term, Notebook or notes.