menu
WHAT IS OVERLEAF?
WHAT IS OVERLEAF?
WHAT IS OVERLEAF?
Overleaf is a browser-based LaTeX (code) editor for writing academic and technical documents online.
Overleaf is a browser-based LaTeX (code) editor for writing academic and technical documents online.
Overleaf is a browser-based LaTeX (code) editor for writing academic and technical documents online.
Overleaf is a browser-based LaTeX (code) editor for writing academic and technical documents online.
Design Process
Design Process
Design Process
Design Process
Jul 2025 - Sep 2025
Jul 2025 - Sep 2025
Jul 2025 - Sep 2025
Jul 2025 - Sep 2025
User Research
User Research
User Research
User Research
User Flow
User Flow
User Flow
User Flow
Wireframing
Wireframing
Wireframing
Wireframing
Prototyping & Iteration
Prototyping & Iteration
Prototyping & Iteration
Prototyping & Iteration
User Testing
User Testing
User Testing
User Testing
Squad
Squad
Squad
Squad
Hajeong Hwang
Hajeong Hwang
Hajeong Hwang
Hajeong Hwang
UX Designer, Researcher
UX Designer, Researcher
UX Designer, Researcher
UX Designer, Researcher
Lori Cai
Lori Cai
Lori Cai
Lori Cai
UX Designer, Researcher
UX Designer, Researcher
UX Designer, Researcher
UX Designer, Researcher
Maham Khawar
Maham Khawar
Maham Khawar
Maham Khawar
UX Researcher
UX Researcher
UX Researcher
UX Researcher
PROBLEM
PROBLEM
PROBLEM
PROBLEM
Poor differentiation between generative and highlight-level AI.
Poor differentiation between generative and highlight-level AI.
Poor differentiation between generative and highlight-level AI.
Poor differentiation between generative and highlight-level AI.
Scattered AI entry points make navigation difficult and the robot button’s AI feature is visually cluttered.
Scattered AI entry points make navigation difficult and the robot button’s AI feature is visually cluttered.
Scattered AI entry points make navigation difficult and the robot button’s AI feature is visually cluttered.
Scattered AI entry points make navigation difficult and the robot button’s AI feature is visually cluttered.
FEATURE BACKGROUND
FEATURE BACKGROUND
FEATURE BACKGROUND
FEATURE BACKGROUND
AI features that generate new content, including title, abstract, keyword, and equation generators
AI features that generate new content, including title, abstract, keyword, and equation generators
AI features that generate new content, including title, abstract, keyword, and equation generators
AI features that generate new content, including title, abstract, keyword, and equation generators
AI feature for particular sentence, that users must highlight editor to access. Includes paraphrase, translate, change style, split / join, summarize, explain
AI feature for particular sentence, that users must highlight editor to access. Includes paraphrase, translate, change style, split / join, summarize, explain
AI feature for particular sentence, that users must highlight editor to access. Includes paraphrase, translate, change style, split / join, summarize, explain
AI feature for particular sentence, that users must highlight editor to access. Includes paraphrase, translate, change style, split / join, summarize, explain
Generate Tools
Generate Tools
Generate Tools
Generate Tools
Highlight Level AI
Highlight Level AI
Highlight Level AI
Highlight Level AI
AI feature can be grouped into two categories
AI feature can be grouped into two categories
AI feature can be grouped into two categories
AI feature can be grouped into two categories
DESIGN PROBLEM
DESIGN PROBLEM
DESIGN PROBLEM
DESIGN PROBLEM
Scattered AI entry points make navigation difficult, revealing the opportunity to consolidate these features into a single space
Scattered AI entry points make navigation difficult, revealing the opportunity to consolidate these features into a single space
Scattered AI entry points make navigation difficult, revealing the opportunity to consolidate these features into a single space
Scattered AI entry points make navigation difficult, revealing the opportunity to consolidate these features into a single space
Poor differentiation between generative and highlight-level AI, making it hard to tell which features are AI
Poor differentiation between generative and highlight-level AI, making it hard to tell which features are AI
Poor differentiation between generative and highlight-level AI, making it hard to tell which features are AI
Poor differentiation between generative and highlight-level AI, making it hard to tell which features are AI
The AI features in the robot button’s submenu are visually cluttered, making it difficult for users to distinguish them from other AI options
The AI features in the robot button’s submenu are visually cluttered, making it difficult for users to distinguish them from other AI options
The AI features in the robot button’s submenu are visually cluttered, making it difficult for users to distinguish them from other AI options
The AI features in the robot button’s submenu are visually cluttered, making it difficult for users to distinguish them from other AI options
GOAL
GOAL
GOAL
GOAL
Provide users with more glanceable and accessible access to AI features.
Provide users with more glanceable and accessible access to AI features.
Provide users with more glanceable and accessible access to AI features.
Provide users with more glanceable and accessible access to AI features.
Define User Needs
Define User Needs
Define User Needs
Define User Needs
Research Insight
Research Insight
Research Insight
Research Insight
Users found AI entry points scattered and visually inconsistent, which made navigation confusing and the robot button’s submenu feel redundant. They also had difficulty distinguishing between generative and highlight-level AI, noting that the interface did not clearly signal mode changes when text was highlighted.
Users found AI entry points scattered and visually inconsistent, which made navigation confusing and the robot button’s submenu feel redundant. They also had difficulty distinguishing between generative and highlight-level AI, noting that the interface did not clearly signal mode changes when text was highlighted.
Users found AI entry points scattered and visually inconsistent, which made navigation confusing and the robot button’s submenu feel redundant. They also had difficulty distinguishing between generative and highlight-level AI, noting that the interface did not clearly signal mode changes when text was highlighted.
Users found AI entry points scattered and visually inconsistent, which made navigation confusing and the robot button’s submenu feel redundant. They also had difficulty distinguishing between generative and highlight-level AI, noting that the interface did not clearly signal mode changes when text was highlighted.
USER INTERVIEW
USER INTERVIEW
USER INTERVIEW
USER INTERVIEW
DESIGN APPROACH
DESIGN APPROACH
DESIGN APPROACH
DESIGN APPROACH
1. Clearly separate Generative and Highlight-level AI buttons.
1. Clearly separate Generative and Highlight-level AI buttons.
1. Clearly separate Generative and Highlight-level AI buttons.
1. Clearly separate Generative and Highlight-level AI buttons.
2. Improve visibility by introducing a larger, centralized AI panel that consolidates all AI actions in one predictable space.
2. Improve visibility by introducing a larger, centralized AI panel that consolidates all AI actions in one predictable space.
2. Improve visibility by introducing a larger, centralized AI panel that consolidates all AI actions in one predictable space.
2. Improve visibility by introducing a larger, centralized AI panel that consolidates all AI actions in one predictable space.
3. Use the Robot button as a unified entry point, allowing users to choose between Generative AI and Highlight AI within a single flow.
3. Use the Robot button as a unified entry point, allowing users to choose between Generative AI and Highlight AI within a single flow.
3. Use the Robot button as a unified entry point, allowing users to choose between Generative AI and Highlight AI within a single flow.
3. Use the Robot button as a unified entry point, allowing users to choose between Generative AI and Highlight AI within a single flow.
4. Allow users to switch between Generative - Highlight AI using switch.
4. Allow users to switch between Generative - Highlight AI using switch.
4. Allow users to switch between Generative - Highlight AI using switch.
4. Allow users to switch between Generative - Highlight AI using switch.
FINAL DESIGN 1
FINAL DESIGN 1
FINAL DESIGN 1
FINAL DESIGN 1
Separated document and highlight level AI through larger panel
Separated document and highlight level AI through larger panel
Separated document and highlight level AI through larger panel
Separated document and highlight level AI through larger panel
I separated generative and highlight-level AI into a larger panel, with each button placed at the top-right of the panel. Generative AI mode is set as the default, allowing users to switch to highlight-level AI when needed.
I separated generative and highlight-level AI into a larger panel, with each button placed at the top-right of the panel. Generative AI mode is set as the default, allowing users to switch to highlight-level AI when needed.
I separated generative and highlight-level AI into a larger panel, with each button placed at the top-right of the panel. Generative AI mode is set as the default, allowing users to switch to highlight-level AI when needed.
I separated generative and highlight-level AI into a larger panel, with each button placed at the top-right of the panel. Generative AI mode is set as the default, allowing users to switch to highlight-level AI when needed.
FINAL DESIGN 2
FINAL DESIGN 2
FINAL DESIGN 2
FINAL DESIGN 2
Centralized Controls for AI Workflow
Centralized Controls for AI Workflow
Centralized Controls for AI Workflow
Centralized Controls for AI Workflow
The robot button lets users choose between Generative AI and the AI Editor, reducing confusion caused by multiple features being mapped to a single button.
The robot button lets users choose between Generative AI and the AI Editor, reducing confusion caused by multiple features being mapped to a single button.
The robot button lets users choose between Generative AI and the AI Editor, reducing confusion caused by multiple features being mapped to a single button.
The robot button lets users choose between Generative AI and the AI Editor, reducing confusion caused by multiple features being mapped to a single button.
FINAL DESIGN 3
FINAL DESIGN 3
FINAL DESIGN 3
FINAL DESIGN 3
Switch directly between AI modes using toggle
Switch directly between AI modes using toggle
Switch directly between AI modes using toggle
Switch directly between AI modes using toggle
Through this unified navigation, users can access AI, Recompile, and team collaboration, and directly switch between two AI modes.
Through this unified navigation, users can access AI, Recompile, and team collaboration, and directly switch between two AI modes.
Through this unified navigation, users can access AI, Recompile, and team collaboration, and directly switch between two AI modes.
Through this unified navigation, users can access AI, Recompile, and team collaboration, and directly switch between two AI modes.
FINAL DEMO
FINAL DEMO
FINAL DEMO
FINAL DEMO
Bringing every element together into a unified flow
Bringing every element together into a unified flow
Bringing every element together into a unified flow
Bringing every element together into a unified flow
ITERATION
ITERATION
ITERATION
ITERATION
Going back to the stage before
finalizing the design…
Going back to the stage before
finalizing the design…
ITERATION 2
ITERATION 2
ITERATION 2
ITERATION 2
Replaced the UI with a
dark-mode color theme
Replaced the UI with a
dark-mode color theme
Replaced the UI with a
dark-mode color theme
Replaced the UI with a
dark-mode color theme
I switched the overall UI to dark mode to reduce eye strain and to visually distinguish the panel as the dedicated space for AI features.
I switched the overall UI to dark mode to reduce eye strain and to visually distinguish the panel as the dedicated space for AI features.
I switched the overall UI to dark mode to reduce eye strain and to visually distinguish the panel as the dedicated space for AI features.
I switched the overall UI to dark mode to reduce eye strain and to visually distinguish the panel as the dedicated space for AI features.
↓
↓
↓
↓
DESIGN SYSTEM
DESIGN SYSTEM
DESIGN SYSTEM
DESIGN SYSTEM
Primary
Primary
Primary
Primary
Secondary
Secondary
Secondary
Secondary
Action
Action
Action
Action
Usage Proportions
Usage Proportions
Usage Proportions
Usage Proportions
Primary - #000000
Secondary - #1A222C
Action - #3E9B4B
Primary - #000000
Secondary - #1A222C
Action - #3E9B4B
Primary - #000000
Secondary - #1A222C
Action - #3E9B4B
Primary - #000000
Secondary - #1A222C
Action - #3E9B4B
USER TESTING
USER TESTING
USER TESTING
USER TESTING
I validated key design decisions through internal user testing, supported by clear internal testimonials highlighting improved usability
I validated key design decisions through internal user testing, supported by clear internal testimonials highlighting improved usability
I validated key design decisions through internal user testing, supported by clear internal testimonials highlighting improved usability
I validated key design decisions through internal user testing, supported by clear internal testimonials highlighting improved usability
New Tab
New Tab
New Tab
New Tab
Ask TeXGPT for help with anything
Ask TeXGPT for help with anything
Ask TeXGPT for help with anything
Ask TeXGPT for help with anything
Customized
Customized
Customized
Customized
ChatGPT-5-thinking
ChatGPT-5-thinking
ChatGPT-5-thinking
ChatGPT-5-thinking
Error Decoder
Error Decoder
Error Decoder
Error Decoder
01 PDF Rendering Error
01 PDF Rendering Error
01 PDF Rendering Error
01 PDF Rendering Error
This compile didn't produce a PDF. This can happen if:
There is an unrecoverable LaTeX error. If there are LaTeX errors shown below or in the raw logs, please try to fix them and compile again.
This compile didn't produce a PDF. This can happen if:
There is an unrecoverable LaTeX error. If there are LaTeX errors shown below or in the raw logs, please try to fix them and compile again.
This compile didn't produce a PDF. This can happen if:
There is an unrecoverable LaTeX error. If there are LaTeX errors shown below or in the raw logs, please try to fix them and compile again.
This compile didn't produce a PDF. This can happen if:
There is an unrecoverable LaTeX error. If there are LaTeX errors shown below or in the raw logs, please try to fix them and compile again.
Suggest Fix:
Suggest Fix:
Suggest Fix:
Suggest Fix:
Regenerate
Regenerate
Regenerate
Regenerate
Accept
Accept
Accept
Accept
l.75 \cite{
cgal:lp-gi-20a-condensed}
You're in trouble here. Try typing to proceed. . If that doesn't work, type X to quit.
l.75 \cite{
cgal:lp-gi-20a-condensed}
You're in trouble here. Try typing to proceed. . If that doesn't work, type X to quit.
l.75 \cite{
cgal:lp-gi-20a-condensed}
You're in trouble here. Try typing to proceed. . If that doesn't work, type X to quit.
l.75 \cite{
cgal:lp-gi-20a-condensed}
You're in trouble here. Try typing to proceed. . If that doesn't work, type X to quit.
02 Undefined Control Sequence Detected
02 Undefined Control Sequence Detected
02 Undefined Control Sequence Detected
02 Undefined Control Sequence Detected
! LaTeX found a command it does not recognize.
! LaTeX found a command it does not recognize.
! LaTeX found a command it does not recognize.
! LaTeX found a command it does not recognize.
Suggest Fix:
Suggest Fix:
Suggest Fix:
Suggest Fix:
Regenerate
Regenerate
Regenerate
Regenerate
Accept
Accept
Accept
Accept
Fix malformed \cite{} command and remove unexpected tokens.
Fix malformed \cite{} command and remove unexpected tokens.
Fix malformed \cite{} command and remove unexpected tokens.
Fix malformed \cite{} command and remove unexpected tokens.
03 Missing Package Error
03 Missing Package Error
03 Missing Package Error
03 Missing Package Error
LaTeX cannot continue because a required package is not loaded.
LaTeX cannot continue because a required package is not loaded.
LaTeX cannot continue because a required package is not loaded.
LaTeX cannot continue because a required package is not loaded.
Suggest Fix:
Suggest Fix:
Suggest Fix:
Suggest Fix:
Regenerate
Regenerate
Regenerate
Regenerate
Accept
Accept
Accept
Accept
Add the required \usepackage{} line or correct the package name, then recompile.
Add the required \usepackage{} line or correct the package name, then recompile.
Add the required \usepackage{} line or correct the package name, then recompile.
Add the required \usepackage{} line or correct the package name, then recompile.
AI Editor
AI Editor
AI Editor
AI Editor
Recompile
Recompile
Recompile
Recompile
Team
Team
Team
Team
% Useful packages
\usepackage{amsmath}
\usepackage{graphics}
\usepackage[colorlinks=true, allcolors=blue]{hyperref}
% Useful packages
\usepackage{amsmath}
\usepackage{graphics}
\usepackage[colorlinks=true, allcolors=blue]{hyperref}
% Useful packages
\usepackage{amsmath}
\usepackage{graphics}
\usepackage[colorlinks=true, allcolors=blue]{hyperref}
% Useful packages
\usepackage{amsmath}
\usepackage{graphics}
\usepackage[colorlinks=true, allcolors=blue]{hyperref}
21
21
21
21
21
21
21
21
REFLECTION
REFLECTION
REFLECTION
REFLECTION
Looking Back…
Looking Back…
Looking Back…
Looking Back…
Working on the Overleaf redesign pushed me to rethink how AI fits into complex academic writing workflows. I realized that users weren’t overwhelmed by AI itself, but by fragmented entry points that increased cognitive load. By restructuring AI interactions around document-level and highlight-level tasks, I focused on reducing friction and aligning AI with real writing behaviors. This project strengthened my approach to designing AI tools that prioritize clarity, restraint, and sustained focus over feature expansion.
Working on the Overleaf redesign pushed me to rethink how AI fits into complex academic writing workflows. I realized that users weren’t overwhelmed by AI itself, but by fragmented entry points that increased cognitive load. By restructuring AI interactions around document-level and highlight-level tasks, I focused on reducing friction and aligning AI with real writing behaviors. This project strengthened my approach to designing AI tools that prioritize clarity, restraint, and sustained focus over feature expansion.
Working on the Overleaf redesign pushed me to rethink how AI fits into complex academic writing workflows. I realized that users weren’t overwhelmed by AI itself, but by fragmented entry points that increased cognitive load. By restructuring AI interactions around document-level and highlight-level tasks, I focused on reducing friction and aligning AI with real writing behaviors. This project strengthened my approach to designing AI tools that prioritize clarity, restraint, and sustained focus over feature expansion.
Working on the Overleaf redesign pushed me to rethink how AI fits into complex academic writing workflows. I realized that users weren’t overwhelmed by AI itself, but by fragmented entry points that increased cognitive load. By restructuring AI interactions around document-level and highlight-level tasks, I focused on reducing friction and aligning AI with real writing behaviors. This project strengthened my approach to designing AI tools that prioritize clarity, restraint, and sustained focus over feature expansion.
