Notestream aims to make video notation as relevant as the video itself. Instead of notes or comments being an afterthought, Notestream puts an emphasis on viewing annotations along with the video by syncing notes to timecode and scrolling with playback.
A duration histogram is used to navigate the notes and allows the user to view and click to relevant portions of the video. Additionally, notes are downloadable for personal use.
Though Notestream can be used for any video, the service is intended for crowd-sourcing additional data related to online lectures.
Background
I built Notestream knowing I wanted to fully-functioning prototype, so I took a bottom-up approach building it. A lot of the interface materialized after plotting out the core functionality of the server and the data that would be stored in the database.
While the interface design is certainly important, knowing I can experiment with UI changes because the back-end is flexible gives me peace of mind.
The interface is indicitive of this. It's very spartan and to the point. A lot of thought went into what features are absolutely necessary for a note-taking web-app, and what is filler. There are certainly features I want to incorporate, most notably "search for notes" functionality, but what is present in the UI is for the most part the necessary components to be able to use the application.
As far as the graphic design goes, I made a point of not getting hung up on colors and fonts. I used Museo sans for the Notestream logo, and Lato for the body. The color palette was derived from Designmodo's Flat UI Bootstrap theme — Notestream is built with Bootstrap scaffolding.
A lot the influence behind Notestream's functionality came from Soundcloud and Vialogues.
Audience
Instructors and students of online lectures.
User Scenario
Users mark-up video according to information discussed and tie it to timecode.
Implementation
Notestream is built on top of a nodeJS/Express/MongoDB stack.
Conclusion
**Observations**
- I'm more comfortable in how to tackle programming obstacles now, and how iterate my code more efficiently
- While this is something that could be easily looked over, how to ask questions on stackoverflow that are succinct. A lot of programming breakthroughs happened after recieving thoughtful answers from the stackoverflow community.
- It's valuable to do informal user-testing often.
**Next Steps**
Based on feedback, there are some major UI changes I would like to make.
As stated in the user-testing section, I would like to do more rigorous user-testing in tandem with an online-lecture course.
I would also like to create some sort of tagging system, so users can watch similar lectures. It's always helpful to have concepts explained from multiple sources to really get it to sink in. Having some categorizing system would assist with this.
A duration histogram is used to navigate the notes and allows the user to view and click to relevant portions of the video. Additionally, notes are downloadable for personal use.
Though Notestream can be used for any video, the service is intended for crowd-sourcing additional data related to online lectures.
Background
I built Notestream knowing I wanted to fully-functioning prototype, so I took a bottom-up approach building it. A lot of the interface materialized after plotting out the core functionality of the server and the data that would be stored in the database.
While the interface design is certainly important, knowing I can experiment with UI changes because the back-end is flexible gives me peace of mind.
The interface is indicitive of this. It's very spartan and to the point. A lot of thought went into what features are absolutely necessary for a note-taking web-app, and what is filler. There are certainly features I want to incorporate, most notably "search for notes" functionality, but what is present in the UI is for the most part the necessary components to be able to use the application.
As far as the graphic design goes, I made a point of not getting hung up on colors and fonts. I used Museo sans for the Notestream logo, and Lato for the body. The color palette was derived from Designmodo's Flat UI Bootstrap theme — Notestream is built with Bootstrap scaffolding.
A lot the influence behind Notestream's functionality came from Soundcloud and Vialogues.
Audience
Instructors and students of online lectures.
User Scenario
Users mark-up video according to information discussed and tie it to timecode.
Implementation
Notestream is built on top of a nodeJS/Express/MongoDB stack.
Conclusion
**Observations**
- I'm more comfortable in how to tackle programming obstacles now, and how iterate my code more efficiently
- While this is something that could be easily looked over, how to ask questions on stackoverflow that are succinct. A lot of programming breakthroughs happened after recieving thoughtful answers from the stackoverflow community.
- It's valuable to do informal user-testing often.
**Next Steps**
Based on feedback, there are some major UI changes I would like to make.
As stated in the user-testing section, I would like to do more rigorous user-testing in tandem with an online-lecture course.
I would also like to create some sort of tagging system, so users can watch similar lectures. It's always helpful to have concepts explained from multiple sources to really get it to sink in. Having some categorizing system would assist with this.