It began with an authentic understanding of learning and studying.
To get started, we held many conversations with students who are Goodnotes users to get a personal understanding of who we'll be designing for. These conversations were followed by field studies, during which we observed how students currently interact with Goodnotes features.
Interfaces for Learning
RESEARCH
DESIGN PROCESS
How can we create a simple way for students to keep track of specific notes?
Field studies with Goodnotes users helped me understand the mental models of how students currently organized their notes. As shown below, students use folders as a high-level categorization to sort and navigate through notes, and they typically create 2-3 layers of folders. However, students often have numerous notes within folders that require further categorization.
DEFINING CHALLENGES 01 (START OF INDEPENDENT WORK)
Challenges
Design Questions
2 step tagging
1 step tagging
Select Tags
Confirm
Edit
Back
Review
Discuss
Redo
Tips
Tricky
Important
Ask Angie
Select Categories
Select Tags
Next
Edit
Edit
Study Group
Office Hours
Midterm 1
Midterm 2
Review
Discuss
Redo
Tips
Tricky
Important
Ask Angie
Next
Edit
Study Group
Office Hours
Select Categories
Midterm 1
Midterm 2
Friction Point
More work is required on students' end to navigate between selecting categories and tags, and it provided no view of all selections.
Iteration 01
Iteration 02
Tagging Process
The one-step interaction made it easier for students to change their selections and provided a clearer overview of everything selected. Although the two-step interaction could reduce clutter when numerous categories and tags are created, concept testing revealed that students would typically create 4-6 categories and tags in which they would find useful. Given these usability improvements and the observation that most students would avoid creating excessive categories and tags, the tradeoff was minimal.
Interaction Affordances
During concept testing of the previous prototype, I discovered that due to muscle memory in selecting multiple items, students often added unnecessary categories, despite categories being intended for high-level organization. To address this tendency to 'over-categorize,' I designed a scrollable interaction for high-level categorization, encouraging students to be more deliberate in their selections. Conversely, since students preferred adding multiple tags for more granular categorization, I created a select interaction that enables quick tag selection from a range of options without extra navigation.
What type of interface would best support students to review in one place?
Field studies revealed that when students begin studying for a test, they often find that their notes are scattered across different folders in Goodnotes, making it difficult to remember exactly where everything helpful is located.
Scrolling View
I experimented with an interface that allows students to compile and scroll through Snippets. While it enabled students to view notes in one place, concept testing revealed that scrolling to access content still created a structure that felt inorganic in which notes felt "stuck in place". Although this interface offers an intuitive way to view notes, scrolling becomes tedious when students need to quickly jump to a specific snippet, especially with a large number of them.
Iteration 03
Iteration 04
Friction Point
Categories and Tags look different but their interactions feel the same despite serving different purposes of high and granular classification.
Select interactions for both Categories and Tags.
Scrolling gesture for Categories, and select interaction for Tags.
DEFINING CHALLENGES 02
Challenge Definition 02
Students indicate that their study material feel disconnected from being scattered across folders.
Ideation 02
Create an interface for notes to live so that they feel more connected and coherent.
Manual Entry Search Bar
I experimented with a search bar that allows students to search a snippet by its categories, tags, and content. Although this yielded more accurate results than the existing search feature, I observed that students still had to think about which classification to use and it was often tedious to search up multiple categories or tags.
Suggested Search Tags
Through talking with students, I learned that they associate snippets with its categories and tags more than the actual content. To address this, I prioritized creating a quick and efficient way for students to narrow down their searches using Categories and Tags. The popover feature streamlines the search process by providing suggested filters. Additionally, the visual and functional consistency with the tagging popover ensure the interface lives up to user expectation.
How might we enable students to easily find what they want to study?
From concept testing, I learned that it’s easy for students to create a lot of Snippets, which makes it difficult to find specific ones. I held a series of conversations to learn more about how students currently struggle with finding specific notes.
DEFINING CHALLENGES 03
Search
Midterm 2
Discuss
“Matrices”
Step 2: Search Tags
Step 3: Enter Relevant Content
Step 1: Search Categories
Search Process
Initial Iteration
Important
Friction Point
The work of choosing and entering classifications is mental and physical work that can be reduced.
Manually search up Snippets using Categories, Tags, and relevant content.
Final Iteration
Midterm 2
Midterm 2
Matrices
Discuss
Important
Search by Categories
Search by Tags
Done
Edit
Edit
Tips
Redo
Review
Tricky
Ask Angie
Important
Discuss
Study Group
Office Hours
Midterm 1
Midterm 2
Filtering with Categories and Tags helps students easily find what they want to study.
An accelerated, more powerful search process.
FINAL DESIGN
Sorting abilities specifically designed for better learning.
The cumulative nature of learning encourages for ways to sort content that specifically support learning and comprehension. Students can sort Snippets by the date created to review the the basics before jumping into more rigorous material.
Design reflects thought.
I learned that interactions should reflect how our minds think and make sense of the world. By closely observing user behaviors during field studies, I learned how to think more critically about design details from the perspective of behavioral and cognitive patterns. For example, the discovery that students mentally associate content with its Categories and Tags led to the design of a search bar where students can use them as filters to more easily find what they want to study. Understanding this pattern was key in transforming an interface to one that reflects how students think and organize information.
My curiosity about the learning process allowed me to gain a deeper, more authentic understanding of who I was designing for. From repeatedly taking ideas and sketches into high-fidelity prototypes, I learned how to better make use of interface principles and the nuances of micro-interactions in shaping how an interface looks and feels. Through iterating the Whiteboard interface, I learned how to better balance functionality and simplicity and to incorporate elements that feel playful.
Tagging System
Example metrics to measure the tagging system would be completion time, success rate, and adoption.
Whiteboard Interface
Example metrics for Whiteboards would be the concentration and density of annotations.
Learning about constraints early on.
Since this project is purely conceptual, gathering insights on potential constraints early in the design process would have been essential. Talking with designers from the Goodnotes team provided valuable input on these limitations, which helped ground my design decisions in a more practical and realistic context.
Considering solutions with lower engineering costs.
While an infinite canvas allow students to better organize their notes spatially, the engineering costs associated with implementing it is high. To reduce engineering efforts, an alternative would be poster-board sized paper, which offers a similar capability of spatially organizing notes. Additionally, a lower-engineering cost solution than annotating on an infinite canvas would be posted notes.
Challenge Definition 03
Students feel that the one-step search feature is ineffective due to notes with duplicated titles.
REFLECTIONS
What I would've done differently
DESIGN EXPLORATIONS 01
DESIGN EXPLORATIONS 02
DESIGN EXPLORATIONS 03
FUTURE VISIONS
Nonlinear and iterative.
To define what students struggle with when studying for exams, we conducted interviews and field studies with Goodnotes users to understand their processes of learning and studying. I often re-continued conversations with students to corroborate my understanding of certain patterns and behaviors I observed. Through a series of design explorations, I thought critically about how to solve each key challenge. I continuously iterated on prototypes based on feedback from Goodnotes users during concept testing and thought through trade-offs to be made between different iterations.
Initial Iteration
Friction Point
Students found scrolling tedious and impersonal. This interface lacks the flexibility to add meaning and context to study materials.
Scroll to view selected Snippets.
Final Iteration
Infinite canvas interface. Interactions aren't limited to scrolling.
Whiteboards help students study important content in one place by allowing them to easily gather study materials and structure content to best support understanding.
Whiteboard View
An infinite canvas enables students to freely annotate around notes to add personal context. The flexibility to organize Snippets allows students to arrange content in the way that best suits their learning. These features all leverage the iPad’s large screen and capabilities.
Interviews Goals
Identify challenges and obstacles students face when studying for tests.
What’s at the core of a note-taking tool that can alleviate those challenges?
Field Studies Goals
Discover patterns of how students currently utilize Goodnotes features to study, and where they fall short.
Learnings
Metrics
Never miss to study anything important with Snippets.
Currently, students find it difficult to compile specific parts of notes that are helpful for a test. By providing students an easy way to reflect on their learning when acquiring new knowledge, Snippets allows them keep track of every concept or idea that feel important for an upcoming test. By adding Categories and Tags, students can categorize and quickly retrieve relevant Snippets.
Bring together everything relevant with Whiteboards.
Students currently have no way of bringing together notes from various documents other than the tedious process of copy and pasting. Whiteboards is an infinite canvas that lets students easily bring together Snippets relevant for their learning. The interface supports understanding by encouraging students to draw connections and see how each piece of new knowledge fits within what they already know.
TIMELINE
Sept - Dec 2023 (Team Work)
June - Sept 2024 (Ind. Work)
CONTRIBUTION
User Research, Product thinking, Prototyping
PROJECT TYPE & TEAM
Independent Continuation of Team Collab
Team: (5 designers) Gily Y, Grace Y, Zach K, Tina K
Initial Sketches
I began by sketching out some ideas on my notebook. These sessions were super helpful in helping me visualize ideas and identify points for potential design explorations. There were a lot of questions that surfaced: Which flow felt more natural and lightweight? How can we eliminate extra steps and simplify those flows? Where and how should things show up, and what are the alternatives? I made annotations of considerations and questions, which I found to be super helpful later on when prototyping.
Initial Sketches
Through more sketching sessions, I explored with potential views that can spatially connect notes. By sketching and letting my curiosity run free, I identified questions and considerations to further explore. By having a visual record of my ideas, I was able to incrementally improve and built on previous existing ideas.
As part of Berkeley Innovation, I was contracted to work with Goodnotes, a digital note-taking app used by millions of students worldwide, to discover ways to help students study better. Based on some early insights we gathered as a team, I conducted further user research and exploration.
If you're curious about the detailed design process, I'd love to chat on Linkedin!
CURRENT EXPERIENCE
Too many saved notes make it hard to find notes to study when reviewing.
Students struggle to keep track of specific notes to study.
Currently, students add important notes to Favorites. With no ways of categorizing the notes they save and no filters or search function on the Favorites tab, it becomes a struggle for students to find specific notes that are relevant for their learning.
Categories and Tags allow students to effectively organize notes for review.
Snippets are designed to encourage students to continuously reflect on their learning by allowing them to selectively save key content for later review. Instead of saving entire pages, students can now focus on specific content that matters most. The introduction of categories and tags enables high-level and granular organization of Snippets, ensuring that students can easily categorize and access their saved content later when needed.
Suggested Search lets students quickly find what they want to study.
Currently, students lack the ability to quickly search or filter specific saved notes. Understanding that students more often associate notes with categories and tags rather than their content, I designed the Suggested Search feature to help students efficiently find what they want to study.
Whiteboards help students study everything for an exam in one place.
Students often find their notes fragmented across various folders, making it hard and distracting to study a single topic. Previously, there were no interface that offer the freedom to let students view parts of different notes. To address this, students can now easily gather all key concepts they deem important for an exam and organize them on a Whiteboard, allowing them to study everything in one place.
Students can easily organize content in a way that help them learn best.
Whiteboards allow students to freely move around concepts and organize them in a way that makes most sense to them. The interface supports students to draw connections between concepts to deepen their understanding.
FINAL DESIGN
