Enriching Arabic technical content: Eqraatech

fixing usability issues

to enhance the Eqraatech learning platform UX

Flipping Card
Flipping Card

Timeframe

Between July & Aug. 2023

I worked as the
Solo Product Designer

Flipping Card
Flipping Card

Role

Flipping Card
Flipping Card

Domain

In the B2C sector

With 2 Tech Wizards

Founders SWEs

Flipping Card
Flipping Card

Team

Flipping Card
Flipping Card

Language Barrier

Arabic speakers entering the tech field face a major barrier: language. With limited high-quality Arabic technical content and the industry being English-dominated, thriving in the field is challenging, even with the necessary skills and experience.

Count on Eqraatech for support!

Eqraatech was beta-launched in 2023 aiming to enrich readable Arabic technical content in software engineering for programmers of all levels.

Flipping Card
Flipping Card

Beta Launch

Flipping Card
Flipping Card

UX/UI Flaws

The fast release, driven by excitement, resulted in usability issues. For example the UI was inconsistent and the UX was not optimal & bad design stands out.

But

Everyone wants exceptional user experience

Technical limitations,

Built on WordPress, not all desired

functionalities can be easily achieved

Flipping Card
Flipping Card

Technical Limitation

Arabic is a right-to-left language,

I’m a native Arabic speaker, but won’t my lifelong use of English on devices and reliance on English LTR UX resources be a problem?

Flipping Card
Flipping Card

RTL Language

Flipping Card
Flipping Card

Personal Challenge

I may not be good enough,

As a young professional in product design, working on a heavy content platform initially seemed better suited for a seasoned professional.

Flipping Card
Flipping Card

Logical Decisions

& The founders are SWEs.

Engineers, myself included, love logic. But doesn’t working with founder-engineers have the potential for unintentional micromanagement, hindering the autonomy of the design work?

Flipping Card
Flipping Card

Business Limitation

Limited resources

Major changes are unfeasible; Team members, time and funds are limited.

&

Stood on the shoulders of giants..

I freely adapted the “Research-Based Web Design & Usability Guidelines.” to my context and started an in-depth UX audit to inspect usability issues against the 47 usability guidelines I ended up with.

Web Usability Guidelines

Eqraatech web usability guidelines checklist; 47-point

Be Easily Found in the Top 30 3

  • Eqraatech doesn’t always appear in the first 3 search results

Do Not Display Unsolicited Windows or Graphics

  • There aren’t any on-start pop-ups

  • Pop-ups only appear when you trigger/click a button

Provide Text Equivalents for Non-Text Elements

  • There isn’t any meaningful Alt-text or captions for non-text elements

Use Moderate White Spac

  • Micro whitespace is inconsistent

  • Macro whitespace is inconsistent

  • No balance between the micro & macro spacing

Format Common Items Consistently

  • Different styles used for same elements & different elements have the same style

Problem/Missing

Needs improvement

Functioning correctly

Color Meanings

& conducted usability testing*

71%

of users spelled Eqraatech differently during searches

85%

of users mentioned difficulties in reading text-heavy content

57%

of users found the infinite

loop animation distracting

* 7 participants were involved in the moderated usability testing.

Reported SEO Improvements

إقرأ-تك

إقرا-تك

اقرأ-تك

اقرا-تك

Eqra-tech

إقرا تك

Eqratech

Eqraatech

Eqraa tech

Eqraa-tech

Many Arabic spelling variants

Eqraatech, being an Arabic-English expression, has at least 9 spelling variants with varied search results impacting its accessibility & visibility.

71%

of users spelled Eqraatech differently during searches

SEARCH APPEARANCE

to analyze most common expressions

I used Google and Bing search engines

differently than the chosen expression

of users spelled 'Eqraatech', “اقرأ-تك”

Search Appearance Analysis

Manually analyzed search appearance and reported SEO Improvements.

Arabic Font Medium

24px

Arabic Font Medium

22px

Arabic Font Bold

40px

Arabic Font

22px

Arabic Font Medium

Arabic Font Medium

Arabic Font Medium

40px

24px

13px

Arabic Font

18px

Arabic Font

Book

18px

Bold

50px

Arabic Font Bold

40px

Arabic Font

Arabic Font

Arabic Font

Arabic Font

Arabic Font

Arabic Font

Arabic Font

Arabic Font

26px

18px

18px

24px

28px

Arabic Font Medium

Arabic Font Medium

22px

