Designing a date picker with support for multiple calendars and languages
About Alibaba.ir
Alibaba.ir is the largest online travel agency (OTA) in Iran. With more than 10 million users, they are the dominant player in all travel-related services in the country and some Middle East countries.
The Challenge
This case study demonstrates how I designed a date picker for Alibaba's mobile apps as a part of our full app redesign effort.
This date picker is not a normal one. It needed to support multiple calendars and languages.
Iran has one official calendar, and it is the Solar Hijri (Persian) calendar. Its determination of each year's start is astronomically accurate year-to-year instead of the more fixed Gregorian calendar. But as an international travel provider, people need to have the ability to book their flights, accommodations, and all other travel-related services in the Gregorian calendar, too. Also, as another need for being localized, we need to support the Islamic lunar calendar too. Keeping three different calendars with different holidays is a real challenge for us.
My Role
I was the head of the mobile products then, but I decided to help the team by picking the calendar/date picker to redesign and overhaul as a hands-on project.
Tools
Design Process
The Alibaba. ir's app redesign project started after a massive in-house usability test. The head of product design and I initiated this research to test each of Alibaba's platforms to find their usability issues.
Once the analysis finished, I prioritized the issues/features, and based on the road map; we began exploring solutions.
For this specific issue, once the problem was fully detected, in-depth research was the next step, followed by wireframing and prototyping, testing the concept, hi-fidelity design, and finally rolling out the feature to collect feedback and tweak the design.
1. Research
Usability tests are the best practical method to dig into actual user problems. We already set up a usability lab in our customer support big building, and we were able to record sessions and observe users' behaviors live.
These sessions took around 30 minutes, and we were asking users to complete a task while one facilitator was helping them. The others were in another room observing the user and the screen from a camera.
During the usability sessions, we found out many users had problems using the date picker. The date picker already supported two calendars, but it was not a unified experience; once you switch to Gregorian, the previously selected days were gone. We also were not showing other calendar holidays necessary for many users, for example, trying to book flights for the Christmas holidays (Christmas is not a national holiday in Iran).
We also showed the Gregorian calendar in the English language, which was a wrong trend in all Farsi apps. And we saw some users had a problem reading English.
Competitors Analysis
I couldn't find any local competitors who had a better calendar, but I found out Airbnb has been working on internationalization, and the calendar was part of their project.
I researched other players like Booking, Traveloka, etc.
2. The Solution
I began to gather ideas around the subject. Based on my research, the date picker should support the three main calendars. Also, regardless of the calendar, it should support three different languages in the future. It was the starting point of the big internationalization project in Alibaba, to add English and Arabic to the apps, to support the MENA region.
We also needed a central backend service for syncing calendars. It would serve two primary purposes. The first was to have a unified calendar among web and mobile platforms, and the second was to sync the Islamic Lunar calendar with the Solar Persian calendar. The lunar calendar has fluid holidays. There are situations that official Islamic holidays shift 1-2 days a day before.
