Kel l y Heri ng (kheri ng)

CS132 - Desi gner Track

Proj ect 3: Mockup

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.

Existing Evernote Hierarchy: Stacks
>Notebooks
>Notes
>Tags
>Timestamp

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