top of page

RTL LANGUAGE SCREEN DESIGN

Specific project details, client information, and proprietary assets are omitted due to NDA constraints.

A product from a medical device company with already-made designs was undergoing preparation for international market release. The purpose of the product is to guide the user through step-by-step processes of using the device with on-screen images and text with screen interactivity.

​

The purpose of the design change is to translate said product for 13 languages, two of which are read right-to-left (RTL). As someone who was taught to read in English as a left-to-right (LTR) language, training the eye to read "backwards" was a design hurdle.

​

As the sole designer, I owned the end-to-end design process, from research and ideation to final implementation. I collaborated closely with a Human Factors engineer and a software developer, ensuring alignment between design, usability, and technical feasibility. 

 

Over two months, I conducted user research, usability testing, and iterative design, using Figma to create a scalable and culturally sensitive solution.​

Objective

The Challenge

My Role

Key Takeaways

Cultural Sensitivity

Designing for RTL languages required adapting text alignment, icons, and imagery to align with cultural expectations, ensuring an inclusive and intuitive user experience.

User-Centered Design

Through research and testing, I prioritized clear communication & user safety, ensuring accurate medical terminology translation and a seamless experience for RTL language users.

Collaboration

Close collaboration with developers ensured the design was technically feasible & aligned with user needs, bridging the gap between UX design and software implementation.

Iteration & Empathy

Iterative testing & immersive research (setting my iPhone to Arabic/Hebrew) allowed me to refine the design and build empathy, creating a product that resonated with RTL users.

Research

Extensive research was undertaken with a primary focus on creating a user-friendly and culturally sensitive solution. The research encompassed various dimensions, including linguistic and design considerations.

Pain Points

1

Users of RTL language products often face formatting difficulties when working in environments designed primarily for LTR languages. These challenges include issues with text alignment and issues related to the proper handling of punctuation and numbers, which are reversed in right-to-left scripts.

2

Redesigning a product user interface for RTL languages requires a deep understanding of cultural nuances like interface elements, icons, colors, or imagery. Addressing these cultural aspects while maintaining a consistent design can be a delicate balancing act.

3

The accurate translation of medical terminology and instructions is vital to ensure user safety. It's crucial to ensure that users can understand critical information without ambiguity to guarantee safe and effective use of the medical device.

UI Comparative Analysis

The research further extended to examining existing RTL websites and products to benchmark best practices and identify areas of improvement. By benchmarking these websites against established usability standards and best practices, we identified areas of improvement, ensuring that our own RTL website design could offer an enhanced user experience and meet the specific needs of the target audience.

Text box pre-filled letters are right-aligned

Numbers are read left-to-right

Facebook Login Page 2017 Arabic

Site logo was not reflected since the characters are in Enlgish

Images and emojis flipped location but not orientation

Enlgish Facebook Login Page 2017
iPhone English.png

Setting an iPhone to Arabic was a crucial step in conducting research for a right-to-left language user interface design.

​

It enabled us to immerse ourselves in the RTL environment and gain firsthand insights into the user experience.

 

This allowed us to evaluate how text direction, interface layout, and design elements would function in an RTL context, ensuring that our final design would be both functional and culturally sensitive.

Testing & Iterating

Linguistic experts were consulted to ensure accurate text rendering, script recognition, and typographic details specific to right-to-left languages.

​

4 total sessions were held, 2 in Arabic and 2 in Hebrew with native speakers/readers. Each session used a visual simulator of the software and held virtually.

​

Initial sessions presented opposing information in regards to what orientation iconography was initially anticipated. When the final two sessions were completed, it was up to the decision of the lead engineer and myself to decide what to test further.

Usability Study Findings

1

Forward progress is represented from right-to-left; an arrow would direct to the left instead of to the right.

2

Standard icons did not require flipping as they are universal images like a clock.

3

Numbers in standard English format (1-2-3) are kept in the same order and not read right-to-left.

Collaborated Early and Often

Worked closely with the software developer to understand technical constraints and opportunities, ensuring the design was both feasible and aligned with the product’s architecture.

Created Developer-Friendly Deliverables

Provided detailed design specifications, including responsive layouts, iconography guidelines, and RTL-specific rules for text alignment and number formatting.

Facilitated Clear Communication

Held regular design-to-development handoff sessions to ensure the final implementation matched the intended user experience, particularly for RTL-specific elements like directional icons and progress indicators.

Bridging the Gap Between UX Design and Software Development

A critical aspect of this project was ensuring the seamless integration of UX design with software implementation.

This collaborative approach ensured the design was not only user-centered but also technically viable, resulting in a smooth transition from concept to code.

End Result

Final Design Layout

LTR Screen Design Example

Screen layout flipped to match right-to-left language orientation

Arrow facing towards right to go back to previous screen

Steps have the period to the left of the number

Page number is 1st of three with forward arrow highlighted

Bulleted text is right aligned with bullet points to the right of each text line

Progress bar fills from right to left to indicate forward progress

English Example

RTL Scren Design Example

Arabic Example

All images provided are mockups for portfolio purposes only.

Finally

This project underscored the importance of deep cultural and linguistic understanding in product design. As the sole designer, I navigated conflicting user feedback, made strategic decisions, and balanced global consistency with local adaptation. 

 

Moving forward, I aim to test designs on the actual product to further refine the user experience for RTL language readers.

​

This experience reinforced my belief in the power of user-centered design to bridge cultural gaps and create products that truly resonate with diverse audiences.

bottom of page