A Design Language System to Serve Them All...

Product Design Case Study
Overview
Alibaba travels Co. has been active in Iran’s travel and tourist business since January 2014 as a startup. Alibaba Travels Co. is the pioneer of online travel services in Iran. Alibaba Group has five offices located in Tehran. We are providing innovative, competitive, and enjoyable services for the people who visit Iran and all Iranians traveling worldwide.
Introduction
Why we need a design system?
There are tons of different reasons that push us to create and maintain a design system. As Marcin Treder (the CEO of UXPin) once said: “Design is more important than ever. Companies fighting on the hyper-competitive global software market can rely only on experience as a key differentiator. That puts enormous pressure on designers worldwide to take on more projects, deliver higher quality, and work faster. But Design doesn’t scale easily. Efficiency doesn’t emerge from thin air.”
The Problem
In Alibaba, we were working in a decentralized system. Each product had a small team consisting of a product designer, developers, a PM, a PO, etc. Working in the decentralized system led the design to inconsistency and chaos. Each product had a different look and feel. The challenge was to make a design system from scratch and consistently make an alignment between products.
First of all, what is a Design System?
Without getting too far into the details, a Design System equips your organization with a palette of design choices you can employ throughout your product to shape your customer’s experience of your brand with consistency and cohesiveness. Let’s take a closer look at the perspectives of some of the most important stakeholders involved: the developers, designers, and product managers who will own and use the systems.
Make the process work for you
As digital products and ecosystems get more extensive, an increasing number of designers will work together to solve design problems at scale. And generally, more designers means more design debt and more inconsistencies. A well-considered Design System will reduce some of these headaches; it promotes UI consistency and cohesion and provides a future-proof foundation to grow your design at scale, both at speed and in an iterative fashion. It also creates a shared vocabulary for those working together and enables a more thorough approach to quality because components can be verified before they are consumed.
Choosing the right team model
The Design System itself is a living, breathing organism, so creating these components and maintaining this system requires a diligent team effort. There are three approaches to organizing your Design System team; solitary, centralized, and federated (or decentralized) models. We decided to continue with a federated model.
Jobs to be DONE
Our Team
We built a team named "Design Core Team", consisting of Product Designers focused on mobile and Web, Illustrators, UX Writers, and Front-end Developers. This is the structure of our team.
Where to start?
Since there were no precise references, symbols, or documentation, we had to gather the data by taking screenshots of every page of each product and find all the elements in them. It was time-consuming, tedious, and unscalable.
Research
Could we create a Design System for a complex and growing product without research?
We started by interviewing designers who will use this product to understand their problems and pain points.
We also interviewed stakeholders who are developers, product owners, and product managers.
We studied the guidelines laid out by Google, Apple, Airbnb, and Atlassian, and other leading products.
We also searched for other teams who faced a similar challenge.
Inventory
After gathering all the screenshots, we made a list of what we had to start making plans.
Once we captured every button, icon, and design pattern, we grouped them into categories. Viewing them side-by-side revealed why we needed a system precisely. There were dozens of button styles, incorrectly applied font weights, and single-use icons everywhere.
Our next task was to design every UI element from scratch.
We came up with a roadmap with specific milestones to start the process.
Check Out the Roadmap Here
We planned to start designing elements in an agile process.
Edit
This was the most time-consuming portion of the project. We had to make decisions regarding naming conventions, categorization, organization, and presentation.
Evolve
Design System is a product that should be maintained and updated that never stops growing up, so we had to develop a plan to keep it alive afterward.
Results
Alibaba is the number one of its markets; besides the current features, It has tons of more to come. But is it enough? How about a mesmerizing design through a frictionless experience that results in an enjoyable journey.
A design language system helped us to reach that goal. it's a humble start but a huge commitment
Final Designs on Zeroheight
App-like
Feels like an app, because the app shell model separates the application functionality from application content.
Fresh
Always up-to-date thanks to the service worker update process.
Safe
Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
Discoverable
Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
Re-engageable
Makes re-engagement easy through features like push notifications.
Installable
Allows users to add apps they find most useful to their home screen without the hassle of an app store.
Linkable
Easily share the application via URL, does not require complex installation.
The following reasons convinced to design and develop a PWA rather than native applications.Low budgetLightweight and easy to createCross-platform compatibilityEasy installationBoosts conversionCompetitive advantageEasy to expandQuick installation on any deviceIncludes push notification optionsReduces data usage and loading time
Additionally, Google has published case studies which prove how Progressive Web Apps are improving technical and business performance. According to comScore, 51% of users still don’t download any apps in a month.
This means even if you create an app, it will take a lot of work to attract users to download it. But, an average user will at least manage to visit 50 websites in a month. So, by creating progressive web apps, you can cover more users.
See Less
Conclusion
These are the key results of having a Design Language System.
Focus
Allow the designer to focus clearly on the project at hand rather than to be diverted by other distractions.
Clarity
Allow the designer to think clearly about our design beliefs as well as the design constraints in place across the platform.
Confidence
Allow the designer to have complete confidence in what they are designing and that it is in line with others in the team.
Consistency
Create consistency across the product, which will create a secure, familiar experience across the platform.
Efficiency
Create understanding across the teams, meaning less time consumed, concentrating on the less important details.
Suppose the designers are focused on their job and understand the design language. In that case, it will give them confidence, which will help the business at a higher level as it will create consistency and efficiency.
The project's goal was to create a Design Language System, become consistent and reduce the pain of designing in a decentralized team. Our Design Language System helped us reach recognizability for the brand, consistency, and authenticity for our product, ease of use & enjoyment for our users, and finally, Efficiency, Stability, and Flexibility for the business.