Goodnotes
Goodnotes
Goodnotes
Enhancing Learning with AI-Powered Analyses
Role
Contract Product Designer
Timeline
Jan 2025 - Mar 2025
Team
1 PM, 2 Designers, 5 Developers
The Client
Goodnotes is a leading digital note taking platform used by millions of people worldwide. They also became the world's first AI-Powered digital paper company in 2023 after the launch of Goodnotes 6.
The Client
Goodnotes is a leading digital note taking platform used by millions of people worldwide. They also became the world's first AI-Powered digital paper company in 2023 after the launch of Goodnotes 6.
The Client
Goodnotes is a leading digital note taking platform used by millions of people worldwide. They also became the world's first AI-Powered digital paper company in 2023 after the launch of Goodnotes 6.
Our Task
We created a proof-of-concept document analysis and outline generation application to test innovative future features in Goodnotes.
Our Task
We created a proof-of-concept document analysis and outline generation application to test innovative future features in Goodnotes.
Our Task
We created a proof-of-concept document analysis and outline generation application to test innovative future features in Goodnotes.
What I Did
As the lead UX designer, I implemented industry-standard AI patterns through chatbot and multimodal analysis features. By leveraging user research, client feedback, and best practices, I achieved a 95% satisfaction rate in usability testing.
What I Did
As the lead UX designer, I implemented industry-standard AI patterns through chatbot and multimodal analysis features. By leveraging user research, client feedback, and best practices, I achieved a 95% satisfaction rate in usability testing.
What I Did
As the lead UX designer, I implemented industry-standard AI patterns through chatbot and multimodal analysis features. By leveraging user research, client feedback, and best practices, I achieved a 95% satisfaction rate in usability testing.
RESEARCH
How can we leverage AI tools to enhance the academic note-taking experience for students?
Primarily used for academic note-taking and studying, our target audience was predominately college students and everyday notetakers. To combine our client's needs with user needs, I analyzed 45 survey responses and 8 user-interviews to understand typical user habits for studying, organizing notes, and and their perspectives toward adopting new AI tools. From this research, I distilled the following 3 main findings:
Current document analysis and AI-powered note tools have been gaining popularity due to the convenience they offer users
We explored various document analysis tools from NotebookLM to Notion to understand the industry UX-standards of these types of applications and what features already exist. Our key findings were that our application should have an easy upload process, simple analysis interface, and expand on existing AI-features for our user’s specific use cases such as reviewing lecture notes.
RESEARCH
How can we leverage AI tools to enhance the academic note-taking experience for students?
Primarily used for academic note-taking and studying, our target audience was predominately college students and everyday notetakers. To combine our client's needs with user needs, I analyzed 45 survey responses and 8 user-interviews to understand typical user habits for studying, organizing notes, and and their perspectives toward adopting new AI tools. From this research, I distilled the following 3 main findings:
Current document analysis and AI-powered note tools have been gaining popularity due to the convenience they offer users
We explored various document analysis tools from NotebookLM to Notion to understand the industry UX-standards of these types of applications and what features already exist. Our key findings were that our application should have an easy upload process, simple analysis interface, and expand on existing AI-features for our user’s specific use cases such as reviewing lecture notes.
RESEARCH
How can we leverage AI tools to enhance the academic note-taking experience for students?
Primarily used for academic note-taking and studying, our target audience was predominately college students and everyday notetakers. To combine our client's needs with user needs, I analyzed 45 survey responses and 8 user-interviews to understand typical user habits for studying, organizing notes, and and their perspectives toward adopting new AI tools. From this research, I distilled the following 3 main findings:
Current document analysis and AI-powered note tools have been gaining popularity due to the convenience they offer users
We explored various document analysis tools from NotebookLM to Notion to understand the industry UX-standards of these types of applications and what features already exist. Our key findings were that our application should have an easy upload process, simple analysis interface, and expand on existing AI-features for our user’s specific use cases such as reviewing lecture notes.
DEFINE
Scope and structure
The most important features for our MVP were document classification and outline generation. Additional features identified through our research were organized in a feature matrix based on effort and user impact. I expanded our features like the chat-bot by ideating on context aware chat suggestions and section-based queries to increase personalization and customization.
After user's upload a document and view the analysis, user's should be able to interact with the outline, chatbot, and regenerate the analysis using a different model. I mapped a user flow detailing the actions, decisions, and screens a user might see.
DEFINE
Scope and structure
The most important features for our MVP were document classification and outline generation. Additional features identified through our research were organized in a feature matrix based on effort and user impact. I expanded our features like the chat-bot by ideating on context aware chat suggestions and section-based queries to increase personalization and customization.
After user's upload a document and view the analysis, user's should be able to interact with the outline, chatbot, and regenerate the analysis using a different model. I mapped a user flow detailing the actions, decisions, and screens a user might see.
DEFINE
Scope and structure
The most important features for our MVP were document classification and outline generation. Additional features identified through our research were organized in a feature matrix based on effort and user impact. I expanded our features like the chat-bot by ideating on context aware chat suggestions and section-based queries to increase personalization and customization.
After user's upload a document and view the analysis, user's should be able to interact with the outline, chatbot, and regenerate the analysis using a different model. I mapped a user flow detailing the actions, decisions, and screens a user might see.
IDEATE
Iterations
For the visual design, I first attempted to follow a similar layout and color palette as the current Goodnotes platform. However, after reviewing more document analysis platforms, I realized a more minimal color palette more closely followed current delivered applications.
Tab Configurations
For the analysis and chat content, we moved forward with the two-tab option for quick access to the document type tags and to better segment information.
Analysis Tab
While previously having the tags in the top bar, they were moved to the side bar for better space management and to group them more closely with other analysis outputs like the outline and summary.
Multi-Model Selector
Our final version includes a "Re-Analyze" button and a "Select All" option for easy customization while ensuring the page only reloads when users are finished with their selection.
Chat Selector
The document type tag was moved to be included in the chat box for better scalability when there are longer tag names and if the user selects a specific section they want to query.
IDEATE
Iterations
For the visual design, I first attempted to follow a similar layout and color palette as the current Goodnotes platform. However, after reviewing more document analysis platforms, I realized a more minimal color palette more closely followed current delivered applications.
Tab Configurations
For the analysis and chat content, we moved forward with the two-tab option for quick access to the document type tags and to better segment information.
Analysis Tab
While previously having the tags in the top bar, they were moved to the side bar for better space management and to group them more closely with other analysis outputs like the outline and summary.
Multi-Model Selector
Our final version includes a "Re-Analyze" button and a "Select All" option for easy customization while ensuring the page only reloads when users are finished with their selection.
Chat Selector
The document type tag was moved to be included in the chat box for better scalability when there are longer tag names and if the user selects a specific section they want to query.
IDEATE
Iterations
For the visual design, I first attempted to follow a similar layout and color palette as the current Goodnotes platform. However, after reviewing more document analysis platforms, I realized a more minimal color palette more closely followed current delivered applications.
Tab Configurations
For the analysis and chat content, we moved forward with the two-tab option for quick access to the document type tags and to better segment information.
Analysis Tab
While previously having the tags in the top bar, they were moved to the side bar for better space management and to group them more closely with other analysis outputs like the outline and summary.
Multi-Model Selector
Our final version includes a "Re-Analyze" button and a "Select All" option for easy customization while ensuring the page only reloads when users are finished with their selection.
Chat Selector
The document type tag was moved to be included in the chat box for better scalability when there are longer tag names and if the user selects a specific section they want to query.
DESIGN SYSTEM
Creating a unique identity for proof-of-concept
We took inspiration from Goodnotes’ existing style guides and adapted the logo, typography, colors, and certain components to create a new but recognizable design. We used Goodnote’s main blue color to emphasize buttons, and utilized their secondary colors for other standout elements like the document tags. We also ensured accessibility with proper color contrast and legible typography while integrating smooth transitions and animations for a seamless user experience.
Micro-Interactions
The micro-interactions in our prototype aimed to provide visual feedback to users and introduce familiarity with the existing Goodnotes branding. We did this through various loading animations, skeleton screens, and confirmation toasts.
DESIGN SYSTEM
Creating a unique identity for proof-of-concept
We took inspiration from Goodnotes’ existing style guides and adapted the logo, typography, colors, and certain components to create a new but recognizable design. We used Goodnote’s main blue color to emphasize buttons, and utilized their secondary colors for other standout elements like the document tags. We also ensured accessibility with proper color contrast and legible typography while integrating smooth transitions and animations for a seamless user experience.
Micro-Interactions
The micro-interactions in our prototype aimed to provide visual feedback to users and introduce familiarity with the existing Goodnotes branding. We did this through various loading animations, skeleton screens, and confirmation toasts.
DESIGN SYSTEM
Creating a unique identity for proof-of-concept
We took inspiration from Goodnotes’ existing style guides and adapted the logo, typography, colors, and certain components to create a new but recognizable design. We used Goodnote’s main blue color to emphasize buttons, and utilized their secondary colors for other standout elements like the document tags. We also ensured accessibility with proper color contrast and legible typography while integrating smooth transitions and animations for a seamless user experience.
Micro-Interactions
The micro-interactions in our prototype aimed to provide visual feedback to users and introduce familiarity with the existing Goodnotes branding. We did this through various loading animations, skeleton screens, and confirmation toasts.
FINAL PROTOTYPE
Upload Document
The landing page allows users to upload new PDFs to be analyzed and to view previous saved analyses. Users can also add their own custom tags to customize the way they organize their notes.
Outline Generation
The outline visually showcases headings/subheadings from the uploaded document and dynamically change based on the user's AI-model selection.
Document Chat
The document chat allows users to ask questions and receive answers based on the document’s content. They can also choose preset prompts based on the common use cases, encouraging quick decisions.
Multi-Model Comparison
The multi-model comparison view allows users to analyze and compare insights from multiple AI models side by side, enabling a deeper understanding of the content through multiple interpretations, summaries, and responses.
FINAL PROTOTYPE
Upload Document
The landing page allows users to upload new PDFs to be analyzed and to view previous saved analyses. Users can also add their own custom tags to customize the way they organize their notes.
Outline Generation
The outline visually showcases headings/subheadings from the uploaded document and dynamically change based on the user's AI-model selection.
Document Chat
The document chat allows users to ask questions and receive answers based on the document’s content. They can also choose preset prompts based on the common use cases, encouraging quick decisions.
Multi-Model Comparison
The multi-model comparison view allows users to analyze and compare insights from multiple AI models side by side, enabling a deeper understanding of the content through multiple interpretations, summaries, and responses.
FINAL PROTOTYPE
Upload Document
The landing page allows users to upload new PDFs to be analyzed and to view previous saved analyses. Users can also add their own custom tags to customize the way they organize their notes.
Outline Generation
The outline visually showcases headings/subheadings from the uploaded document and dynamically change based on the user's AI-model selection.
Document Chat
The document chat allows users to ask questions and receive answers based on the document’s content. They can also choose preset prompts based on the common use cases, encouraging quick decisions.
Multi-Model Comparison
The multi-model comparison view allows users to analyze and compare insights from multiple AI models side by side, enabling a deeper understanding of the content through multiple interpretations, summaries, and responses.
REFLECTION
Challenges
Determining the visual brand
One challenge in this project was balancing creating an original design while maintaining the visual branding of Goodnotes. As a designer, I found ways to incorporate new micro interactions, colors, and layouts while still recognizing the original branding of Goodnotes.
Connecting User Research with Client Needs
It was hard to find a balance of new findings from our research, while also connecting and creating a user flow that our client was satisfied with. Since this project was mostly AI/ML and coding heavy, the purpose of a design process was briefly ambiguous in the beginning, but I made sure that there was a way to connect our cross-functional team together to create something extraordinary.
REFLECTION
Challenges
Determining the visual brand
One challenge in this project was balancing creating an original design while maintaining the visual branding of Goodnotes. As a designer, I found ways to incorporate new micro interactions, colors, and layouts while still recognizing the original branding of Goodnotes.
Connecting User Research with Client Needs
It was hard to find a balance of new findings from our research, while also connecting and creating a user flow that our client was satisfied with. Since this project was mostly AI/ML and coding heavy, the purpose of a design process was briefly ambiguous in the beginning, but I made sure that there was a way to connect our cross-functional team together to create something extraordinary.
REFLECTION
Challenges
Determining the visual brand
One challenge in this project was balancing creating an original design while maintaining the visual branding of Goodnotes. As a designer, I found ways to incorporate new micro interactions, colors, and layouts while still recognizing the original branding of Goodnotes.
Connecting User Research with Client Needs
It was hard to find a balance of new findings from our research, while also connecting and creating a user flow that our client was satisfied with. Since this project was mostly AI/ML and coding heavy, the purpose of a design process was briefly ambiguous in the beginning, but I made sure that there was a way to connect our cross-functional team together to create something extraordinary.