wikiPEN : Supporting Knowledge Sharing Through Social Annotations

The goal of wikiPEN is to help users approach to new knowledge and understand the contents easily through sharing annotations. We propose wikiPEN as a tool that enables users to annotate under the consented grammar, to share the annotations among users, and to see others’ annotations with others.

Learning new knowledge, especially through text-based materials is stressful, since one does know how to approach to it. Searching and learning the information requires a huge amount of time and effort because one should filter information whether the information is valid, and figure out what is core parts in the contents.

Focusing on problems above, we utilized annotation, one of the methods that are used in active reading. Compared to passive reading, reading the contents as it is, active reading indicates the reading process through critical thinking, by reorganizing and reinterpreting the contents. When it comes to active reading, annotations are helpful for one’s learning by one highlighting crucial parts, or writing several notes on the blank.

I led the project as a project leader. I consulted with my team members to divide work into three categories. 1) Research (User & Desk research), 2) Design, 3) User Testing. I was involved in everything. I was primarily responsible for creating wireframe, user flows, interactive prototype and conducting user testing. During the project, we discussed the decision-making issues (ex, design tone and manner) in each process.

· Prepared and conducting user testing

· Coded and analyzed user testing data

· Extracted requirements and applied them to UI map

· Lead user flow development and prototyping





December 15, 2016 – January 13, 2017

Hyeonsu Park | Joowon Lee | Sungho Ahn | Youngmi Shin | Jisoo Park

Adobe Photoshop | MS PowerPoint | InVision | Adobe After Effect

Purpose & Method

Conduct in-depth interview. To see the process of attaining knowledge, from searching to learning; to discover crucial factors that require one’s time and effort within the process.


Total of 8 participants (5 females and 3 males, with age range of 18 to 36).

Recruit criteria

People who have any experience of searching materials as the purpose of their learning; have any learning experience with text-based materials; have such learning experience at least a week before the experiment begins.


We transcribed all the recorded data from in-depth interviews. All transcriptions were analyzed by using qualitative inquiry.

‘Active reading’ refers to a reading method as a purpose of learning that requires critical thinking. It indicates the entire process of reinterpreting the original content by highlighting, linking, extracting, annotating, and searching, not just reading the content as it is. Annotation is one the key methods in active reading, because it visualize the mental process when a person reinterprets the original content. Annotations include following behaviors: Highlighting or underlining core contents; Writing notes or adding images in the blank; attaching sticky notes. Likewise, annotations can assist one’s text-based learning. There are several research projects towards group learning without any constraints of time and space, by utilizing social annotation.

[Relevant System]


LiquidText is another tool for active reading that is used as a document viewer and editor. It allows users to collect and compare certain parts of the digital texts, through multi-touch and gesture, in the tablet PC environment.


Marginalia is a tool that assists active reading for texts in the web page. It provides functions to highlight, memo, and annotate on the text and in the blank.

1. Grammar of annotation

Annotation styles vary depending on the individuals. Thus, we created wikiPEN’s own grammar for annotation to prevent disturbance when interpreting others’ annotation.

Three different colors, red, blue, and green, were selected based on the level of importance. A user can highlight several parts and write notes with distributed colors. Three colors are chosen selected for annotation. We named it as a “wiki-layer.

1) ‘A Red Pen’ is for annotating the contents that seem to be the most important. A user would highlight the most substantial parts, or writing notes in the blank with a Red Pen.

2) ‘A Blue Pen’ to annotate the contents that seem to be important, but not the most. The level of significance that a Blue Pen holds is lower than the Red Pen’s.

3) ‘A Green Pen’ is to annotate the contents that seem to be interesting. A user can highlight the contents that meet one’s taste, or write one’s comments and opinions in the blank. Other users can see the important parts readily, or learn others’ opinions and perspectives.

2. Social annotation

Social annotation refers to the learning process of users discussing about the shared annotations without any constraints of time and space. We utilized the concept of social annotation to allow users share and see annotations for their learning. To achieve social annotation, a user searches and selects a note that he/ she wants to learn about. A user can see the annotations of the notes. At this time, only overlapped annotations are shown. A user can see each person’s annotations by selecting each wiki-layer.

A user can create a note in My Note page. The note that one created is shared by all others. Other users can annotate on the shared notes. Likewise, a user who creates the note can effectively learn the material by reviewing others’ annotations.

