Nico Aci

Note

Nico Aci, Semester 7

Note is a tablet application for creating and learning visual notes/ Sketchnotes. It consists of two parts. The learning platform and a sketchnoting tool.

What are sketchnotes/visual notes ?

Sketchnotes are visual notes that can be used in many different areas. They can be utilized to record lectures, lessons, or meetings, as well as for to-do lists, instructions, and recipes. Sketchnotes offer the advantage of improved focus and better retention of information compared to conventional notes. Additionally, extracting information from sketchnotes is easier, as they are more intuitive to read. However, learning and getting into the workflow of sketchnoting can be relatively challenging. The existing learning materials, such as books, lack interactivity, causing many to lose motivation.

First Research

The initial topic was ‘learn to draw,’ but it later changed to ‘learn to sketchnote.’ The first research phase began with investigating drawing techniques and exploring their history. I conducted interviews with two experts on the topic and gathered a lot of insights. To put it simply, the essence of drawing is breaking down complex structures into simple shapes. One of the most important aspects of drawing is to draw what you see, not what you think. When you draw what you think, you tend to draw a symbol of it rather than the actual thing.

In the research phase, I eventually reached a point where I needed to focus on a specific problem and target group. I asked myself a very fundamental question.

Why do people draw?

I conducted a survey with people from my school. There were a variety of answers, but many people used drawings for communication. I began researching drawing as a form of communication and stumbled upon a book titled ‘Visual Meetings.’ It had a very interesting premise, teaching techniques for visual notes and how to better explain things in meetings. Through that, I eventually found the topic of sketchnoting.

Target group and problem to be solved

I want to focus the target audience on students and office workers since the use case for taking notes is very similar for both groups. I aim to help them create effective sketchnotes during lectures, classes, or meetings, so that attention increases and the information from the notes can be better reconstructed (for example, to facilitate learning from the notes or preparing for something). I want to achieve this by making the process of learning sketchnotes easier and by supporting the note-taking process.

Second Research and tests

After defining the target audience and the problem to be solved, I began conducting additional interviews. I wanted to find out where people encounter problems with conventional notes and if they have ever worked with sketchnotes.

I conducted several tests to find out how to improve the sketchnoting process.
The test subjects had to watch three short YouTube videos and had to take sketchnote. Each of these YouTube videos covered a different topic, providing a wide variety of information. I asked the test subjects about the content of the youtube videos the following day. At first, they were not allowed to look at their notes. They remembered quite a lot, mostly the things they had noted down. After they were allowed to look at their notes, they were able to answer every question.

It was very interesting that they sometimes knew exactly what they had noted down. The drawings were relativly similar and the following patterns emerged. It was challenging to depict metaphors, concepts, and time. Objects, people, and animals were easier to represent.
For example, words like character or reliable were very difficult to depict. The test subjects also developed their own symbolic language for certain terms. For example, a leaf for sustainability or arrows above a person’s head to indicate their state of mind. This was very interesting.

The second test was to just observe several games of montagsmaler (A Draw and guessing game). It was very interesting to see how differently all the players approached their drawings. They usually drew the most noticeable feature of a term. If a word was unclear, they added icons to make the drawing clearer. I observed similar problems as in the previous test. Metaphors and concepts were difficult to depict. Additionally, words that represent more complex things were harder to draw, such as the word “airport”, because the person got lost in the details. An airplane would be easier to draw in comparison, but an airport connects multiple elements.

First Prototype

I created user scenarios and did alot of research into sketchnoting techniques to narrow down the learing content of the application. I also created a MVP, Userflow and then started to make the first prototype.

The first prototype was a click dummy to test the user friendliness and the learing content of the application.

User Testing

I did a total of 4 User Tests. I collected all the feedback and sorted it. There were many overlaps, particularly with the save function of the note-taking tool, the back navigation in the exercises, and missing features like adding layers or creating a new folder.
After this step was completed I began the work on the final prototype.

Final Prototype

The final prototype has three main pages. Navigation through the three main pages is done using the sidebar on the left. Note is a tablet application. You can use either the stylus or the touch function to navigate.

Learning Platform

On the learning platform, you can choose between the three categories: “Sketchnote Basics”, “Drawing Skills”, and “Visual Library”. Additionally, at the bottom, there are courses or exercises that you have recently completed.

In Sketchnote Basics, you can learn the fundamentals of sketchnoting. There are courses such as ‘Sketchnote for Beginners,’ ‘Sketchnotes for Advanced Users,’ ‘Sketchnote Layouts,’ and ‘Sketchnote Elements.’ Each course has a thumbnail and a progress indicator at the bottom.

When the “Sketchnote Layouts” course is selected, the course opens in the application’s note-taking tool. There, you can choose one of the predefined layouts.

Here, as an example, is the “Linear” template. The course then goes through the various steps you need to know to use the template. All the important steps are shown in the sample sketchnote below.

If you select Drawing Skills on the “Learn” page, you can take various courses and exercises on the topic of drawing. These are designed to improve drawing skills and make sketchnotes more lively.

In the Visual Library, you can do various exercises to train your visual library and take a course that shows different tips and tricks on how to build it

The Note Taking Tool

To create sketchnotes, you need to select ‘Sketch’ from the sidebar. This will open the drawing area of the application. The drawing area has a slight background shadow to prevent the drawing board from blending with the UI elements.

On the left side, you will find the main tools for creating sketchnotes. You have the options of a pen, eraser, paint bucket, color picker, eyedropper, and undo/redo.

You can zoom in and rotate the page with two fingers, allowing for better detail work.

Design Process

---