20px

Bold

45px

Book

20px

Same sections with different styles on different pages

Uncountable used styles

Enhanced readability by 57%

الأسئلة الشائعة

The largest headline, using <h3>, at bottom, and the sixth-largest, using <h1>, at top.

Inappropriate HTML order

H1

H3

combined with

&

Calligraphic typeface for body text

Expo-Arabic is a calligraphic typeface inspired by geometric shapes that makes it feel friendly and close to the user but sacrifices readability. The same effect of this cute frame!

85%

of users mentioned difficulties in reading text-heavy content.

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

7 Buttons

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

5 Lists

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

5 Bylines

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

15 Headings

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

11 Paragraphs

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

6 LINKs

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

Old Typography System

(1 typeface, 49 styles)

New Typography System

(2 typefaces, 17 styles)

6 Headings

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

3 Paragraphs

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

2 Buttons

هذا نص بسيط

هذا نص بسيط

2 LINKs

هذا نص بسيط

هذا نص بسيط

4 Bylines

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

هذا نص بسيط

Flipping Card
Flipping Card

Hierarchy Audit

Flipping Card
Flipping Card

Use Cases Definition

Audited hierarchy using Edge DevTools (1) and defined use cases. (2)

الفقرة الأولى

يتطور مجال صناعة البرمجيات بسرعة هائلة حيث نستقيظ كل يوم علي تقنيات و برامج جديدة و ينقسم مهندسي و مطورين البرمجيات بين تبني التقنيات الجديدة و بين الثبات علي أدواتهم الحالية. و سنحرص دومّا علي تحديث خرائط تعلمّنا لتقدم لك كل التقنيات التي تسهل عليك صناعة البرمجيات.

Expo-Arabic as body

الفقرة الأولى

يتطور مجال صناعة البرمجيات بسرعة هائلة حيث نستقيظ كل يوم علي تقنيات و برامج جديدة و ينقسم مهندسي و مطورين البرمجيات بين تبني التقنيات الجديدة و بين الثبات علي أدواتهم الحالية. و سنحرص دومّا علي تحديث خرائط تعلمّنا لتقدم لك كل التقنيات التي تسهل عليك صناعة البرمجيات.

Inter as body text

“Inter is more readable, but Expo-Arabic’s size is better.”

Flipping Card
Flipping Card

Preferen-ce Study

100% of users preferred Inter as body text during the preference study. (3)

Inter isn’t supported in Arabic..

I unintentionally overlooked the fact that the Inter typeface is designed for Latin letters, and not all styles are compatible with Arabic text.

Oopsie!

28%

of users mentioned text-related issues* with the new typography system

*Issues were resolved with the new spacing system

New typography system

المعلومات الشخصية

باستخدامك أو زيارتك لموقع «اقرأ-تِك»، فإنك توافق على هذه الأحكام والشروط التي قد تتعدل من وقت لآخر. ودخولك إلى الموقع ومشاركتك أو تحميل المواد من الموقع يشير إلى موافقتك على الالتزام بتلك الأحكام والشروط، ولـ «اقرأ-تِك» الحق في تغيير هذه الشروط بتحديث هذه الصفحة. 

نستخدم معلومات الجهاز التي نجمعها لمساعدتنا في تحسين موقعنا (على سبيل المثال ، من خلال إنشاء تحليلات حول كيفية تصفح عملائنا والتفاعل معهم الموقع، ولتقييم نجاح حملاتنا التسويقية والإعلانية).

قد نقوم بتحديث سياسة الخصوصية هذه من وقت لآخر لنعكس، على سبيل المثال، التغييرات التي تطرأ على ممارساتنا أو لأسباب تشغيلية أو قانونية أو تنظيمية أخرى.

نشارك معلوماتك الشخصية مع أطراف ثالثة لمساعدتنا في استخدام معلوماتك الشخصية ، كما هو موضح أعلاه. على سبيل المثال ، نستخدم Google Analytics لمساعدتنا على فهم كيفية استخدام عملائنا للموقع.

إن شركة Google تستخدم تقنية الكوكيز لتخزين المعلومات عن إهتمامات الزوار، إلى جانب سجل خاص للمستخدم تسجل فيه معلومات محددة عن الصفحات التي تم الوصول إليها أو زيارتها، وبهذه الخطوة فإننا نعرف مدى اهتمامات الزوار وأي المواضيع الأكثر تفضيلا من قبلهم حتى نستطيع بدورنا تطوير محتوانا الخدماتي والمعرفي المناسب لهم.

