Enriching Arabic technical content: Eqraatech
fixing usability issues
to enhance the Eqraatech learning platform UX
Between July & Aug. 2023
I worked as the
Solo Product Designer
In the B2C sector
With 2 Tech Wizards
Founders ≡ SWEs
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.
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
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?
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.
& 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?
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
هذا نص بسيط
هذا نص بسيط
هذا نص بسيط
هذا نص بسيط
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.”
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
هذا النص خاص بموقع اقرأ-تك وهو عبارة عن موقع تقني
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.
الفقرة الأولى
يتطور مجال صناعة البرمجيات بسرعة هائلة حيث نستقيظ كل يوم علي تقنيات و برامج جديدة و ينقسم مهندسي و مطورين البرمجيات بين تبني التقنيات الجديدة و بين الثبات علي أدواتهم الحالية. و سنحرص دومّا علي تحديث خرائط تعلمّنا لتقدم لك كل التقنيات التي تسهل عليك صناعة البرمجيات.
الفقرة الأولى
يتطور مجال صناعة البرمجيات بسرعة هائلة حيث نستقيظ كل يوم علي تقنيات و برامج جديدة و ينقسم مهندسي و مطورين البرمجيات بين تبني التقنيات الجديدة و بين الثبات علي أدواتهم الحالية. و سنحرص دومّا علي تحديث خرائط تعلمّنا لتقدم لك كل التقنيات التي تسهل عليك صناعة البرمجيات.
Inter as body text
Dubai as body text
80% of users preferred Dubai as body text during the second preference study. (4)
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.
Delivered an experience people need,
The user experience is more intuitive and consistent making the learning process easier and enjoyable.
The business loves,
Every design decision was aligned with business goals, ensuring the founder’s buy-in.
& the team enjoys working on.
My technical background helped me consider the technical constraints of each decision, resulting in an accessible development experience.
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.
