README: Evernot e-Powered Research & Mi nd Mappi ng Tool
Evernote, as a product and a tool, has enabled its users to begin to "remember everything. This is a noble cause, but it only really aids in half of the battle. lt helps to remember, but true value comes from synthesis. Studies have shown that Evernote works on a "smile curve that demonstrates that the more users use the product, the happier they become. So when you use Evernote for more than just class notes or recipe clipping, its logging powers only grow and transcend typical utility.
l use Evernote regularly for research on projects. lt has made my process much more efficient, which is the best compliment for a tool of its kind. However, there are a number of things that Evernote could improve upon in my eyes its collaborative abilities and its visualization of the data it collects. l hope to tackle the latter for this project, with the idea of indirectly impacting the former. This tool would allow for unique visualization of research in order to share with colleagues or teammates to initiate dialogue and generate insights. lt is important to look at your research in a dynamic way, and this tool would enable that flexibility.
Existing tools that enable visualization of research include "read later applications like Pocket, social media collections like Tagboard, or "whiteboard-esque mapping software like Murally, Scrumblar and Scribblar. While these implementations are useful individually, no tool interacts directly with the existing way you curate and generate content. They also can leave a great deal up to the user, which can be overwhelming instead of freeing. Whiteboard apps, which might be the best solution to the problem, tend to have poor performance and a kitschy design.
l want to focus on pulling in clipped items and notes from Evernote and displaying them in a couple of different ways in order to change the way you look at your research, maybe through juxtaposition, sorting, and linking certain content. By treating different notes like data points, it would be interesting to see if different visualizations could generate different insights and takeaways.
Mai n Goal : Make the process of looking at research within Evernote more interesting and visually appealing with the hope of extracting additional insight
Envi ronment This web app would be made for the browser, and responsive to tablet size, but would not be fully responsive to a smartphone screen size.
Compet i t i on There are mind mapping applications mentioned above, but very few that use existing research tools. There is one tool made for Evernote called MohioMap. This tool takes on a node mapping structure, somewhat similar to the section view with linkable points mentioned later in this description. They mention on their site various use cases for this type of visualization, and there is a lot of animation when hovering over nodes. However, l believe there is more to research than this type of visualization, which is why my application will over various views.
Leveragi ng t he Evernot e APl The tool would be fully integrated with Evernote and leverage its existing APl to pull in the content from notebooks and notes. lt would use Webhooks to sync newly added notes or data from Evernote to the site. This will allow the user to freely use Evernote's existing features like the WebClipper and allow me to not have to reinvent the wheel.
This web application will utilize this hierarchy and data structure beginning at the top level with stacks. lf stacks are not present, it will drop one level to notebooks.
Organi zat i on of Obj ect s t o Creat e Dynami c Vi ews
Noteboard This is a tagboard-like view of notes that make up your various notebooks of the stack. Using jQuery Masonry, it will give a Pinterest look. You'll be able to distinguish your notes by notebook by color, and see all the relevant attributes of each note such as timestamp and hashtags. Different types of notes and clippings will have different shapes and sizes and show a bit of a preview of text or images where relevant specifically article and image clips.
Timeline The timeline view allows you to see the notes of each notebook in the order in which they were created. This is to create a new way of looking at research that could give insight into a person's thought process. lt also tracks progress of research over time. ln this view, the user can determine the snapshot of time that they wish to interrogate further. The gray circles within the other circles are meant to denote insights.
Section View This view is the most user-driven view. lt allows the user to choose the number of sections to split the screen into, and allows them to give a title to each section. Then, the user will be able to drag the notes from the tagboard view below the sections into the sections and make a data point. These points, which will show more detail of the note upon hover, can also be linked to other notes by holding the point over another point before dropping until a plus sign is shown, and dragging the link to where they choose on the canvas. ln this section view, users can also add text to the canvas to increase detail of points and links.
Expanded lt would be useful to see the contents of each note, whether its text, images or both, in detail on the site. When a note is hovered over or clicked on, the user sees an option to expand the note. The current view would shift down and the majority of the webpage above the fold would show an expanded view of the note that is independently scrollable.
Juxtaposition While in expanded view, the user can opt to drag and drop an additional note into the current expanded note. This will split the expanded view into two, allowing the user to directly compare and contrast the two notes. These will be both independently scrollable.
Added Feat ures Sorting: The user has a great deal of data that make up the notes and clippings of the notebooks. Sorting allows you to pull out specific kinds of notes and see if there is a specific pattern. The sorting bar exists on every view. Notebook user created Tags hashtags provided by user when clipped or created Type text, image, URL, article, social media Date of Creation ascending or descending
Linking By dragging and dropping two notes on top of each other, the user can create a link between those two notes that establishes a more relevant connection within the research.
Adding New Notes/lnsights lts important to be able to record new insights and comments in the form of notes while examining the data. The site will allow you to add these directly into the view, and link them to specific notes if necessary. lf possible, it will sync back to the user's Evernote account.
Deleting During the process of examining the research, the user might want to delete notes that they now find useless or irrelevant. They can do this when clicking on delete, a button that occurs when the specific note is hovered over or clicked on. This will ideally sync back and delete it in their Evernote account.
Search The user can easily search through notes directly on the site with this feature.
Mul t i -User l nt eract i on ldeally this content and tool would be accessible from multiple accounts, but given Evernotes' typical collaboration permissions this might constrain the use to a single account or an Evernote Business account.
Onboardi ng Process
Authorization The site would onboard the user by the user logging in with their existing Evernote account or making a new Evernote account via OAuth.
Choose Stack The user would then be prompted to choose a stack to load into the site. lf there are no existing stacks, they would be asked to choose a notebook but notified that the site gets even more interesting if using stacks to expand hierarchy. lt could show an example.
Tutorial The user would then be given a brief tutorial through the views and added features if it is his/her first time on the site.
Default View the default view is the Noteboard View and will show all notes within the notebooks of the stack, color-coded by notebook. This is the most obvious and broad view, so makes sense as a default
Next St eps
Add Modals What do the pop-ups look like? Upvoting or Favoriting This could make the app more interactive between teammates lnterrogating the Quadrant view how can this be more interesting, can some things be automatic? How do you delete points?
powered by !"#$ &'( #hashtag_A #hashtag_B #hashtag_C Image Article Notes Insight Social Media Text Bookmark Date Ascending Date Descending $)*+ ,-./0--1 $23/ $45/ 6"78, 98:; <== 8,!87>$ ? <== ,"$: ? &@)AB C-53/.4.4-A 8AA-D).4-A 6)AB+E)3/ $8$6: Description or Selected Text goes here $8$6: Description or Selected Text goes here #tags Description or Selected Text goes here #tags Insight goes here #tags Caption goes here ,)5/ @handle Tweet Content goes here ,)5/ Facebook Status Content Goes Here #tags Expand Timestamp Timestamp Timestamp Timestamp Timestamp $8$6: Note goes here Timestamp Timestamp #tags #tags #tags ,)5/ Facebook Status Content Goes Here #tags Timestamp Note/Insight go here #tags Timestamp #tags Delete Timestamp Moteboard Viev !"#$% &$'( )** $%,$#-. / .$.!' Description or Selected Text goes here #tags .$.!' Description or Selected Text goes here #tags .$.!' Description or Selected Text goes here #tags Note goes here #tags Caption goes here #tags Caption goes here #tags powered by ,"0.'* 123 %456 @handle Tweet Content goes here %456 Facebook Status Content Goes Here )** %".' / #tags #tags ,"0. 123 #hashtag_A #hashtag_B #hashtag_C Image Article Notes Insight Social Media Text Bookmark Date Ascending Date Descending .478 %9:6;99< .=>6 .?56 Expand Timestamp Timestamp Timestamp Timestamp Timestamp Timestamp Timestamp Timestamp Delete Note goes here #tags Timestamp 1@4AB C95>6:?:?9A $AA9D4:?9A !4AB8E4>6 1@4AB Moteboard Viev !"#$% &$'( )** $%,$#-. / )** %".' / Drag and Drop Another Note to Split Screen .$.!' Description or Selected Text goes here #tags .$.!' Description or Selected Text goes here #tags .$.!' Description or Selected Text goes here #tags Note goes here #tags Caption goes here #tags Caption goes here #tags %012 @handle Tweet Content goes here %012 Facebook Status Content Goes Here #tags #tags Expand Timestamp Timestamp Timestamp Timestamp Timestamp Timestamp Timestamp Timestamp powered by ,"3.'* 456 ,"3. 456 #hashtag_A #hashtag_B #hashtag_C Image Article Notes Insight Social Media Text Bookmark Date Ascending Date Descending .078 %9:2;99< .=>2 .?12 4@0AB C91>2:?:?9A $AA9D0:?9A !0AB8E0>2 Delete
!"#$% &$'( )** $%,$#-.
/ )** %".' / powered by ,"0. 123 #hashtag_A #hashtag_B #hashtag_C Image Article Notes Insight Social Media Text Bookmark Date Ascending Date Descending .456 %789:77; .<=9 .>?9 .$.!' Description or Selected Text goes here .$.!' Description or Selected Text goes here #tags Description or Selected Text goes here #tags Insight goes here #tags Caption goes here %4?9 @handle Tweet Content goes here %4?9 Facebook Status Content Goes Here #tags Timestamp Timestamp Timestamp Timestamp Timestamp 1@4AB C7?=98>8>7A $AA7D48>7A !4AB6E4=9 .$.!' Note goes here Timestamp Timestamp #tags #tags #tags #tags Timestamp powered by !"!#$ Description or Selected Text goes here #tags !%&'(%)' +%', Mar 3 Today 1 week ago -./! 012 #hashtag_A #hashtag_B #hashtag_C Image Article Notes Insight Social Media Text Bookmark Date Ascending Date Descending !345 678'977: !;<' !%&' #.="6 +"$> ?@@ "6-"=A! B ?@@ 6.!$ B Expand Timestamp 0C3)D E7&<'8%8%7) "))7F38%7) #3)D5G3<' Insight: It is better to be than not to be. powered by !"!#$ Description or Selected Text goes here #tags !%&'(%)' +%', Mar 3 Today 1 week ago -./! 012 #hashtag_A #hashtag_B #hashtag_C Image Article Notes Insight Social Media Text Bookmark Date Ascending Date Descending !345 678'977: !;<' !%&' #.="6 +"$> ?@@ "6-"=A! B ?@@ 6.!$ B Expand Timestamp 0C3)D E7&<'8%8%7) "))7F38%7) #3)D5G3<' Drag and Drop Another Note to Split Screen powered by !"#$%&'( * !"#$%&'( + !"#$%&'( , !"#$%&'( - ./012 3145 677 128109: ; 677 2/:4 ; :1:.4 Description or Selected Text goes here :1:.4 Description or Selected Text goes here #tags Description or Selected Text goes here #tags Note goes here #tags Caption goes here 2"<$ @handle Tweet Content goes here 2"<$ Facebook Status Content Goes Here #tags Timestamp Timestamp Timestamp Timestamp Timestamp powered by 8/=: >?@ Image Article Notes Insight Social Media Text Bookmark Date Ascending Date Descending :"%A 2&#$B&&C :(D$ :E<$ >'"FG !&<D$#E#E&F 1FF&H"#E&F ."FGAI"D$ :1:.4 Caption goes here Timestamp #tags :1:.4 Description or Selected Text goes here #tags Delete Timestamp Drag and Drop to Add to Graph #tags :1:.4 Insight goes here #tags Timestamp Timestamp #tags #tags Timestamp * #hashtag_B * #hashtag_A , #hashtag_C J Insight: It is better to be than not to be. Section Viev 4