Right to left language support

Enterprise Copilot Right-to-Left Language Support

Aisera, an AI-powered hub, empowers employees to converse with a copilot to resolve issues efficiently.

As Aisera expanded its presence into the Middle Eastern and Israeli markets, we identified the need to introduce right-to-left (RTL) language support for our Copilot feature.

The goal was to create a seamless experience for users who read and interact with products in RTL languages, such as Arabic and Hebrew.

Components from the library with a text direction left-to-right and right-to-left.

Team.

A team of 2 Designers and a Design Manager.

Role.

My role involved conducting research and leading several UX exercises, such as dot-voting and card sorting. I also created initial wireframes, gathered feedback, and developed the initial version of the Figma files.

/solution

Seamless Interface for Right-to-Left Languages

The result was a copilot interface that supports both LTR and RTL languages. By incorporating RTL support, we enabled users from the Middle East to interact with the Copilot feature naturally.

Low-fidelity sketch of the final MVP

Please contact me for high-fidelity designs and more details on this project!

volhadouban@gmail.com

/process

How might we design a user-friendly interface that seamlessly adapts to right-to-left languages?

Our Copilot feature was initially designed for left-to-right (LTR) languages, so we needed to redesign the user interface to accommodate the needs of RTL language users without disrupting the overall experience for existing LTR users. This required adapting the design to maintain usability, functionality, and consistency across different language scripts.

To begin the process, I first worked with the Design Manager and CTO to understand the business needs driving the project—we were expanding into new regions, specifically the Middle East and Israel, where businesses required RTL language support. It was essential to ensure that the Copilot feature felt intuitive and native.

I conducted thorough research, analyzing existing products that supported RTL scripts to understand how they managed UI elements, content flow, and navigation, reviewed documentation.

I also tested systems myself by switching to RTL, which provided a valuable hands-on experience. This helped me understand the challenges faced by native RTL users when interacting with products that are not fully localized.

Research screenshots

A screenshot of other products using right-to-left text direction.

Part 1: RTL design rules.

With the research phase complete, I collaborated with another designer to assess the existing design system. I carefully reviewed the UI elements, components, and layouts to identify areas where RTL support was needed.

Below are some of the findings I incorporate in the final designs.

Overall layout.

The entire layout and text direction adapt for RTL, with user chat bubbles repositioned to the left and bot responses to the right. Additionally, the logo and main navigation shift to the opposite corner with the navigation elements inside also mirrored, ensuring a consistent and intuitive experience.

Low-fidelity sketch

High-fidelity design

Buttons and numbers.

Elements such as timestamps, phone numbers, clock displays, website URLs, and untranslated text remain unaffected and do not switch directions in RTL interfaces. However, the order of buttons undergo changes to accommodate the right-to-left layout.

Forms and arrows.

Form layouts and their elements are mirrored. Directional icons, such as arrows, sound on/off are also flipped to maintain consistency with the mirrored interface. Passwords remain unchanged, but the input field aligns to support right-to-left typing.

High-fidelity design

Calendar.

Months toggle arrows are repositioned to the opposite corner, so clicking the left arrow will display the next calendar month. For instance, if the current month is April, clicking the left arrow will show May. The date format also changes to start with the day, following the format DD/MM/YYYY.
Scroll bar switches positions, and the order of years adjusts to RTL, while maintaining a top-to-bottom direction.

Logos.

The logo never gets flipped as it confuses people and might have legal consequences.

High-fidelity design

Universal signs.

Universal symbols and markers are expected to maintain a consistent appearance. As a general guideline, icons representing real-world objects should remain unflipped.

Part 2: Settings to switch between LTR and RTL.

Once the RTL rules were understood, it was time to design the settings menu that would allow users to switch to RTL support. Since the settings menu had not been designed yet, I scheduled a meeting with another designer on the team and a design manager to brainstorm the requiremebnts for the settings menu.

I led a dot-voting exercise, where each of us listed potential features and then used dots to vote on which ones to prioritize. Following that, we used a card-sorting exercise to group the options within the settings menu.

Groups of sticky notes with listed features.

At this point we needed to move fast, so I quickly sketched several different directions for the settings menu, exploring a couple layouts to ensure the most intuitive and efficient design. Afterwards, I reviewed the designs with the team to get some feedback and moved forward with the initial prototype in figma.

Preliminary explorations

Two low-fidelity drawings of a mockup on paper option A and B, showing different ways to incorporate settings. Below those is a low-fidelity product shot of the final version.

Collaborating with Engineering.

Once the initial designs were completed, I organized a design feedback with the team to review the proposed directions.
‍
After minor modifications, I handed off the designs to another designer on the team, who worked on preparing the files for the engineering team.

A team composed of a developer, product designer, and UX designer working together within figma.

Under NDA. Please contact me for designs and more details on this project!

volhadouban@gmail.com

/lessons learned

Research-Driven Design for RTL Users.

In my research, I leveraged resources from reputable companies with robust design systems that offer detailed guidance on incorporating RTL support in software products, talked to native Arabic and Hebrew speakers to gain firsthand insights into how they interact with products. I also switched systems to RTL myself, which provided a valuable hands-on experience. This helped me understand the challenges faced by native RTL users when interacting with products that are not fully localized.

Collaboration is fundamental to delivering a comprehensive solution.

Throughout this project, I worked closely with the Design Manager and CTO to align on objectives and gather feedback. I also partnered with another designer to ensure accurate incorporation of design system elements.