كيف يتم استخدام المعلومات الشخصية

تبادل المعلومات الشخصية الخاصة بك

التغييرات

تصف سياسة الخصوصية كيفية جمع معلوماتك الشخصية واستخدامها ومشاركتها عند زيارتك ​

سياسة الخصوصية

تم التحديث في 23 مايو 2023

h3

H3

h3

H2

h3

H2

H1

H1

B1

P2

B1

BL1

Old typography system

h3

H3

h3

H3

h3

h3

B1

B1

B1

B1

B1

B1

B1

h3

H3

H1

H1

B1

B1

H1

48/60

Expo-Arabic

Bold

0

هذا النص خاص بموقع اقرأ-تك وهو عبارة عن موقع تقني

H2

40/52

Expo-Arabic

Bold

0

هذا النص خاص بموقع اقرأ-تك وهو عبارة عن موقع تقني

H3

32/40

Expo-Arabic

Medium

0

هذا النص خاص بموقع اقرأ-تك وهو عبارة عن موقع تقني

P1

22/32

Dubai

Medium

0

هذا النص خاص بموقع اقرأ-تك وهو عبارة عن موقع تقني

BL1

22/28

Dubai

Medium

0

هذا النص خاص بموقع اقرأ-تك وهو عبارة عن موقع تقني

Bn1

20/20

Expo-Arabic

Bold

0

هذا النص خاص بموقع اقرأ-تك وهو عبارة عن موقع تقني

L1

18/28

Expo-Arabic

Medium

0

هذا النص خاص بموقع اقرأ-تك وهو عبارة عن موقع تقني

Flipping Card
Flipping Card

Determine Sizes

Determined font sizes & line heights

I aligned Dubai’s base font size with Expo-Arabic, as users preferred it, and it was already working well for us & applied a Minor Third (1.2) scale rule to establish the system. (5)

Put the typography system in use

I created a detailed style guide outlining heading hierarchy, element usage, and design examples.

Flipping Card
Flipping Card

System in use

الفقرة الأولى

يتطور مجال صناعة البرمجيات بسرعة هائلة حيث نستقيظ كل يوم علي تقنيات و برامج جديدة و ينقسم مهندسي و مطورين البرمجيات بين تبني التقنيات الجديدة و بين الثبات علي أدواتهم الحالية. و سنحرص دومّا علي تحديث خرائط تعلمّنا لتقدم لك كل التقنيات التي تسهل عليك صناعة البرمجيات.

الفقرة الأولى

يتطور مجال صناعة البرمجيات بسرعة هائلة حيث نستقيظ كل يوم علي تقنيات و برامج جديدة و ينقسم مهندسي و مطورين البرمجيات بين تبني التقنيات الجديدة و بين الثبات علي أدواتهم الحالية. و سنحرص دومّا علي تحديث خرائط تعلمّنا لتقدم لك كل التقنيات التي تسهل عليك صناعة البرمجيات.

Inter as body text

Dubai as body text

Flipping Card
Flipping Card

Preferen-ce Study

80% of users preferred Dubai as body text during the second preference study. (4)

Flipping Card
Flipping Card

Done With Less

Got the job done with less,

All the improvements were implementable despite the resources and technical limitations.

Minor changes & significant results.

The impact has been significant, resulting in a more seamless and cohesive user experience, even though the focus has been minor improvements.

Flipping Card
Flipping Card

Big Results

Flipping Card
Flipping Card

People Alignment

Delivered an experience people need,

The user experience is more intuitive and consistent making the learning process easier and enjoyable.

Flipping Card
Flipping Card

Business Alignment

The business loves,

Every design decision was aligned with business goals, ensuring the founder’s buy-in.

Flipping Card
Flipping Card

Enjoyable Work

& the team enjoys working on.

My technical background helped me consider the technical constraints of each decision, resulting in an accessible development experience.

Flipping Card
Flipping Card

Over- whelmed

It's okay to feel overwhelmed..

I'm only human, and it's okay to feel overwhelmed by tasks that seem huge. The key often is "just start it."

& Great presentation/handoff pays off.

I iteratively refined my delivery for clarity & a positive tone. The feedback consistently reflected positivity, boosting my confidence in how my work was received.

Flipping Card
Flipping Card

Great Feedback

A sweet ending,

& learned that..

Personal goal achieved..

— End of case study —