Designing a date picker with support for multiple calendars and languages

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.


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.

3. Centralized calendar service

The lunar calendars, by nature, are fluid comparing to Solar calendars. Also, most Islamic holidays are not predictable way before. Those holidays are announced a few days early (sometimes even one day) before the actual holiday, and that can cause some change of travel plans for everyone. so we needed to support these real-time changes. Previously it was getting done by regular app updates. (yes, it was not very smart, but it wasn't touched by any team in the company before) because of being in a gray area.
I discussed the idea of having a centralized calendar service, which updated the apps and website platforms.
After digging the whole concept, we now had a clear understanding of how and when to update the calendar, not to cause any user experience problems.

4.  Design Explorations

I worked on a list-style view for the calendar just as an experiment. After the initial user tests with the prototype, I removed the list view from the feature list. It wasn't very clear, and users indicated that they haven't seen any calendar view like this before and are not comfortable using it.

5. Evaluation

I created a hi-fi prototype just for testing the performance and the interaction with real users. We picked five users during another user testing session, so I ran a quick test on the prototype.
All five users were able to select their desired dates and interacted with the concept very well, the switch calendar option was easy to understand, and they quite liked the "Hybrid holidays" option.

The Impact

The calendar was released as a part of our full app redesign in September 2019, and there was an almost 20% increase in the date-picking task's time to complete.
The task completion rate improved by 6%, which is an outstanding result. And the number of drop-offs significantly reduced on the date picker screen.
The sentiment score of the feature collected by a questionnaire, later on, was 9 out of 10.