Leading the Alibaba.ir Mobile apps redesign
About This case
When I joined Alibaba.ir in 2018, mobile apps were just some old and inefficient pieces of software and hadn't been fulfilling the company's ambitions to take over the market. This case shows how I led the mobile team in creating a whole new app that changed the entire image of Alibaba in customer's minds and increased the order share of the app over the web platform.
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
Though Alibaba was the number one player in the country's travel industry at that time (and still is), the whole business was leaning on the website as the primary sales platform. Other competitors were picking up on mobile platforms.
The company leadership team planned to increase the mobile apps order share to 60% of total orders. However, given the state of the current apps, there were many initiatives needed to reach that goal.
Also, at that time, the company had failed tries for overhauling the apps.
I've been asked by the leadership team (VP of product, which I was reporting to, CEO, and Marketing manager) to come with a plan for reshaping Alibaba's presence in handheld devices.
My Role
I was the head of the mobile apps team, which included 6 Mobile Engineers, three dedicated Product Designers, the Tech Lead, the Product Owner, and the QA Engineer.
My role was overseeing the entire redesign project by coming up with the road map, product, and design strategy, leading the product design team, and service design.
The Process
The set goal was very general and vague. For example, we wanted a better app that drives more orders than the web platform. But the entire Alibaba portfolio of products (more than 12 autonomous teams) was building their service "for" the website and not very mobile-oriented.
Here's the process for the entire redesign, which took us around nine months to complete.
1. Involving Stakeholders
Twelve products, including International and domestic flights, Hotels, Local Stays, Bus and Train Ticketing, Tour Packages, Core Product, etc., were a part of this project. In addition, I started to have 1-on-1 meetings with each PM to discuss theirs and our ideas and understanding of mobile apps and initiatives.
I also had separate discussions with the Marketing Manager about using the newly purchased Marketing Automations tool (WebEngage) in the new apps as the pilot customers segmentation project.
This is the structure of Alibaba's product teams:
2. Extracting Usability problems
We knew that we want a better app, but there were no insights about what's wrong with current apps and the pain points. So I decided to utilize Quantitative and Qualitative data to find out.
2.1. User Testing (usability studies)
I managed to secure a budget for a large user testings project with the help of Alibaba's Design Director. The tests were planned to run for both Mobile and Web platforms.
We immediately set up a UX test lab in our large customer service center, including separate rooms, enhanced with cameras, and started to work on the test scripts with our 3 UX researchers. The user's recruiting started afterward.
The test consisted of asking users to finish some tasks in our old app and answer a SUS questionnaire.
We tested more than 80 users within two months on both platforms. In addition, I interviewed dozens of mobile users and found terrific insights that helped us shape the product later.
2.2. Data analysis and BI dashboards
Alibaba's Business Intelligence (BI) team has extensive tools, dashboards, and sets of reports to help products. I took advantage of the information to support our user testing data.
3. Narrowing down the focus
We had a lot to analyze at this point; a combination of product issues, UX issues, new ideas, business, and marketing initiatives needed to be done altogether. So I needed to categorize them and narrow down the focus to create the product roadmap and design strategy.
As you can see, we rooted all our 'low order share' problem into this representation:
We needed to add more mobile-friendly features to the app, increase our product coverage, and fix the known UX issues. We needed a product roadmap and a design strategy.
I'm a fan of B.J. Fogg's behavioral model and always consider it when planning for product features and designing to change users' behaviors.
In Alibaba's case, we wanted users to choose mobile over the web, a clear behavior expectation but a complex thing in reality. So we had to make it easier (increasing the ability), more pleasant and fit for their needs (motivation), bring more features, and use intelligent tools to trigger (prompt) users smartly.
4. Mobile Only Features and Product coverage
I began to gather and define business and product ideas to have a more mobile-oriented set of features alongside adding more products to the mobile apps that were previously not there.
4.1. Competitor Analysis
It was clear that we don't want to replicate the website in the shape of the app. So, as an essential step, I did a competitor analysis, reviewing Iranian and international apps and services.
4.2. Travel Companion
I investigated the idea of adding travel-companion tools. I intended to help users throughout their entire travel experience by means like:
- Trip Planner
- Currency exchange calculator
- Alibaba's travel blog appearance in the app
- Car rental
- Travel insurance
After presenting it to the business, I had full support to add them to the product roadmap.
4.3. Marketing Automation
The marketing division was in the process of hiring a new tool to segmentize and automate marketing communications. After initial discussions with the team and the third-party tool (WebEngage), We decided to use the tool as a pilot project in Alibaba's app. That gave us the fantastic opportunity to build an explore screen that is personalized, enriched with content, and leads users to unique offers based on their behavior in the app.
5. Redesigning the App
I'll address the redesign process from now on. Our dedicated team of three product designers was a part of a centralized design team inside Alibaba. After discussing with the head of design and VP of product, we managed to have an autonomous design team of three for the apps. This was the start of decentralizing the entire design crew later that year.
The team immediately started on the redesign based on results from UX tests and our user stories for the new features.
5.1. Redesigning the navigation and IA
We wanted a new navigation approach to solving our main problems:
- Adding new products
- Adding room for marketing comms, offers, contents, etc.
- Solving current UX issues we found in user tests.
The new navigation included an Explore tab, an Offers tab, My Trips tab, and My Account.
5.2. Normalizing the Brand colors
Traditionally, Alibaba was very protective of their brand color (the orange), and they've built a very successful brand awareness across the country and neighboring countries so far. So as a result, the orange was being used on the web as a significant part of the UI.
The design team planned to normalize its use for a long time, but the marketing division, the owner of branding, held that decision due to critical marketing campaigns.
The new app was the perfect place to start negotiating this. Hopefully, it was a successful debate. They were happy after seeing the prototype designs. We were utilizing more white and having orange as a companion color. It gave a very modern look to the app. We also changed the typeface for a mobile-friendly, more legible one, which we later used for all other platforms.
Here you can see the early concepts for changing the color scheme and the home screen:
5.3. Redesigning the verticals
Each of Alibaba's verticals needed a separate redesign effort since each vertical had its autonomous team, and platforms like apps were users of their APIs. Based on our plan, we gradually started to redesign each.
5.4. Date Picker
Iranians use three main calendars in their daily life. The Shamsi calendar (Solar calendar) is the official calendar, but the Islamic lunar calendar for religious dates and Gregorian Calendar for international dates are also used. It was a unique situation for us to create a flexible date picker to support all three calendars with their holidays. I wrote a dedicated case study about this which you can read it here:
Alibaba.ir: Localized Travel Calendar
Please read about my solution for a travel date picker that supports three different standard calendars in the middle east.
The Final Look
The final look were ready while we were working on the verticals. we tested this design with our users in another serie of in-house user tests, and we received amazing responses from users.
Here are the real app screenshots:
