EasyNotes: a note-taking tool that supports code editing
CIS 700–003 Human-Computer Interaction: Final Project
Team: Jihu Kim and Joyce Wang
Introduction
EasyNotes is a web-based note-taking tool designed to help beginner Computer Science (CS) students easily organize their class notes of various types and ultimately improve their learning experience by having “all notes/information in one place.”
Motivation
As new CS students who just started learning to code, one of the common struggles we experienced was finding an effective way to take and organize class notes as well as knowledge learned throughout the process of working on programming projects. For CS introductory courses such as Software Development and Data Structure that involve intensive live coding sessions during classes, being able to take ‘coding’ notes and run the codes quickly in class is essential to the learning process. For courses such as Algorithms and math foundation courses, handwriting and drawing graphs to illustrate important concepts, on the other hand, would be most helpful for learning.
While current notetaking tools, such as Notion, RemNote, or OneNote, allow users to either note down code snippets or support handwriting and drawing through an iPad device, none of them support both functions. In order to address this problem of learning computer science, we design a notetaking tool that possesses both abilities and more to help new CS students or beginner programming learners to learn efficiently and enjoy the learning process.
Our Approach
We began by conducting contextual interviews with CS students who only have one or two years of experience in learning computer science to gather user needs. Our team noted that being able to organize and access notes of different natures (e.g. codes, math functions, graphs, information on slides) in one place is crucial to an efficient and effective learning process for coding. Based on the insights we get, we performed ideation and came up with different designs by sketching low-fidelity prototypes. We then iterated our design by creating mid-fidelity prototypes and taking our prototypes back to users for preliminary evaluation. After some runs of implementing and getting user feedback, we presented EasyNotes as our solution.
Our Solution and User Feedback
EasyNotes is a web-based notetaking application that has the ability to easily code and run codes, jot down handwriting notes and add images. It is designed to be minimal and simple to use where within a few clicks the user can start taking notes of different types. In addition, EasyNotes supports keyword search and note organization by pinning blocks to allow users to quickly find the information they need for learning. The users from our final round evaluation mentioned that they are impressed with the code editor function in our tool and that they wish they had such kind of tool in their first year of learning programming. “I was overwhelmed in my first few programming classes because there were so many pieces of information here and there. I think all-notes-in-one-place is definitely what I wanted at that time.” The user also commented that our tool is simple and user-friendly, and it will be helpful for learning CS. From the evaluation, we also gained some insights for our future improvement.
Interview & Observation
To know if other students who are new to CS share the same struggles with us and if they would find an effective note-taking tool beneficial to their learning, we conducted interviews with four Penn graduate students, three of which are from the Master of Computer and Information Technology (MCIT) program where all students came from non-CS backgrounds and just started coding. We also interviewed one student from the Computer and Information Science (CIS) program, who has more experience in studying CS, to see if note-taking also affects the learning of experienced students and how they figure out an effective way to study CS. After that, we joined three of the users we interviewed in their CS classes to observe how they actually take notes in order to get more design insights. We had the interviews and observations done separately instead of conducting contextual interviews at once as we intend to gauge whether the user would be the target student that we want to design for from preliminary interviews.
From our conversation with interviewees, we identified that User A and User B would be our main target users. User C and User D could also be our target users; however, User C uses only handwriting notes for the courses she had this semester and User D doesn’t actually take notes for any of his classes currently. So we eliminate them from our observation target. We include for our observation one more user, User E, who is a second-year MCIT student who takes comprehensive notes for almost every class and finds notes extremely helpful for his study.
Our detailed interview and observation approach is as follows:
Interview & Observation Goals
- How does note-taking help CS students in learning?
- When and why do CS students access and search their notes?
- What are the pain points of using current note-taking tools?
Interview Guides
Here are some questions that we asked in our interviews:
- How many years of experience do you have in coding?
- Why do you take notes in a CS class? In which kind of classes do you take notes?
- How do you structure your notes and codes? How do you feel about the way you organize them now?
- What tools do you use to take notes for CS classes?
- What do you like about the tool and what you don’t like about it?
- What’s the process of taking notes and retrieving them? Can you walk us through the process? Under what situation would you need to go through your notes and find information? How long does it take?
- Can you show us an example of your notes for programming classes and walk us through how you took the notes?
- In general, what features do you think would be great to have in a note-taking tool? What features do you think would be helpful to take ‘coding’ notes?
- What frustrates you during the note-taking and retrieving process, particularly, on coding notes?
- Anything else you want to add?
Interview & Observation Findings
User A is an MCIT first-year student who studied film and photographic arts and worked as a video production assistant before. She has taken some CS courses during her undergraduate study, but overall, she has about one year of coding experience.
Findings
- Noting down data structures, libraries, and syntax used in past programming projects is what the user thinks is most helpful for learning to code. “It would be very helpful if there exists a tool that can actually help keep track of what projects used what libraries so that when I need it, it will tell me where in the projects/files I can go to copy and paste some blocks of code. Otherwise, I will need to look up online for the same thing again and again.”
- “It could be nice for people to be able to label the shared functions (i.e. some blocks of code) in a coding file that can be used in the future. So tag feature would be something useful to add to the tool.”
- The user uses RemNote most often and it is because “the feature of flashcards is useful for memorization. You can create flashcards from your notes and test yourself after that to see whether you understand/memorize. Also, you can use Latex syntax within RemNote.”
4. For live coding, “since there’s no tool that supports running real codes, I normally do it separately in Integrated Development Environment (IDE) so that I can run the codes and comment many of my notes inside.”
Walkthrough
The user walked us through an example of a note taken for the Introduction to Computer System course using RemNote. The note involves code snippets of C language where she noted down some errors encountered doing assignments or new data structures learned in class. The purpose of the note is “…so that next time if in the future I encounter the same exceptions I can refer to them.” She also showed us a note she took for the Mathematical Foundations of Computer Science course where she needs to note down math functions with math symbols.
User B is a first-year MCIT student who studied psychology and worked as a research assistant before. She used Python at work. Overall, she has about more than one year of experience in coding.
Findings
- “No streamlined process, no consolidated system suitable for all classes. I literally need to screenshot my hand sketches and airdrop them to my laptop to combine them into my notes in Notion. It’s sometimes easier to just google. The biggest problem is that every note is everywhere — so many places to crosscheck in order to find my notes!”
2. The user mentioned that “conceptual notes are typed down and kept separately as normal notes,” but for some notes, she will need to “comment on lecture slides for some code examples because there are more specific details I might not know and some professors would assume you know, and I need extra information.” The user needs to use different tools/ways to take notes because “For courses such as Software Development, Data Structure, and Computer System, I always had to type it up because it’s too fast. For those notation-heavy classes, like Algorithm, handwritten is faster for math notations.”
3. In terms of organization, the user said she would need a tool to support flexible ways of connecting notes. “Features such as linking google slides, code files, and other platforms professor put materials on with the notes would be great. Also, the ability to embed lecture slides, handwriting notes, and allow symbols and math notations would be very helpful.”
User C is a first-year CIS graduate student who has over five years of experience learning CS.
Findings
- The user prefers handwriting for theoretical heavy CS classes. “For example, for the Database and Information Systems course, I tried typing down notes next to the slide at the beginning but I felt like nothing was in my head, so I started to handwrite everything.
- “When I took classes with coding demos, I would either type in Notion or in IDE next to the code as comments. This depends on how much time I have. If I don’t have time, I would just comment, and move on.”
- “This is so inconvenient: combining notes that have theoretical information and notes that are about code. So for courses like Web Development, which is programming heavy, I would mostly google, and refer to slides if needed.”
- Overall, the user mainly handwrites in Notability. She used Notion before but wasn’t a fan. “Code typing was a nice option, but formatting and structuring pages were still confusing to me. There are many features in Notion that I never used. I wish it had the same interface as Notability.”
User D is a second-year MCIT student who worked as a management consultant before. He has about two years of experience in coding.
Findings
- Overall, the user doesn’t depend much on note-taking for his learning. He mentioned “CIS electives are harder and the pace is faster in class. It’s hard to follow the professor and take notes at the same time. I would rather understand the content thoroughly in class than try to take notes but miss important concepts.”
- “For other CS classes, if I want to note down something, I just use Google Docs to quickly jot down some key points. As for living coding sessions, I just do it in IDE and I don’t tend to find information from that for study later.”
- It would be great to have a tool that is very simple and easy to use so that taking notes for CS classes can be very fast.
We performed thorough and in-depth user research by gathering information in the moment and context of use in order to understand user needs and their interactions with note-taking tools. We relied heavily on the insights we gained from the conversation and observation for our design considerations, as we aim to close the gaps between our view and user view in order to create a design that is user-centric. Synthesizing what we learned from our user research, the key user needs/pain points that we considered for our design ideation later are as follows:
Ideation
Crazy 8’s
Provided a sizable amount of findings and synthesized design insights to dig into, we adopted Crazy 8’s design sprint method for our brainstorming and sketch generating process. Crazy 8’s is a fast sketching exercise that challenges people to sketch eight distinct ideas in eight minutes. The goal is to push beyond our first idea and to generate a wide variety of innovative solutions to our challenges. To prepare for Crazy 8’s, we reviewed our design goals and collected thoughts together so that we can sketch ideas based on the knowledge and opportunities shared in the previous phase later.
Ideation sketch
Following the Crazy 8’s method, we each sketched eight ideas in eight minutes (one minute for each idea). Overall, both of our sketches are centered around simplicity, flexibility, and integration of key user needs.
In terms of visual design, we shared some ideas on how to organize notes (e.g. in sticky notes format or blocks of notes by nature) and keep the interface minimal with only a few buttons or one sidebar. In terms of functionality, we had a general idea that we wanted users to be able to code, draw, add math symbols, and type in our note-taking interface.
Sharing and Voting
After we finished the Crazy 8’s exercise, we each shared the ideas we have generated and discussed what we liked about them as well as the downside of each idea. We voted for three design ideas we liked most and weeded out sketches that are not feasible or don’t distinguish themselves from the current tools.
We finalized our ideation sketches as follows:
1. Sticky Note Organization
We choose this idea because it’s pretty intuitive to simply right-click and generate sticky notes like blocks of different types. Functional-wise, the design supports resizing and positioning notes by dragging them around. It also allows users to quickly search for relevant notes.
2. Block Organization
We like this idea because this more conventional visual design is easier for users to get started with and it uses color to distinguish between blocks that support different types of notes. It also features an alternative way to the hierarchical view of sorting notes, which is by pinning note blocks to the sidebar.
3. Comment Bubble Feature
The idea is to allow users to immediately begin typing when you open it and use the comment bubble feature to add comments of different nature alongside the text notes. This idea is very interesting with its unconventional organization and playful visual look. In addition, users can easily reposition and resize the comment bubbles as they wish by dragging them.
Overall, all three ideas address the design considerations collected in the interview and observation phase. Considering the feasibility of implementation and the least learning curve for users, we decided to go with the block organization design as it resembles the conventional note-taking tool interface but with a twist on the note organization (specifically, pinning notes by blocks) towards simplification, and achieves the goal of supporting various types of notes needed for typical CS classes.
Prototype and Evaluation
Based on the finalized solution sketch, we built our first iteration mid-fidelity prototype in Figma
This is our 1st prototype: Figma link
User Feedback/Evaluation
We conducted the first evaluation on our prototype thus far with four users where two of them being our previously identified target students, User A and User B, and the other users are other students from MCIT who didn’t participate in our previous interview phase. We wanted to get feedback from two new users so that we can have a fresh pair of eyes to look at our design and see if our design is quick and easy to use even for people without the context.
Overall, the feedback is positive. Users like the functionality and the idea of our design, and they found it very easy to use. However, they were confused about the functionality of the pinned blocks and notes navigation sidebar. They also suggest some useful features that they would love to see in a note-taking tool. Some of the comments we received from the evaluation are:
“In general, it’s very user-friendly and nice. It would be great if the pinned blocks panel is collapsable so that users can have more space to take notes. Also, it’s more intuitive to me to have the notes organization bar on the left side.”
“I think if we can just drag and drop note blocks to the right pinned blocks area and drag and drop images or other reference files to add to notes, it would be more intuitive. For note organization, I think the “Other” section at the right bottom is a bit confusing to me. Note blocks and different note pages should be on different hierarchy levels. Overall the tool is pretty nice!”
“The tool is great! I love that it supports exactly those types of notes we need for CS classes. It would be even greater to have a keyword search function (i.e. Control + F) because I always use that to search in my notes.”
“The interface is so cute and helpful! The code editor is definitely the best. Maybe the buttons to create note blocks can be hidden by default and it supports some shortcuts to create them?”
“Do you consider enabling quick math symbols adding tools?”
Second iteration: mid-fidelity prototype in Figma
To address their feedback, we made the following changes to our prototype and built our second iteration accordingly:
- We repositioned the sidebar of pinned notes to the left and made the toolbar smaller so that there is more space for notes
- We made pinned blocks section collapsable
- We added a keyword search bar
- We renamed “Other” notes to “All Notebooks” so it’s clearer how to navigate to other note pages
This is our 2nd prototype: Figma link
Implementation
A few of the biggest technical challenges for this project were to implement:
- text editors that can be created on click by the user
- code editors that can be created on click by the user
- image insertion feature
- handwriting area in the note
- collapsable note organization panel
Libraries used:
System
To help new CS students or beginner programming learners quickly and easily note down various types of notes, our EasyNotes tool includes the following features:
- Add text: Users can click the + Text button to create a text editor on the page and start typing notes. Take one of the core courses of the MCIT program, Software Development and Data Structure, as an example, students would take notes in text such as the following:
“What is the “worst-case” when inserting an element into a singly linked list? pointer at the head. Insertion at the rear of the list (index n-1) (need to traverse through the entire list)
An array-based list is more space-efficient when… We know how many elements will be stored in the List”
2. Add and run codes: Users can click the + Code button to create a code editor on the page and write codes inside. Users can also run their codes to check for the correctness of their program.
3. Draw and handwrite: Users can click the + Handwriting button to create a space for drawing and handwriting. In Data Structure and Software Development classes, there are plenty of graphs that are used to illustrate different data structures and how they are used. For example, drawing and handwriting to illustrate the data structure Binary Tree in Heap as below can be added in EasyNotes easily:
4. Attach images: Users can click the + Image button to upload image files into their notes. A screenshot of lecture slides of important concepts or a photo of something written on the blackboard by the professor in class is usually part of CS students’ notes.
5. Pin note blocks: Users can pin selected blocks of notes to the side panel and they can be found by clicking on the Pinned blocks.
6. Navigate to other notebooks: Users can click on the All Notebooks to see a dropdown of other notebooks. For example, a user can quickly navigate from Data Structure and Software Development class note to the Database class note from here.
7. Keyword search in notes: Users can use the search bar on the top of the interface to search for certain information in their notes. Users can type in “linked list” to get to the text note created above.
8. Delete note blocks: user can click on the Remove button to delete a note block that is not needed.
Here is our demo video for EasyNotes:
Final User Evaluation
Method
After finishing the implementation, we reached out to our target users User A and User B again to see how well we were able to address their concerns. We also included one more user (a CIS graduate student with a concentration in Data Science) who did not participate in any of our design processes before to provide fresh feedback in general. In doing so, we had two goals. First, we wanted to see if the integration of coding, text, and handwriting features actually proved useful to note-taking for CS students. Second, we wanted to know how simple and convenient our interface is. To achieve our goals, we started the evaluation by letting the users play around with EasyNotes to try out different functionalities on their own. Users are asked to use the EasyNotes app to take notes from some recorded classes of their own choice. By doing that, we were hoping to learn some of the potential improvement areas for our app from users’ questions or confusion during the process. Finally, we explained each of the features to the users and asked for their feedback.
Result and Discussion
The users we interviewed appreciated the code editor feature the most because it could really help CS students take notes quickly without switching between different platforms and tools, and it makes their notes clearer with text explanation alongside the real codes. They also loved the overall aesthetics of our tool and praised our note-taking interface for looking cute and familiar. In addition, the users said the organization and navigation of notes are pretty intuitive and easy to use. They enjoyed the pinned blocks feature and keyword search function because they help the users find important snippets easily, and prevent them from scrolling through the whole notes over and over.
We noticed from observing the users taking notes for classes, however, they hesitated to use the code editor features when it comes to coding that involves multiple classes depending on each other, which for some of them, still wondered if using an IDE would best store the files.
When discussing how EasyNotes would fit into their normal note-taking process, users mentioned that they would like to be able to use some keyboard shortcuts to create and delete notes. This was something talked about in our previous evaluation but we decided to not include in our implementation at this moment for the simplicity and feasibility of implementation.
Conclusion
In conclusion, we were pleased to get validation of the usability of our tool EasyNotes and to know that our design is simple and user-friendly, if it doesn’t push the boundaries of what a note-taking app can do. After all, our ultimate goal of designing a note-taking app uniquely for new CS students is to alleviate beginners’ struggles and anxiety in memorizing many new concepts, knowledge, and syntax when learning programming and CS, which we as students who just transitioned to this field experienced immensely ourselves. We are hoping that an effective note-taking app can smooth the learning process and allow students to browse and reference important information learned in the simplest way.
Some directions for our next steps, in the long run, include implementing handwriting and drawing features from iPad or mobile device and drag and drop function for note blocks and other reference materials. We could also enable keyboard shortcuts to navigate through the app for a better user experience.
We appreciate all the support from the course staff and users who give us much useful feedback. We hope you enjoy this reading!
