Design system
Product Design

Etar Design System

My Role
Product Designer
Timeline
Jan 2023

Introduction

Etar is a collaborative project between me and Mohamed Alaa. Sayed is one of the design system gurus who helped in building design systems for a lot of large companies in the middle east, Halan the first Unicorn in Africa is one of them.

‍Etar’s Links

“Twitter” “Instagram” “Dribbble” “YouTube” “Facebook” “Figma” “Website”

About Etar

Etar is the largest design system supporting RTL languages for both, web pages and mobile applications. Helps to start any project, save thousands of hours and raise the level of design. Also, aids to have a fast and consistent design, global styles & carefully designed for precision.

Problem

Designers face lots of problems when building user interfaces, especially when starting a project from scratch. These problems include:

  1. Inconsistency in design: Designers may create inconsistent design elements, such as different color schemes, typography, and iconography. This can lead to confusion and a lack of brand recognition.
  2. Time-consuming design process: Designers may need to start from scratch every time they create a new design, which can be time-consuming and inefficient.
  3. Difficulty in maintaining brand standards: It can be challenging to maintain brand standards especially, across multiple teams and projects.
  4. Lack of scalability: It can be difficult to scale design across multiple products or platforms.
  5. Communication breakdown: Designers may have difficulty communicating their design decisions to other team members, which can lead to misunderstandings and delays.

When designing user interfaces for RTL languages such as Arabic, Hebrew, and Persian, these problems are doubled. In addition to, the above mentioned problems that product designers normally face, RTL languages add:

  1. Text alignment: In RTL languages, text is aligned from right to left, which means that the layout and positioning of text and other UI elements need to be adjusted accordingly.
  2. Navigation: Navigation in RTL interfaces needs to be mirrored, meaning that menus, buttons, and other UI elements must be flipped and positioned in the opposite direction.
  3. Visual hierarchy: The visual hierarchy of an interface needs to be adjusted to accommodate the RTL layout, which may require changes to the relative sizes and positioning of UI elements.

Solution

A set of tools and resources that can help them address the unique challenges posed by these languages. A design system and Figma UI kit that supports RTL languages, can provide designers with the components, guidelines, and best practices they need to create high-quality, user-friendly interfaces for RTL language speakers. Etar includes pre-designed UI components that are optimized for RTL layouts, such as buttons, menus, and other UI elements that are mirrored and positioned correctly. Components are designed with the unique characteristics of RTL languages in mind, including text alignment, typography, and other cultural considerations. Etar can complement the design system by providing designers with a set of pre-designed templates and components that can be easily customized and adapted to suit their specific needs. Etar also includes a range of UI elements that are optimized for RTL layouts, such as text boxes, icons, and other design elements that are mirrored and positioned correctly.

The Challenge

Building a one-size-fits-all design system that serves the needs of most of the product designers and can fit efficiently in their design process as well as various brands with various guidelines. Also, the idea of that the components' names, properties and variants should be intuitive enough so that designers can publish the design system directly to their project files with no need to manually browse between the components, go through the properties or feel lost.

Mirroring the components correctly as RTL languages have a different layout and visual hierarchy than LTR (left-to-right) languages. This means that UI components, typography, and other design elements need to be mirrored and positioned correctly, which was very challenging as needs much amount of time, effort and testing all the components.


One-size-fits-all

As far as we can, building the design system to work for a wide range of products and designers as well, regardless of their specific design requirements. Setting guidelines and components that can be easily adapted to suit the different needs

RTL Languages

Taking into consideration RTL languages while designing the components, as they needs a special treatment and lots of testing to ensure that they are flipped and mirrored correctly to match Right-ti-Left languages

Competitive Analysis

