NotetakingLM Case Study
How can students really leverage AI in note-taking?
Role
Product Designer
Full-stack Engineer
Duration
October 2024 - December 2024
Tool
Figma
Skills
UI/UX
User Research
Productivity Software
AI Interface
Personal Project
Project Overview
I propose the core UI & UX for a new context-based AI note-taking platform, StudySuite, that efficiently integrates Gemini API to organize, structure, and clean up notes that the user enters, ensuring a seamless studying experience for students.
In this personal design challenge, I am inspired by the rise of AI-enabled applications and the potential of these tools in supporting students like myself.
Problems
Efficiency
Students are using ChatGPT and Claude to study and learn, but they always have to copy from ChatGPT, and then to paste it into their notes. It's not efficient, nor would they learn anything properly through that process.
Students are using ChatGPT and Claude to study and learn, but they always have to switch between tabs, to copy from ChatGPT, and then to paste it into their notes. It's not efficient, nor would they learn anything properly through that process. It's time to fully embrace AI as a tool for studying and integrate them into note-taking programs.
Accessibility
To what extent can we visualize relationships between documents, images, videos, passages, phrases, and terms?
Is it possible to see how and where a source is referenced in a document? How detailed can we go with a user interface to allow context-based AI generation in specific parts of the note?
Structure
Notes are all over the place. Just hyperlinking documents to each other gets very messy.
We can already link a term, phrase, or paragraph in one document to another document in platforms like Word or Notion, but what happens when we have to create a hundred more of those links? How do we manage all of these relationships?
Editability
How do I combine both AI support and personal input efficiently?
When I generate text in my study guide with the LLM program, how can I use it as the template and edit on it straight away, instead of having to copy from the generated file/chat to another text box to change it?
Design Challenge
How might we create an intuitive solution that addresses the specific issues that students face while documenting class materials in an organized and efficient manner?
Students are using ChatGPT and Claude to study and learn, but they always have to switch between tabs, to copy from ChatGPT, and then to paste it into their notes. It's not efficient, nor would they learn anything properly through that process. It's time to fully embrace AI as a tool for studying and integrate them into note-taking programs.
Research
Interview
I conducted semi-structured interviews with 20 participants over 2 weeks. The participants were selected based on their familiarity with online study tools, including note-taking apps, flashcard systems, and collaborative learning platforms. Each interview lasted approximately 10 minutes, allowing for in-depth discussions about their experiences. Here are some common responses:
All-in-one Solution
“I really wish there was a single tool that could handle everything I need for studying. Right now, I’m juggling multiple apps for notes, tasks, and collaboration, and it’s overwhelming.”
All-in-one Solution
“I really wish there was a single tool that could handle everything I need for studying. Right now, I’m juggling multiple apps for notes, tasks, and collaboration, and it’s overwhelming.”
All-in-one Solution
“I really wish there was a single tool that could handle everything I need for studying. Right now, I’m juggling multiple apps for notes, tasks, and collaboration, and it’s overwhelming.”
The insights gathered from these user interviews will play a crucial role in shaping the development of the study suite app. By addressing the identified pain points and aligning with user needs, I can create a product that significantly enhances the online learning experience for students and educators alike.
User Persona
Name: Alex, the Ambitious Student
Age: 20
Occupation: College Student
Goals:
- Improve academic performance
- Efficiently manage study materials
- Understand complex concepts quickly
Pain Points:
- Difficulty in taking organized notes during lectures
- Time-consuming note-taking process
- Challenges in reviewing and understanding notes later
Needs:
- A user-friendly note-taking app that can help organize and structure notes effectively
- AI-powered tools to enhance note-taking and understanding
- A flexible platform that adapts to different learning styles
Persona variations & Scenarios:
1. Alex is studying for a Linear Algebra exam, and needs to understand how all of the concepts connect to each other (ex: how linear transformations relate to matrices, vector spaces, eigenvalues, eigenvectors, and systems of equations).
2. Alex is studying for an Twentieth Century Art History exam, and needs to learn how each of the artworks relate to each other and relate to the larger trends in art history. He also needs to have a clear understanding of art critics' writings in order to be able to quote them efficiently in his writing during the essay section of the test. Most importantly, he needs to perform visual analysis of each of the artworks similar to what the professor does in class.
3. Alex is writing a 2500-word essay for his Philosophy class. He is required to cite the sources that he uses in the correct format. Additionally, he needs to be able to understand all of the writings of the philosophers and generate a intricate dialogue that closely addresses each of the philosopher's writings.
Competitive Analysis
Based on the three criteria:
- Malleability of data
- Logical structuring of learned content
- Navigability of interface
I identified several existing industry-leading solutions and put them into three groups. Each of these group provide specific functions that address each of the criteria above. Analyzing their offerings and pros & cons provides insights that I can use to determine which feature to explore and add to this new platform when designing.
1. AI-Powered Conversational Agents
2. Note-taking Applications
3. AI-Assisted Research Platforms
Analysis Takeaways
From this series of comparisons, I decided on several features that can potentially be added to the Study Suite designed specifically for students
1. Word-level editing: allows for easy editing of generated data, speeding up studying process - seen in products like ChatGPT Canvas, or Cursor.
2. Flexible display formats: (ex: tables or nested pages) allows for efficient showcase of information - seen in Notion and Claude
2. Source management functionalities: allows for coherent note-taking & identifying information location - seen in NotebookLM
3. Graph-based View of Data Storage/Structure: allows for logical understanding - seen in products like Obsidian
The Solution
A word-level, AI-powered note-taking platform that utilizes graph connections to organize content that is designed for students to use while following lectures or class discussions and later while studying for exams.
It is designed to have a seamless, intuitive workflow, prioritizing efficiency, structure, and with features that strictly addresses the target user persona.
Lo-fi Designs
User Flows
I start off the actual design process with drawing out the possible screens while keeping in mind a general user journey for each of the main functions of the program. I use Figjam to keep track of this process, and come back to make changes to these user flows as I work on the wireframes and mockups later on.
Write Notes Flow
Source Management Flow
Graph-based Document Organization Flow
Wireframes
With a more structured idea of how the app should work, I then start drawing out the wireframes and layout of how the app interface should look. Here are some of them:
Lo-fi Wireframes
Result
With a more structured idea of how the app should work, I then start drawing out the wireframes and layout of how the app interface should look. Here are some of them:
Hi-fi Designs
Componentization
As I worked on the hi-fidelity mock-ups of the platform, I created multi-state components in Figma to ensure consistency and responsiveness across different screen sizes. These components included interactive elements, dynamic layouts, and streamlined navigation, providing a seamless and intuitive user experience.
I also added empty states and edge cases for the components to take into account all possible scenarios.
User Testing & Feedback
As part of the iterative design process, I meet up with students at Columbia University to discuss further about their workflow, and give them the demo to see if they can navigate through the screens. I start off with lower fidelity wireframes, and end up with final mockups that are presented to these students. This process proved to be very insightful, as I was able to identify many different points of emphasis according to the user's logic, helping me design intuitive and human-centric interfaces.
Lo-fi Wireframes
Wireframes
With a more structured idea of how the app should work, I then start drawing out the wireframes and layout of how the app interface should look. Here are some of them:
Final Frames
After 3 rounds of iteration and user testing & listening to user feedback, I came up with the finished MVP design for the program.
Final Features Highlight
Graph-based Approach to Note Taking
Integrating graph views with AI in a note-taking program enhances knowledge management by dynamically uncovering relationships, clustering related ideas, and enabling smarter search and retrieval.
AI augments the graph by analyzing patterns, suggesting connections, and reorganizing data based on context, making it easier to identify gaps, trends, and opportunities.
Multi-scope AI Editing
You can address individual words, phrases, or bigger sections of the text and chat with AI to modify those specific sections. This provides precise, context-aware revisions that enhance clarity, accuracy, and engagement in their writing. It streamlines the process of refining ideas, ensuring every word serves its intended purpose, and supports a more polished and effective academic output.
Source/File Centric Note-taking Approach
The program generates initial notes closely based on the source provided, which are then easily editable by the user.
The notes are generated using a RAG-augmented LLM, ensuring that the information is accurate and contextually relevant. This process enhances the quality and credibility of the generated note by leveraging verified data while maintaining coherence and natural language flow.
Supports Necessary File Types
Full Features Demo
Conclusion
Wrap-up
Through this project, I wanted to bring my UX skills to the test. I analyzed current products in the market, and identify the specific needs and pain points of students who are using these programs, in order to create and design a product that would provide the most optimal workflow for students who wants to take notes and genuinely learn the materials taught at school.
Key takeaways
- Integrated features from multiple tools into one cohesive platform
- Prioritized intuitive interface design for improved user focus
- Implemented AI-driven insights to personalize the learning experience
Product Design Skills
- Competitive analysis
- User needs assessment
- Feature prioritization
- AI integration in UX
Insights on LLMs & Study Programs
- LLMs can significantly enhance content understanding and retention
- Balancing AI assistance with active learning is crucial
- Privacy and data handling are key concerns in educational tech
- Customization is essential for accommodating diverse learning styles