Overleaf Redesign
Overleaf Redesign
Overleaf is a collaborative cloud-based LaTeX editor used by over 13 million researchers, students, and professors worldwide to write, edit, and publish scientific documents. This project was initiated as part of the University of Washington HCDE Design for Passion program (Summer 2025).
Overleaf is a collaborative cloud-based LaTeX editor used by over 13 million researchers, students, and professors worldwide to write, edit, and publish scientific documents. This project was initiated as part of the University of Washington HCDE Design for Passion program (Summer 2025).
Timeline
10 Weeks
(Summer 2025)
Team
65% ↑ User Satisfaction
68% ↑ Ease of Use
45% ↓ Task Completion
Hajeong Hwang (Lead UX Designer)
Lori Lei Cai (UX Designer)
Maham Khawar (UX Researcher)
Tools
Figma
Key Outcomes
Timeline
10 Weeks
(Summer 2025)
Team
65% ↑ User Satisfaction
68% ↑ Ease of Use
45% ↓ Task Completion
Hajeong Hwang (Lead UX Designer)
Lori Lei Cai (UX Designer)
Maham Khawar (UX Researcher)
Tools
Figma
Key Outcomes
Timeline
10 Weeks
(Summer 2025)
Team
65% ↑ User Satisfaction
68% ↑ Ease of Use
45% ↓ Task Completion
Hajeong Hwang (Lead UX Designer)
Lori Lei Cai (UX Designer)
Maham Khawar (UX Researcher)
Tools
Figma
Key Outcomes
Design Process
Design Process
Design Process
My Role
My Role
My Role
As the Lead UX Designer, I led the project from research to prototyping—conducting six user interviews, leading ideation on AI and collaboration features, and designing end-to-end flows in Figma.
As the Lead UX Designer, I led the project from research to prototyping—conducting six user interviews, leading ideation on AI and collaboration features, and designing end-to-end flows in Figma.
Context
Context
Context
LaTeX has been the standard for scientific publishing for over 40 years, powering millions of research papers, theses, and academic publications across STEM fields. Overleaf emerged as the leading collaborative platform, bringing LaTeX into the cloud era, but its rapid growth exposed critical gaps in user experience.
Our team chose to redesign Overleaf because:
We personally experienced frustration with scattered AI features during our own academic work
Overleaf had recently introduced AI capabilities but buried them across disconnected menus
Collaboration pain points were consistently mentioned in online communities and forums
The platform's large user base meant any improvement could have significant real-world impact
LaTeX has been the standard for scientific publishing for over 40 years, powering millions of research papers, theses, and academic publications across STEM fields. Overleaf emerged as the leading collaborative platform, bringing LaTeX into the cloud era, but its rapid growth exposed critical gaps in user experience.
Our team chose to redesign Overleaf because:
We personally experienced frustration with scattered AI features during our own academic work
Overleaf had recently introduced AI capabilities but buried them across disconnected menus
Collaboration pain points were consistently mentioned in online communities and forums
The platform's large user base meant any improvement could have significant real-world impact
LaTeX has been the standard for scientific publishing for over 40 years, powering millions of research papers, theses, and academic publications across STEM fields. Overleaf emerged as the leading collaborative platform, bringing LaTeX into the cloud era, but its rapid growth exposed critical gaps in user experience.
Our team chose to redesign Overleaf because:
We personally experienced frustration with scattered AI features during our own academic work
Overleaf had recently introduced AI capabilities but buried them across disconnected menus
Collaboration pain points were consistently mentioned in online communities and forums
The platform's large user base meant any improvement could have significant real-world impact
UXR
User Research - Interview
User Research - Interview
We conducted qualitative in-depth interviews with 6 interviewees. Given the limited time frame, we kept interviews relatively open-ended. Through the interviews, participants shared their screens and walked us through how they use the platform. During the interview, we focused on questions regarding the frequency of platform use, typical use cases, challenges with the platform, and comparisons with competitors.
We conducted qualitative in-depth interviews with 6 interviewees. Given the limited time frame, we kept interviews relatively open-ended. Through the interviews, participants shared their screens and walked us through how they use the platform. During the interview, we focused on questions regarding the frequency of platform use, typical use cases, challenges with the platform, and comparisons with competitors.
Research Goals:
1. Understand current pain points in collaborative LaTeX editing
1. Understand current pain points in collaborative LaTeX editing
2. Identify gaps in existing AI suggestion features
2. Identify gaps in existing AI suggestion features
3. Validate opportunity for improved workflow
3. Validate opportunity for improved workflow
User Research Findings
Findings from the User Interview
Findings from the User Interview
Scattered across multiple flows, making it hard to locate errors or the right suggestions
Scattered across multiple flows, making it hard to locate errors or the right suggestions
Scattered across multiple flows, making it hard to locate errors or the right suggestions
Needs more clarity on parts of documents which have been previously edited and who has ownership on different parts
Needs more clarity on parts of documents which have been previously edited and who has ownership on different parts
Needs more clarity on parts of documents which have been previously edited and who has ownership on different parts
Users wanted to plan personalized goals in detail, rather than conforming their goals into social norms
Current citation process is complex and monotonous, and users need to input manually
Current citation process is complex and monotonous, and users need to input manually
Design Question & Goal
The insights from the user research led us to think of the design question:
The insights from the user research led us to think of the design question:
The insights from the user research led us to think of the design question:
How might we design an improved interface that helps users write and edit their papers more easily using AI features?
How might we design an improved interface that helps users write and edit their papers more easily using AI features?
Problem
Design Problem
Design Problem
After completing user interviews and defining our design question, we decided to focus on addressing the issues within the suggestion and collaboration workflows.
After completing user interviews and defining our design question, we decided to focus on addressing the issues within the suggestion and collaboration workflows.
Current Overleaf Edit Screen
Current Overleaf Edit Screen
Current Overleaf Edit Screen
Current Overleaf AI Suggestion Navigation
Current Overleaf AI Suggestion Navigation
Autofix and Suggestion
AI suggestion button splits across, making it hard to locate errors or the right suggestions
Autofix and Suggestion
AI suggestion button splits across, making it hard to locate errors or the right suggestions
Autofix and Suggestion
AI suggestion button splits across, making it hard to locate errors or the right suggestions
Current Overleaf Collaboration Workflow
Current Overleaf Collaboration Workflow
Collaboration
Needs more clarity on parts of documents which have been previously edited and who has ownership on different parts
Collaboration
Needs more clarity on parts of documents which have been previously edited and who has ownership on different parts
Collaboration
Needs more clarity on parts of documents which have been previously edited and who has ownership on different parts
User Flow
Understanding the Current User Flow
Understanding the Current User Flow
Before working on low-fidelity design, we started from understanding the current Overleaf's user flow. The current suggestion flow is scattered into 4 feature, which makes users confusing. For the collaboration, users need to manually assign responsibilities through third party tools, and communicate via Latex text.
Before working on low-fidelity design, we started from understanding the current Overleaf's user flow. The current suggestion flow is scattered into 4 feature, which makes users confusing. For the collaboration, users need to manually assign responsibilities through third party tools, and communicate via Latex text.
Before working on low-fidelity design, we started from understanding the current Overleaf's user flow. The current suggestion flow is scattered into 4 feature, which makes users confusing. For the collaboration, users need to manually assign responsibilities through third party tools, and communicate via Latex text.
Envisioning the Expected User Flow
Envisioning the Expected User Flow
We've brainstormed new AI powered user flow for suggestion and collaboration workflow, and re-structured the information architecture to address the user pain points. Structuring expected user flow gave us deep understanding how we should improve the usability through our design.
We've brainstormed new AI powered user flow for suggestion and collaboration workflow, and re-structured the information architecture to address the user pain points. Structuring expected user flow gave us deep understanding how we should improve the usability through our design.
Redesign
Turning Insights into Action From User Flow to Design
Turning Insights into Action From User Flow to Design
1. AI Suggestion Feature
1. AI Suggestion Feature
We categorized AI suggestions into two types. The first includes minor grammar or code issues already handled by Overleaf, which we unified and streamlined for consistent display. The second involves more complex cases like writing improvements or advanced debugging, for which we redesigned the AI experience to make suggestions easier to discover, review, and apply.
We categorized AI suggestions into two types. The first includes minor grammar or code issues already handled by Overleaf, which we unified and streamlined for consistent display. The second involves more complex cases like writing improvements or advanced debugging, for which we redesigned the AI experience to make suggestions easier to discover, review, and apply.
Editing Suggestion Type #1
Color-coded Grammar/ Code Errors
Consistent Bug Check interactions
Editing Suggestion Type #1
Color-coded Grammar/ Code Errors
Consistent Bug Check interactions
Editing Suggestion Type #2
Contextual selection with smooth, targeted questioning or understanding
Editing Suggestion Type #2
Contextual selection with smooth, targeted questioning or understanding
We went a step further. While Overleaf already offered some AI features, they were separated from the main editing flow, requiring users to interrupt their work to access AI support.
We went a step further. While Overleaf already offered some AI features, they were separated from the main editing flow, requiring users to interrupt their work to access AI support.
While enhancing collaboration feature with task board, by showing exactly where each member is working, team can avoid conflicts.
While enhancing collaboration feature with task board, by showing exactly where each member is working, team can avoid conflicts.
We optimized the information architecture of AI suggestions,
making the process of receiving and adopting them more intuitive
We optimized the information architecture of AI suggestions, making the process of receiving and adopting them more intuitive
We connected previously scattered features to a unified editing-centered experience
We connected previously scattered features to a unified editing-centered experience
In our redesigned AI feature, we introduced a new left-side tab that allows users to easily access TexGPT, chat with it, and apply AI-generated suggestions seamlessly with a single click.
In our redesigned AI feature, we introduced a new left-side tab that allows users to easily access TexGPT, chat with it, and apply AI-generated suggestions seamlessly with a single click.
2. Collaboration Workflow
At the core of solving collaboration issues is our task board, which unifies conversations, comments, and real-time editing into one streamlined workflow. Collaborators can highlight sections and leave comments directly from the board. The board also lets users turn chats into tasks with one click. Each task shows its creator, related comments, and current status—processing, finished, or error. Once completed, users can check it off, and the update instantly syncs across the team and appears on the history page.
At the core of solving collaboration issues is our task board, which unifies conversations, comments, and real-time editing into one streamlined workflow. Collaborators can highlight sections and leave comments directly from the board. The board also lets users turn chats into tasks with one click. Each task shows its creator, related comments, and current status—processing, finished, or error. Once completed, users can check it off, and the update instantly syncs across the team and appears on the history page.
Task board/ Turn chat into task button
Task board/ Turn chat into task button
Chat converted into task, and added on task board
Chat converted into task, and added on task board
Reflection
Next Step & Feedbacks
Next Step & Feedbacks
Next Step & Feedbacks
If we had more time, we would improve the citation workflow as suggested by interviewees—not by manually inputting all citations as the current Overleaf does, but by integrating citation management tools into Overleaf.
If we had more time, we would improve the citation workflow as suggested by interviewees—not by manually inputting all citations as the current Overleaf does, but by integrating citation management tools into Overleaf.
If we had more time, we would improve the citation workflow as suggested by interviewees—not by manually inputting all citations as the current Overleaf does, but by integrating citation management tools into Overleaf.
After our presentation, a current Overleaf user suggested adding a feature that lets users control the degree of AI involvement when they are using a AI suggestion feature, which this approach gives users more flexibility and increases reliability by enabling them to know how much AI is incorporated.
After our presentation, a current Overleaf user suggested adding a feature that lets users control the degree of AI involvement when they are using a AI suggestion feature, which this approach gives users more flexibility and increases reliability by enabling them to know how much AI is incorporated.
After our presentation, a current Overleaf user suggested adding a feature that lets users control the degree of AI involvement when they are using a AI suggestion feature, which this approach gives users more flexibility and increases reliability by enabling them to know how much AI is incorporated.