Blackboard
Designing for Right to Left Languages
Role: Lead designer, researcher and strategy
Team: 1 project manager, 1 product owner, 1 scrum team, 2 solutions engineers (sales)
Timeline: 5 months
Background
Blackboard has a growing clientele in the Middle East but currently our primary product (Blackboard Ultra) does not accommodate for right to left (RTL) languages. We needed to essentially “flip” our entire product RTL, but we weren’t really sure what that would entail. No one on our design team was familiar with designing for RTL, so this project would have a heavy research component.
The Problem
What does it mean to “flip” our product right to left and what is the best way to go about accomplishing this?
Initial Research
So what did it mean to actually design for RTL?
I started out by researching how others had approached this problem, but there are few resources about designing for RTL. After reading some articles, I realized there was a lot more to this than I thought and knew I’d need to expand my research. My initial research included:
Reviewing Material.io's standards on bidirectionality
Completing a basic Arabic course to better understand the language
Reading "Developing International Software" to better understand how things would function from a development perspective
Reading articles from various SME's across the web
Interviewing Arabic and Hebrew speakers to understand how they use RTL website
Meeting with our Blackboard partners in the Middle East
I then connected with our Blackboard partners in the Middle East. The two solutions engineers provided invaluable information and I worked with them closely throughout this project. Not only could the provide a deep understanding of the language, but because they were directly involved with our Middle East clients, which added very important customer insights into their expectations for the product. Speaking with them raised many questions about things I wouldn't have even considered had I not consulted them.
Synthesis
I collected all of the information I had gathered from various sources and synthesized the research in Mural. With the synthesis I created a research readout and presented to the broader team (design, pm and dev). It was important to keep everyone on the same page as this was a large project that would require multiple executers.
View RTL Research Readout
Strategy
Now that I knew what needed to be done, I needed to figure out how to do it. What was the best approach?
I worked with PM and dev to understand exactly what views they would need and how things would need to be delivered. We would be using our existing archetypes as a reference point to flip and alter, but our set of archetypes were incomplete. I collaborated with my team members to identify what archetypes still needed to be built and how to delegate the work. I also wrote a Medium article to help as a reference point for both my team and other design teams working on RTL projects.
Read Medium Article: Fundamentals of Right to Left UI Design for Middle Eastern Languages
Defining a Set of Standards
Once the archetypes were fully built, it was time to start flipping. Because there were a number of executers on this project, I needed to have a well defined set of rules on what needed to be done. I created a document for designers to follow, but because this was a new project for everyone, somethings would need to be determined as we encountered them. As the SME on the project, I maintained an open line of communication and made myself available to design, dev and PM whenever there were questions.
Designing for the Hijri Calendar
One of the most challenging parts of this project was designing the calendar. Many countries in the Middle East follow something called the Hijri calendar, which is based on sacred dates in the Quran. While they still reference the Gregorian calendar for some things, these countries plan many things based on the Hijri. That meant the designs for the calendar within Ultra needed to accommodate both the Gregorian and Hijri calendars.
After completing a small round of research to better understand the problem, I began ideating. Because the Hijri and Gregorian calendars operate on different days, months and years, I needed to figure out how to show all of that information at once, while also allowing calendars to be turned off. I discovered that some of the Arabic language websites I had reviewed were offering a combine calendar, with the option to turn off either the Hijri, Gregorian, or view both together. After speaking with SME's, this seemed like how we should approach the calendar page in Ultra.
The next big challenge related to calendars was to design the date picker. This is a small dropdown calendar that would allow users to select a specific date or a range for things like due dates. I had to balance legibility and accessibility with the need to have multiple dates within each calendar square. After researching how Middle Eastern airlines were solving this, I developed an approach:
Usability Testing
Once the product was flipped and prepped for RTL, we wanted to test what we had done with actual users. We would be testing users in person at the Teaching and Learning Conference in Dubai, UAE, so my next steps were to create a research plan and facilitator guide.
View Research Plan
View Facilitator Guide
Next Steps
Due to COVID-19 this research initiative has been put on hold until the conference is rescheduled. Development is researching how to implement these changes and we are looking at how to continue pushing this project forward.