Revolutionising Bayt's Design System
Revamping the Bayt UI framework into a modern, tokenized cohesive design system to elevate the user experience for 44 million users.
My Role
Leading the design team in auditing, redesigning and devising implementation strategy.
Design Team
Me (Design Manager), Muhammad Ahmad (Senior Designer), Ali Raza (Designer)
About Bayt
Bayt.com is a leading job portal for 44 million job seekers and around 60,000 employers in the MENA region. Initially, Bayt's platform was developed using a combination of disparate HTML, CSS and JS components created by various teams. Over the years, the platform expanded and user expectations evolved, creating room for a more cohesive and scalable approach towards design.
Why invest in a Design System?
We recognized the need for a scalable design system to elevate its user experience and support the company's continued growth. A revamped design system was developed with the intent to unify the look and feel across all platforms and provide a robust framework that supports rapid innovation and scalability. By creating a single source of truth for design and development, Bayt UI 3.0 ensures that engineers, product managers, and designers can collaborate more effectively, resulting in a more streamlined and user-friendly experience for all users.
Our Design System Vision
The first step in this transformative journey was to establish core principles that would redefine Bayt.com's design identity. Collaborating closely with our marketing and product design teams, we tailored these principles to meet the unique needs of job seekers and employers in the MENA region. Our focus is on three key values: consistency, scalability, and accessibility
Unveiling Challenges
We conducted a thorough design audit of the platform and the existing design system\to identify pain points, inconsistencies, and areas for improvement.
1. Contrast Issues
Many text sizes and colours displayed severe contrast issues.
3. Difficult to read Arabic Font
As per our research, the Kufi script font for Arabic was difficult to read for native Arabic speakers. Hence there was a need to change the font to a font that resembled the freeform way Arabic is written in the majority of Arab countries.
3. High Onboarding Cost
Inconsistent usage of components across the platform led to a high cost in terms of onboarding new designers to the design system and explaining where specific components were used.
4. Redundant elements
Many redundant elements made the CSS file heavier leading to slower page speeds (e.g. bubble and popover components). This also led to a backlash to any conversation related to adding modern components in the system.
5. Inconsistencies
We also noticed the inconsistent sizes of various cards (due to varying grids) across different screens. Despite displaying the same content, the alignment, margins, and padding varied significantly in almost every instance.
We observed significant inconsistencies in horizontal margins, card sizes, alignment, and spacing. While this inconsistency was somewhat amusing, it underscored the pressing need for a more systematic approach to design implementation.
Introducing BaytUI 3.0
Why choose a semantic approach?
A semantic approach to design systems involves defining components based on their purpose and function rather than their appearance. This methodology enhances clarity, consistency, and usability by ensuring each component's name and structure clearly reflect its intended role in the application.
Choosing a semantic approach to the design system had many benefits:
- Improved Consistency
- Ensures that design elements look and function uniformly across the application. This cohesiveness enhances the overall user experience and reduces confusion.
- Enhanced Readability
- By using meaningful names for components, the design and code become easier to understand. This clarity speeds up the development process and facilitates better communication among team members.
- Better Accessibility
- Encourages the use of semantic HTML and ARIA roles, making the application more accessible to users with disabilities. This inclusivity broadens the reach of your application and complies with accessibility standards.
- Simplified Maintenance:
- Centralizing style and behavior changes within a semantic design system streamlines updates. This approach minimizes redundancy and reduces the risk of inconsistencies throughout the application.
- Scalability
- A semantic design system can easily accommodate new features and components. Its structured approach allows for seamless integration and ensures the system can grow with the application's needs.
Foundations
- Using sementic colours
- Defining standards for spacing using 8-point grid system
- Defining responsive grids and breapoints
- Changing fonts and styles in English and Arabic to improve readability and space utilization.
- Defining standard shadows
- Implementing Material Design icons and introducing sizing standards
Elements
Components
Setting up rules and best practices
Inspired by leading global design systems, our team developed an online documentation repository for Bayt's design system. This comprehensive resource includes detailed component states, design tokens, and usage examples. By centralising this information, we have created a go-to reference that enhances understanding and consistency across all teams involved in Bayt's product development.
Comparison
The transformation of the jobseeker profile on Bayt.com exemplifies the significant impact of our new design system. In the old Bayt UI framework, the jobseeker profile was cluttered and inconsistent, with disjointed visual elements and a lack of intuitive navigation. This made it difficult for users to quickly find and update their information, ultimately hindering their job search experience. The new design emphasizes clarity and usability, featuring a clean, modern layout that aligns with our principles of consistency, scalability, and accessibility.
Implementaion
We prioritised the elements based on impact and development effort. Each element was tested across multiple instances in a staging environment before pushing to production to ensure they cater to all use cases.
%201.png)
