NoteLoom
A note-taking web application to help college students reach their academic goals by providing AI-assisted organization and study tools.
My Role
UX Researcher and Designer
Project Duration
12 weeks
Tools Used
Figma, Google Meet, Zoom,ChatGPT, Claude
Overview
NoteLoom is a course project designed to guide students through the UX Research and Design process, with a particular emphasis on research.
​
Over 12 weeks, my team conducted research through surveys, user interviews, and usability testing, and synthesized results through affinity mapping, personas, crazy 8's sketching, and prototyping to derive design decisions and better understand our users. ​
​
The Problem
College students struggle with organizing and retaining lecture material because their notes are incomplete, unorganized, or not adapted to their individual study needs and learning styles.
How might we help college students better learn and retain lecture material?
Proposed Solution
A web-based AI-assisted application that allows students to organize and study lecture notes.
The Process
01. Empathize
Interest Survey
Overview
We created a short survey using google forms to identify participants for user interviews and gain basic information about them:
-
Current degree program (undergrad, graduate, PhD)
-
Course load (full or part-time)
-
​In-person or remote
-
Note-taking preference (digital device, pen & paper, etc.)
-
Study frequency
-
Learning style (visual, auditory, reading/writing)
-
Demographics
Survey Results
We identified 7 participants who met the criteria (current students) and gained insights to help create our discussion guide for the following interviews.
User Interviews
Overview
We conducted semi-structured, one-on-one remote interviews to understand how participants take notes, study, retain information, implement AI, and understand their confidence in AI models.
Discussion Guide
Participants were asked a series of open-ended questions with follow-up and probing questions to uncover deeper insight and gain clarity.
Contextual Inquiry
After the discussion, participants were asked to take notes using their preferred note-taking method and encouraged to speak aloud during the process.
​
Our team provided a text-based slide deck lecture and a spoken lecture for note-taking to observe participants in two of the most common classroom lecture scenarios. The contextual inquiry provided valuable and unexpected insights into how the note-taking process differs across lecture modalities.
For instance, student notes tended to be less organized when taking notes from the spoken lecture. After some probing questions, team members learned that students often reorganize their initial notes later or never touch them at all. ​​
02. Define
Affinity Digramming
Why?
After conducting our interviews, the team reconvened to discuss how to best synthesize our research our intial research and derive meaningful insights about our users.
​
Given the project time constraints, amount of interview data, and the need to assure team alignment, we felt that affinity diagramming was a great fit.
Process & Results
The team met online and used Figma to conduct the session and derive insights.
​
From the session, we identified 3 key dimensions:
​
-
Motivational Orientation: Some students were driven by efficiency and speed, while others valued depth and comprehension.
​
-
Relationship with AI: Attitudes toward AI ranged from enthusiastic adopters seeking automation to cautious users requiring transparency and control.
​
-
Design Implications: Students wanted customizable, adaptive study experiences, from structured organization and visual clarity to explainable reasoning and feedback accuracy.
Persona Creation
Why?
Despite the insights provided by the affinity diagram, the team chose to create personas to help maintain user empathy reminiscent of our experience during user interviews.​
​
By using personas, our team aimed to maintain empathy throughout the design process by putting user goals, desires, motivations, and pain points to faces and names
The Process
With the affinity diagram as our foundation, persona creation was fairly straightforward. However, there was a small hiccup.
​
The team initially created 5 personas in an attempt to do our due diligence and cover all aspects of our users' needs. One glaring issue presented itself throughout the process. Our personas had too many commonalities.
​
At this point, we decided to create separation by narrowing down our 5 personas to 3, and utilizing shared needs as general insights to derive decisions that met the needs of all users.
Our Personas
Our 3 personas:
​
-
Alex — The Efficiency Maximizer: Seeks automation and streamlined workflows to save time and boost productivity.
​
-
Kristin — The Structured Organizer: Values order, clarity, and visual tools that reduce overwhelm and support focus.
​
-
Anthony — The Reflective Learner: Prioritizes deep understanding and transparency, seeking AI explanations and credible sources.
03. Ideate
Crazy Eights
Why?
Similar to affinity mapping, crazy eights provided a timely and structured brainstorming solution for our team. Further, we were able to leverage our team of 6 and take advantage of the ideation process by brainstorming 48 potential solutions for our users.
The Process
To promote a more empathy-driven ideation process, our team decided it was best to break out into teams of two, with each team focused on generating solutions for 1 persona.
​
After each pair was finished with their crazy eights sessions, the team met, discussed solutions, identified redundancies, and voted on which features were most effective in meeting user needs.
Results
The meeting derived solutions that met the needs of each persona as well as solutions that applied to them collectively.
04.-05. Prototyping
&
Testing
Round 1
Overview - Prototype v.1
Our initial prototype stayed true to the features we settled on during the ideation phase. However, given the time constraints of the project, we focused on 3 core features:
​
-
Note Creation
-
AI-Generated Flashcards
-
AI Summaries
​
Of course, we did not have a functioning AI model for this project. All of the proposed functionality was to be simulated in Figma.
Wireframes
To begin the process, the team met briefly to collaborate on high-fidelity wireframes to outline the user flows for the initial signup, onboarding, dashboard, note creation, and AI-generated flashcards and summaries
Prototype v.1
With just a week to complete 2 rounds of rapid iteration, the team quickly produced a high-fidelity prototype that focused on note creation and AI-assisted flashcard and summary generation in preparation for usability testing.
Usability Testing Overview
For our usability testing, we focused on gathering feedback about our 3 focused features and overall impressions of NoteLoom's layout. Testing was conducted over Google Meet using Figma as a means for our 5 participants to interact with the prototype.
​
To do so, we developed 3 tasks and scenarios and included a System Usability Survey (SUS) to be completed by participants for each prototype.
​
During the usability testing, participants were encouraged to think aloud during the testing to provide additional insight for the team and better understand their thought process as they moved through our tasks.
The Process
To begin the testing, the team opened by reading a script to outline the testing and break the ice with our participants.
​
Then, we transitioned into tasks and scenarios.
​
Scenario 1: You've arrived at class, and your professor has started today's lecture.
​
Task 1: Start taking notes.
​
Scenario 2: You're done with class for the day and are ready to study today's lecture notes.
​
Task 2: Generate flashcards from your notes.
​
Scenario 3: Midterms are coming up, and you need to refresh your memory on lecture notes from earlier in the semester.
​
Task 3: Generate a summary from one of your saved notes.
​
​
Following testing, participants filled out a standard SUS.
Results
Across participants, these were the most common issues users faced during testing.
​
Pain Points:
​
-
Locating AI-powered tools - Users did not realize that the flashcard and summary features were located in the "AI Assistant" button
​
-
Low visibility of the auto-save feature - Users were unsure if the note was autosaved due to the button state
​
-
Competing navigation flows between the "new note" and the "upload" button - Users found the placement of these features to have a competing visual hierarchy
​
-
Desire to skip onboarding - Users did not want to wait through the onboarding process to start using NoteLoom
​
​
Round 2
Improvements- Prototype v.2
After identifying pain points from testing, the team made the following improvements for the second version of our prototype in preparation for our next round of testing.
​
Improvements:
​
-
Option to skip onboarding
-
Modal menu that addresses competing navigation
-
Improved autosave visibility​
-
Separating the most commonly used AI-powered features from a drop-down menu to standalone buttons for better visibility
​
Usability Testing
Results
Participants followed the same usability test for round 2.
Pain Points:
​
-
The title section in notes needs a distinguishing element - Users were confused about their ability to edit the title entry field
​
-
Ability to view flashcards in different formats - Users specified a desire to interact with flashcards outside of notes and include bulleted information
​
-
Ability to edit AI-generated summaries and flashcards - Users wanted more control over AI-generated content. Knowing AI output is subject to error, they want the ability to edit potential mistakes.
Final Protoype
Improvements - Prototype v.3
Following round 2 testing, the following improvements were made.
​
Improvements:
​
-
A hint component was added next to the title field in note creation to improve discoverability
​
-
Flashcards could now be accessed and viewed through multiple navigation paths
​
-
Bulleted lists were added to AI-generated summaries for improved organization
​
​
​
System Usability Survey (SUS) Results
For each prototype particpants were given a 10-question SUS to complete.
​
Given the time constraints of the project, we were unable to maintain 5 total participants from start to finish. As a result, 2 of the 3 surveys had just 3 respondents. Nonetheless, the surveys provided valuable insights into prototype usability.
Prototype 1
​
Prototype 2
Prototype 3
AI Integration
How we Implemented AI
Throughout the project, AI was directed to be used in a limited capacity and treated as a partner. For us, AI integration was a welcome addition.
​
Examples:
​
-
Assist with synthesizing qualitative data
-
Ideate features based on user insights (in addition to user contributions)
-
Generate medium to high fidelity initial UI for prototypes (from here, we can make adjustments)
​
​
What We Did Not Do
Although AI can be a very useful tool, it has it's short comings and designers should be careful with overreliance.
​
Examples:
​
-
Do not take AI responses at face value; always check their work
-
AI should be used as a starting point if needed
-
If you cannot do what you're asking the AI to do, don't do it (this mitigates overlooking mistakes)
-
Look at all AI usage as ideation instead of solutions. AI doesn't drive solutions; designers do.
-
Context is key. Adequate prompting leads to a more informed AI output
​
​