GoodNotes Tags & Reminders
Tools that bridge connections between students and knowledge
Over spring of 2022, I had an opportunity to work with GoodNotes on experimental learning features and designed tags / reminders to help students improve learning habits. Reminders were turned into notifications on the product.
Timeline
Jan - May 2022
Team
Ethan Chng
Jihyun Kim
Michelle Deng
Xiaowen Yuan
Adi Mavalankar
Tools
Figma
Principle
Disciplines
Human Interface Guidelines
Interaction Design
Visual Design
Core Experiences
Add tags
to your notes
Create reminders
Many study tools today have basic functionalities, but they don't actually help students to learn better…
How can we create powerful tools that help students to enjoy learning and learn faster?
Many platforms have begun embracing subscription-based models, focusing on templates to simplify note-taking for their users. We wanted to focus on the core note-taking experience and understand how to curate a better tool for thought.
UXR
Three main discovery pillars for our approach
Confidence
Quantify & understand what affects students’ confidence?
Prioritization
What do students prioritize while taking notes? How so?
KEY INSIGHTS
Students struggle more during early stages of learning
Students struggle to take effective notes during lectures. This problem compounds into greater ones as they organize their notes and study for exams. Below are some granular strategies that we discovered they struggle with:
Organization & efficiency
Students indicate that they strongly seek out efficient processes and organizational methods for note-taking and accessing notes.
Prioritization
Depends on the density of information presented. Students tend to struggle with what to note because they're unable to keep up with the pace of lecture.
All this boils down to…
Tactile connections made in lecture
We found that tactility should be the primary focus – how students interact with a notebook is pivotal to the experience of taking effective notes that will help them retain the content in the long term.
THE design GOAL
GoodNotes Tags
This tool is inspired by physical tags, the kinds that we used to stick to our notes to remember thoughts and note questions. This encourages active note-taking and creates visual cues for students.
Within digital notebooks, tags added while note-taking help to reinforce memory through visual cues scattered throughout sections of their notes.
Tag interface explorations
Tags consist of three main interface experiences: tags visual design on the notebook, popup to add a tag, and writing within an expandable tag/resolving tags.
Tag Visual Design
At first, I designed tags that explicitly stated the string, like 'review', associated with the visual. However, as I wanted these to feel closer to actual tags that you stick on notebooks as things you understand and can refer back to easily, I designed a simple visual representation for various tag shapes that are commonly used in the real world.
Tag Popup Modal
The tag modal is displayed when a user wants to add a tag to the notebook. Tags were designed to feel like buttons within the modal such that users tapped instead of dragged 'shaped tag' buttons. This interaction helps with accuracy for the placement of tags such that there is no disconnect between the action of initiating the insert tag modal and choosing a specific tag.
Expandable Tags
Tags aren't only a visual cue, but they can also be expanded to disclose more information such as a question. This provides another way users can hide and reveal information, and also resolve tags that they've already studied.
Tag interaction explorations
While having the tag feature on the toolbar is the most noticeable, we distinguished based on user testing that it was more intuitive for users to long-tap to access ‘quick-tools’. Below are some iterations I went through to improve interaction design.
Tag on Toolbar – Combined Settings
Evidently, the toolbar was getting overcrowded with the number of tools constantly being added over time. Interactions were also confusing if oversimplified into a singular setting as the tag would have to share the same color picker as the pen tool.
Tag on Toolbar – Individual Settings
With individual settings, it becomes a lot clearer how to edit individual tags with all information within a modal. However, the modal can get excessively long with the amount of information needed.
Tag on Toolbar – Dragging Interaction Gesture
With Fitt's law in mind, the physical interaction costs associated with having to drag all the way from the toolbar to the page are extremely high. For what is supposed to be a light and quick gesture, this wasn't an ideal experience.
Tag by Long Press Gesture
I tried a new interaction for the tool through a long press which would pull up the edit menu with 'Add Tag'. This felt much more intuitive as this tool was meant to be a 'quick-tool' easily accessed quickly. By hiding customization behind an edit button, this also separated secondary interactions from primary ones – gesture for adding a tag – and circumvents the past issues of large modals.
Final experience
Help students prioritize lecture content with tags
Addressing how students prioritize information and could be more efficient in reviewing their notes, we designed a new tool that allows students to quickly flag their notes and note down important content.
For example, if a student has a question during lecture, they can use a question tag to refer back to at a later point.
Customize tag to your needs
→ color, shape, expandable?
Every student associates a certain color with phrases and shapes differently. While tags come with preset names, colors, and shapes, these can be fully customized to suit each student’s needs.
Expandable Tag
Tags can be expandable to show a popup to write additional information such as questions, notes, etc.
Edit Tag Interaction
When designing this feature, it became evident that students would create and use their tags for a period of time before making changes. As such, customization (reordering, changing colors, etc.) is hidden behind an edit button as a secondary use case.
GoodNotes Reminders
While initially I had tied each tag to a notification to remind students to review their notes, I did not anticipate for the number of tags notifications there could be. Imagine being spammed with so many notifications it becomes overwhelming and annoying rather than actually helpful for your studying. I decided to tie tag notifications to individual notebooks as reminder summaries, drastically reducing the number of potential push notifications.
Before: individual tag notifications not tied to notebooks
Separating tags from it's notification feature called reminders.
I made this decision because I wanted reminders to be document-based rather than based on individual tags. I also decided to rename ‘notifications’ to ‘reminders’ to match the use case of the feature better.
A simple tag symbol in each notebook reminder signals to users what they need to review.
Reminders can be set by going through the popover with settings to reach the 'Reminder Settings' modal. From here, users can customize reminders by date and whether they want repeated events through a 'drill-in'. These interface experiences follow the iOS Human Interface guidelines to create a sense of familiarity when engaging in more complex tasks like customization.
Final experinece
Access reminders through your phone.
Similar to on iPadOS, students can quickly check their reminders on their iPhone through the reminders modal and make changes accordingly.
Tag Visual Indicators
Tags stick out as glanceable visual indicators to remind students of content they need to review.
