Students find it difficult to take detailed, customized notes and sift through large amounts of textbook material for important points. 
Through my research, I found that many dated textbooks and textbook PDFs are still assigned for reading across schools in the United States. In addition, more and more elementary schools are starting to use mixed media such as more affordable models of tablets
In addition, research revealed students learn more when they are actively engaged in the reading process, and while textbooks seemed to be a starting point for students, learning today is often supplemented with other more convenient sources.  
"Students weren’t reading the book—they were trying to find the responses from Wikipedia, as opposed to reading the stuff that I assigned to them."
-Sara Eskridge, professor & author of United States History 
So, how do we supplement this new wave of learning for young students?
Competitive Analysis
iBooks - Interactive Textbooks
Strengths: Allows you to create textbooks with 3D images that can be interacted with, highlighting, and more. Highly visual.
Weaknesses: Difficult to take notes within the app. Hard to translate traditional textbooks and research papers to this format. Lives primarily on the i-Pad.

McGraw Hill
Strengths: Has a “Connect” interface that asks probing questions and quizzes after the material. Highlights important portions of text. Questions link back to pages where answers are contained.
Weaknesses: Difficult to take notes while reading. Different interfaces makes it hard to adapt. Non-interactive images.

Strengths: Students can create their own assignments, by combining end of the chapter exercises or review questions. Contains active windows to test code without leaving the site. Provides feedback on assignments.
Weaknesses: Excessive feedback can make students frustrated. Pace of moving through material is forced.

PDF Annotators: 
Strengths: PDF annotation applications have functionality to quickly highlight, draw and comment.
Weaknesses: Does not contain robust note-taking functionality or ways to export these notes.

What did I learn?
1. The current products have little to no emphasis on individual learning and note-taking styles.
2. Current products do not allow for complete customization of the notes, by pulling in videos, drawings or links from other sources (synthesis).
3. Note-taking features are not as robust, allowing only for basic text entry and styling. Many interactive features are currently pigeonholed, confined to an individual textbook or device. 
User Interviews:
I conducted 4 user interviews as a part of this project. 
I conducted 2 interviews with college students in varying majors with varying degrees of assigned material about their past experiences. I also conducted interviews with 2 with middle school students currently studying to get their perspective.
Why also interview older students for a product aimed at younger students? I thought they may have a better reflective perspective to share on what they wish would have been different for them. This could be really valuable in informing the product. 

Part 1: Question & Answer Session
I focused on the process students use to take notes currently from e-books or onand tried to identify the frustrations and pain points. The interview protocol I designed and used to gather information is below. 

Example interview protocol

Part 2: Active Participation 
I gave students a printed article and asked them to annotate and take notes on it, as if there would be a quiz on the subject of the article. I observed the tools they preferred, the notes taken, and the markings on the article made during the reading process. 

Aggregating Results:
In order to organize and make sense of the qualitative data I collected from the interviews, I constructed an affinity wall with key pain points that were shared. I first posted all of the quotes I had written, and then clustered where I saw patterns and themes. Excerpts shown below:

Key Takeaways:
After clustering the quotes into groups, clear user needs emerged. I was also able to pull information from the article annotations and notes and found that students valued their own touch and documenting info in a way that was specific to their learning style. 
For instance, one student during the article interview exercise found highlighting to be very important. Another student emphasized similar areas of the article, but used underlining and circling text instead. 

[1] "I like charts. The textbook just had the parts of a cell [listed] in a paragraph. I took that and made a table with part of cell and its function. It was so much easier."

[2] "Google knows all, and five links explain a concept better than one textbook definition can."

[3] "I just want a way to pick out the bold words quickly without writing it word for word again."

User Needs:
-Ability to condense large amounts of material quickly
-Minimal constraints on how to reinforce the material
-Caters to individualized learning habits
-Method to easily toggle between textbook and notes
-Ability to extract useful pieces of the textbook into notes
-Visually oriented system with lots of color, features to incorporate sketches, arrows, charts, etc.
-Includes searching and highlighting within the text
-Easy to learn and review key words and definitions
-Ability to synthesize textbook material with other relevant online sources

Storyboarding & Initial Sketching:
After understanding user needs, I crafted the story of what would motivate a user to use the textbook application, and the workflow of what would allow them to engage with the material most effectively. 
Concurrently, I began preliminary feature-level sketching.

One of the storyboards I sketched.

How did storyboarding this interaction help?By imagining a solution actually integrated into a classroom, I was able to visualize how a student might use this and how it should be structured in order to be engaged with. This is when I realized a portable medium such as a tablet may be a good medium to interact more with textbooks.

Feature List 
After the initial feature-level sketching, I brainstormed a list of features that would address user needs. I compiled the list separated by section in order to create a hierarchy of how the application would be structured and what each component could contain. 
I factored in all of the user needs when determining what features to include. For example, the feature of "being able to take images from the textbook and import them into notes" relates to the user need of wanting to extract relevant information from the textbook. The feature of "translating a word/definition table into interactive flashcards" relates to the user need of easily being able to review key words and definitions
I similarly incorporated overarching needs while devising the rest of the specific features. 
Low Fidelity Prototyping
After the feature deconstruction phase, I began to map out where the functionality would lie in the application, and how functions such as scrolling, opening, and editing would be managed. 

The first paper iteration of all three views is below:

I received feedback on these initial sketches from users on what they liked, disliked, and found to be confusing about the layout, and I made the following notes of changes to make:
1. Instead of user having to save a note, continually autosave and display when the note was last saved.
2. Have the text functionalities display on hover instead of a fixed bar. This can speed up workflow and will decrease the pointer-to-target distance.
3. Give different visual layouts for notebooks and notes so the user can easily remember if they are accessing a notebook or note (creates better situational awareness and context). During the tests of the sketches, users had a hard time differentiating between if they were looking at a notebook or a note.
4. Do not add too much functionality. My UI was very complex at first when I showed users initial prototypes, and students got confused quickly. I then made the UI simple with just a few large, key actions. From this I learned, you must design for your audience!

Hi-Fidelity Prototyping 
Finally, I created hi-fidelity prototypes of the screens using Adobe Illustrator. I wanted to communicate a calming feel since users emphasized how note-taking can be stressful, so I picked blue. I named the application Sift since many users mentioned how they have to comb through a lot of material in order to extract the important parts of a textbook. 
I also condensed the UI to be larger (large tap targets) and with only a few key actions for younger students who do not have as refined motor functions.
From user recommendation, I abstracted a lot of the functionality beneath layers, so the interface seems simple at first glance for younger users. In the final design, relevant functionality to a certain area appears on hover, or an on demand model.​​​​​​​
See below for the final prototype! 

Getting Started
I tried to put clear calls to action for adding a file and creating a notebook. This is to decrease barrier to entry, and users reported they have the most frustration when they can't find how to perform key functions.

Clear call to action on home screen to upload a file; clear call to action to "add a notebook" on first screen.

The below image shows how text and media is embedded in the same note - allowing this mixing of saving relevant textbook content and creating your own.
This project really taught me the dangers of self-referential design. Because I am a student, there were assumptions I made about how students typically learn. However, there were a lot of these assumptions that my user interviews debunked. For instance, I thought that students would want to share notes with other students, but my interviewees explained how only their own notes and shorthand make sense to them. User interviews also allowed me to identify needs that I would have never identified by just referring to myself. 
I also learned that it is important to design specifically for your audience, and be inclusive. I was first designing a robust tool with so many functions that a young student may not even understand. By getting feedback, I was able to iterate and condense the UI.

Back to Top