A user can create a class along with a note. A note allows a user to share one’s annotations (Macro) with others, just as a class allows a group of users to share their annotations within the group (Micro). A class has a clear theme, and related notes are shared in the class. In the class, both class member and guest users can create a wiki-layer at the shared notes. However, their notes are shown differently by the class manager, the class manager who is also the creator of the class. Since a class has a distinct theme, a user can approach to various knowledge related to the theme.

3.Three types of badge for rating

We also provided a rating system to achieve a high accessibility towards knowledge and to motivate sharing annotations. We brought a badge system, one of the incentive method for performance that is commonly used in games. We created three types of badges: Thanks, Expert, and Interest. Through these badges, a user can rate classes, notes, and wiki-layers. Such ratings help filtering the search results.

1) Thanks badge’ is to give an appreciation to classes, notes, and wiki-layers. A high number of Thanks badge of classes, notes, and wiki-layers can be an evidence that they have helpful contents. Thanks-Badge also motivates users to create classes or notes, and share one’s annotations, because one can get a feeling of helping others’ learning when he/ she receives Thanks-Badges.

2) Expert badge’ is for classes, notes, and wiki-layers when their contents meet the professional quality. Expert-Badge helps users to judge the quality whether the contents are professional.

3) Interest badge’ is for classes, notes, and wiki-layers in which their contents are interesting enough to provoke one’s motivation of learning. A high number of Interest-Badges indicate that the contents can be interpreted in various ways.

· Main view – Search class or note

· Search result – Class

· Note page view

· Yohanna’s wiki-layer view

· My Profile view

· Setting view

· Alarm setting view

· Pen grammar tutorial view

· Search class or note

· Note view

· Note’s wiki-layer and tool view

· Ethan’s wiki-layer view

· Create class view

· Profile setting view

· Customer center view

· 3 type of badge tutorial view


The purpose of experiment conducted to check how people accept the new knowledge and evaluate the usability of wikiPEN.


Total of 8 participants (5 females and 3 males, with age range of 18 to 36)

Recruit criteria

people who have any experience of searching materials as the purpose of learning; have any learning experience with text-based materials; have such learning experience at least a week before the experiment begins.


1. At the first session

We conducted an experiment how wikiPEN helps a user approach to the new knowledge. We received a text-based material from the participants, the day before the experiment starts. We created a prototype with five wiki-layers, by converting each participant’s annotations into each layer. At the experiment day, a participant used the prototype for 15minutes, then 35min of in-depth interview followed.

2. After the 15 min break

We conducted a 30 min of usability test towards wikiPEN’s UI. To evaluate perceived ease of use, we deployed the questionnaires from the study of an evaluation tool. [Our questionnaires were to assess the following four criteria: 1) Learnability, 2) Memorability, 3) Efficiency, 4) Satisfaction. We modified the questionnaires for semi-structure interview.

3. Conducted the semi-structure interview with the prototype.


1. Reduce the searching time

The search results can be filtered through three badges, including Thanks, Expert, and Interest. We found that such filtering function could reduce the searching time.

2. Provide an easy access to the knowledge through Class-note function

A class allows a user approach to the knowledge easily. After searching a class through several keywords that are related to the knowledge that a user wants to learn, a user can seamlessly access to the knowledge by checking the notes of the class.

3. Help one’s understanding of the core contents at one glance

WikiPEN helps a user understand the crucial parts of the materials easily and rapidly. Participant 07 felt difficulty whenever he reads materials in English, however, he was able to overcome such difficulty through wiki-layers. He first read the highlighted parts and notes with Red Pen on wiki-layers. By reading the parts of Red Pen, he could understand the contents easily and rapidly compared to that of the original material in English.

4. Play a role of a supplementary learning tool

For people who learn new knowledge by oneself, wiki-layer takes can be a supplementary learning tool. We found that wiki-layer is used for student learning through the interview of the participant 06, a high school teacher below.

Usability Issue

The prototype that was used for the experiment allows participants to see the tutorial only at the Setting page. Several participants were confused when selecting colors for annotations. Also, some questioned about why wikiPEN only provides three colors: Why can I use only three colors? Or, is there any function that provides a wider color range? (P08)

Some of the participants explored other pages of wikiPEN to find whether they can use other colors. Thus, we modified the final design outcome, showing the tutorial at first, not in the Setting page, to notify users wikiPEN only provides three colors for annotations.

Watch the wikiPEN’s final design prototype!

‘WikiPEN’ has a potential that can be applied to the field of collective intelligence. Also, it can be one of the efficient solutions for learning, especially for new knowledge, if it brings other methods from active reading, along with social annotation.