Translator Browser Extension and Google Add-ons

Designing Lightweight Translation Tools for Everyday Workflows

Lightweight Design

Browser App UX

Role

Product Designer

Company

Systran

Problem

Users reported difficulty navigating between Systran’s tools, and there were complaints about clunky interactions, slow performance, and confusion over which features were available.

Solution

The redesign of the Systran browser extension and Google add-ons focused on simplifying the interface and ensuring feature accessibility while maintaining a compact, space-efficient design. The key was to maximise functionality in minimal space.

Results

Increased user engagement, with a more intuitive design leading to higher interaction rates and reduced drop-off for key features.

45% improvement in user ratings across the browser extension and Google add-ons, reflecting enhanced usability and performance post-redesign.

Optimized compatibility across both Chrome/Mozilla browser extensions and Google Workspace add-ons.

Design Solution

In response to user feedback and the constraints of limited UI space, we focused on delivering a set of features that offered maximum utility with minimal complexity, ensuring a clean and efficient experience across the browser extension and Google Add-ons.

Collapsible Sections

Within the extension’s pop-in, collapsible UI sections help users focus only on what they need, reducing visual clutter and allowing key actions to remain front and center.

Auto-translate Toggle

A simple on/off switch that allows users to automatically translate full web pages without needing to manually trigger the action each time—ideal for users who work across multilingual websites regularly.

Dedicated Settings Page

A separate settings page provides access to more advanced preferences and customization, keeping the main interface lightweight while still offering flexibility for power users.

Settings and account could be accessed through a dedicated page, lightening the extension UI

Limitations

One of the main challenges we faced was working within the constraints of the Google Add-on framework, which limits the ability to customize the UI. Unlike browser extensions, Google mandates the use of its own interface components, meaning we had to adapt our designs and rebuild key features using native elements. As a result, some of our custom components weren’t supported, and the Google Add-on lacks the same visual consistency and robustness found in our Chrome and Mozilla extensions. While we ensured core functionality remained intact, the user experience in the Google environment is more limited and visually distinct due to these platform restrictions.

The Google add-ons had to be rebuilt using Google's native components, reducing brand consistency