We explored the most popular Figma UI Kits to know the needs that are still unfulfilled by them as well as their weak points. We found multiple issues that could be addressed by Etar and opportunities as well that could be our USP. For example:

  1. Components Organization: Most of the design systems don't care about organizing components in the pages, ending up with missy Figma pages, components are scattered everywhere in the page without any alignment or ordering, making designers lost in every component's page.
  2. Components grouping: Design systems cluster  components in groups that doesn't make a sense nor adds a meaning for how these components should be used or even why they are there. Some of them just group under "Style guide or Foundations" and "Components" and that's it.
  3. Reduction in mobile: The orientation of most of the kits is to care more about the desktop/web UI components, even though mobile devices are more widely used than desktops . The do have components for mobile application but either not as many as the desktop components or they just don't care about adding various and different variants for them.
  4. Limited variety: Some design systems, adds a very limited variety of components in their UI kits. Only the most basic ones are added
  5. Properties naming: Some properties names are not clear enough what they should be doing or changing in the instance
  6. LTR (Left-to-Right) languages Only: All design systems design components for LTR languages only. Of course, because these are the most widely used languages, but still they are not the only used. As according to Ethnologue database, approximately 25% of the world's population uses RTL (right-to-left) languages such as Arabic, Hebrew, and Persian. This amounts to over 1.8 billion people worldwide.



Sample of the explored design systems

The Design System

4,000+ Components and Variants

Etar consists of more than 4,000 well designed components and variants supporting RTL languages and serving both mobile applications and websites, to fit most of the designers' needs, accelerating their design process by saving the time and effort consumed in building UI components from scratch. Also, maintaining consistency to help in the scalability of a wide range of products and platforms.

Color and Typography Global Styles

Smart color styles with simultaneous hues let you customize the color theme with a single value and  text layers that can be updated with a single edit. They are implemented as global styles in the UI kit file to efficiently and quickly apply the brand visual identity. In addition to, sample of various images added as global styles under colors to easily add them into components without detaching the instances.

Color and Typography local styles

Base (Unpublished) Components

These base components are the atoms used in the master component itself, they are unpublished nor used alone in the design. They are just there to tweak and change in their styles or anything else and these changes are automatically pushed to all the master components using these base atoms. Thanks to this method in building the design system the changes are made more efficiently and with the least effort possible

Components Grouping

Components are clustered under actions, navigation, data entry, data display, feedback and marketing website. This grouping adds more meaning to the components and their usage. As these groups naming conventions give a sense of guidance about how these components should be used and why the are there in the UI Kit file.

Components Organization

Organizing components neatly for easily scanning the components and its variants. Also, to get a grasp of the available variants as quickly as possible.

RTL Support

Components are implemented to efficiently change the language direction [From English (LTR) to Arabic (RTL) and vice versa]. Mirroring the components correctly and altering their Auto-layout direction to fit the desired language direction. Lastly, consistent text layer names to don't lose the inserted text with any change in the component's properties.

Web and Mobile Components

Etar designed its components to cater for both mobile and web platforms. Most of the components are designed to be used in both web and mobile, these are the basic ones for example button, input field, icon container, list control, ...etc. Some are web based components with mobile breakpoint for example page header and breadcrumb. Lastly, there are the mobile only components for example tab bar and bottom sheet.

Clear Properties Naming

All the UI Kit components have clear and descriptive properties names to enhance the usability of Etar, so designers can use it in building their designs without the need to read any documentation or a guide to know how to use the design system. Emojis are added to each property name to add a layer of delightful designing experience and also to be more understandable visually.

Impact Overview

Etar Design System has helped designers to quickly kick start a new project in just a few seconds without creating all the components from scratch, thanks to the global styles and base components, designers can efficiently update the whole kit. Lastly, designing for RTL languages like Arabic is now much more easier by just changing the language property and the component will be mirrored correctly with the desired language direction.

Effecient updates

Through base components and global styles it easier to apply the brand identity and change in the components' characteristics with what fits the designer need

RTL support

Components are mirrored, flipped and change its Auto-layout direction to meet the language direction