Improved Mode Scanability by Replacing the Switch with a Toggle
I replaced the switch button with a toggle to give users a more immediate sense of switching between the two AI modes.
Before
After
UI/UX Design · 2025
Overleaf
Over summer of 2025, I redesigned Overleaf AI experience. The redesigned Overleaf consolidates scattered AI buttons, making the AI features more glanceable and accessible.
- Role
- UX Designer
- Timeframe
- Jul 2025 – Sep 2025
- Domain
- AI productivity tool
- Tools
- Figma
- Collaborators
- HCDE Master’s students
What is Overleaf?
A browser-based LaTeX editor for technical writing
Overleaf is a browser-based LaTeX (code) editor for academic and technical documents.
Similar to Google Docs, but instead of directly editing text, users make changes by writing code.
Feature Background
AI features can be grouped into two categories
Generate Level AI
AI features that generate new content, including title, abstract, keyword, and equation generators.
Highlight Level AI
AI feature for a particular sentence, that users must highlight to access. Includes paraphrase, translate, change style, split / join,summarize, explain.
Problem
Scattered AI entry points increased cognitive load and hindered discoverability
UX Issues
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.
The AI features in the robot button's submenu are visually cluttered, making it difficult for users to distinguish them from other AI options.
Design Question
How can we provide users with more glanceable and accessible access to AI features?
User research
Understood user needs through semi-structured interviews
“
AI entry points scattered and visually inconsistent, which made navigation confusing and the robot button's submenu feel redundant.
Min, M.S., Applied math
“
It is difficult understand how to use AI features due to fragmented entry points and unclear mode signaling.
Kim, Ph.D., Statistics
Design Solution
Provide AI features with clear discoverability and mode transitions
| Approach | Concept | Pros | Cons |
|---|---|---|---|
| 1 | Dedicated panel for AI features | Consolidates AI actions in one place and makes switching between Generative and Highlight modes glanceable. | Adds a new surface that can compete with the editor for attention and screen space. |
| 2 | Consolidate AI entry points | Reuses the familiar Robot button as a single entry point so both AI modes live in one flow. | Mode choice can feel nested inside the button, which may slow discovery for first-time users. |
Approach 1 — Switch Between Two AI Modes
Introduced a centralized AI panel to consolidate AI interactions
Iterations — Switch Between Two AI Modes
Refined color usage and components for visual consistency
Before finalizing the design, I refined the color usage and components to improve visual consistency and reduce eye strain, making the panel more intuitive to use.
Built a Custom Toggle for Switching Between Generative and Highlight-Level AI
I designed a toggle for generative and highlight-level AI, using mode-specific icons to improve glanceability and quick recognition.
Before
After
Reduced Visual Fatigue Through Color Contrast Refinement
I refined the UI to reduce eye strain for users, as Overleaf is typically used for long, extended work sessions. To improve visual comfort, I reduced the contrast between the background and text.
Before
After
Final Experience — Switch Between Two AI Modes
Use AI features in a larger panel, with mode transition
For the final deliverable, I separated generative and highlight-level AI into a larger panel, with each button placed in the top-right corner. Generative AI mode is set as the default, and the toggle allows users to switch to highlight-level AI mode.
AI Generator
AI Editor
On the right top of the panel, users can navigate diverse AI features and directly switch between two AI modes using the toggle.
Approach 2 — Consolidated Scattered AI Entry Points
Use the Robot button as a unified entry point for Generative AI and Highlight AI
Added a keyboard shortcut to ensure accessibility
I added keyboard shortcuts to the robot button's submenu to improve accessibility for users navigating AI features with a keyboard.
Before
After
Final Experience — Consolidated Scattered AI Entry Points
Access AI features through a centralized robot 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 Demo
Bringing every element together into a unified flow
Usability Testing
Validated the design with 5 users
Conducted virtual moderated usability testing with 5 participants including 3 task-based scenarios and post-task questionnaires.
Participant
- 3 Master's students
- 2 Ph.D students
Tools
- Zoom
- Google Docs
Method
- 1. Virtual moderated
- 2. Task based with given scenario
- 3. Post task questionnaire
Outcome
Increase in user satisfaction, reduced AI feature locate time
Conducted virtual moderated usability testing with 5 participants including 3 task-based scenarios and post-task questionnaires.
3.7 → 4.6
Increase in user satisfaction
51.7%
Reduced time to locate AI features
(Compared to the original Overleaf)
Reflection
Looking back
Working on the Overleaf redesign made me rethink how AI entry point could be better optimized into code-based writing workflows. I realized that the main issues do not come from being overwhelmed by AI itself, but by fragmented entry points can confuse users.
I learned about…
Accessibility
This project gave me an opportunity to consider accessibility throughout the design process. Since it is a web-based platform, there was a wide range of options, including keyboard shortcuts, a focus ring, and color contrast. If I had more time, I would add a focus ring throughout the design.
Team Communication
Since our team members were in different time zones, it wasn't easy to adjust each member's schedule. To address this, our team tried to respect each other's schedules and ensured to bring finalized tasks to the weekly meeting.
Design System Level Thinking
I learned how to think above the visual design by considering the design system. Considering the design system not only results in a more consistent design but also reduces the communication gap with developers.