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.
- Timeframe
- Jul 2025 – Sep 2025
- Role
- UI/UX Design
- Domain
- AI Productivity
- Tools
- Figma
- Team
- 2 UX Designers · 1 UX Researcher
What is Overleaf?
A browser-based LaTeX editor for academic writing
Overleaf is a browser-based LaTeX (code) editor for academic and technical documents.
It's similar to Google Docs, but instead of directly editing text, users make changes by writing code.
Problem
Scattered AI entry points increased cognitive load and hindered discoverability
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
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.
Design Question
How can we provide users with more glanceable and accessible access to AI features?
User Interview
Define user needs through semi-structured interviews
Research Insight
- Users found AI entry points scattered and visually inconsistent, which made navigation confusing and the robot button's submenu feel redundant.
- Users struggled to understand how to use AI features due to fragmented entry points and unclear mode signaling.
Design Goal
Provide AI features with clear discoverability and mode transitions
Direction 1
Introduce a centralized AI panel to consolidate AI actions and switch between Generative and Highlight modes.
Direction 2
Use the Robot button as a unified entry point, allowing users to choose between two different AI modes within a single flow.
Approach 1 — Switch Between Two AI Modes
Introduced a centralized AI panel to consolidate AI actions and toggle between Generative and Highlight modes.
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 by adjusting the background color.
Before
After
Final Experience — Switch Between Two AI Modes
Get assistance from AI features in a larger panel, with a toggle
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 redesign with 5 users
Conducted virtual moderated usability testing with 5 participants including 3 task-based scenarios and post-task questionnaires.
Participant Demographic
- 3 Master's students
- 2 Ph.D students
Tools
- Zoom
- Google Docs
Method
- 1. Virtual moderated
- 2. Task based with given scenario (4 tasks)
- 3. Post task questionnaire
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 pushed me to rethink how AI fits 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 that increase cognitive load.
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.