Available for work
AR
← Back to case studies
Education Web UX UI

Academy — A clearer bilingual learning experience

A learning experience designed to help users move through courses, lessons, and educational content with more clarity and less friction across Arabic and English.

Navigation clarity ↑ Content overload ↓
Client Personal Product
Year 2026
Role Lead Designer & Frontend Developer
Deliverables Education UX, UI System, Frontend
Academy — A clearer bilingual learning experience
Overview

The academy needed to feel rich in content without becoming visually heavy. The goal was to shape a bilingual educational experience that stays organized as courses, lessons, and chapters grow over time.

The Problem

Users needed better structure between course pages, lesson browsing, chapter grouping, and supporting details like duration, level, and navigation context.

The Fix
  • Reworked the hierarchy of course hero, details, and chapter structure.
  • Improved RTL/LTR consistency across content-heavy layouts.
  • Created a cleaner relationship between lessons, videos, and chapter anchors.
  • Made durations and course metadata feel more useful and less decorative.
The Solution

The final direction used softer surfaces, clearer information grouping, and calmer spacing to make the academy feel more premium and easier to scan.

Outcomes
  • More structured course browsing across chapters and lessons.
  • Cleaner bilingual reading flow for Arabic and English users.
  • A stronger visual identity that still feels part of the main site.
HEURISTIC EVALUATION

Applied usability heuristics to identify friction and ship targeted improvements.

This review focused on where educational interfaces typically become overwhelming: hierarchy, navigation memory, and the clarity of content states.

Visibility of system status

Finding

Course progress and contextual details were not prominent enough.

Fix

Improved metadata placement and supporting details hierarchy.

Recognition rather than recall

Finding

Users had to remember where lessons and chapter anchors lived.

Fix

Introduced clearer chapter grouping and stronger anchor affordances.

Match with the real world

Finding

Educational terminology and grouping felt too system-led.

Fix

Shifted the layout toward chapters, lessons, and learning flow.

Aesthetic and minimalist design

Finding

Dense sections reduced readability and visual calm.

Fix

Added breathing room, stronger separation, and calmer cards.

APP SCREENS

Have a project worth designing well? Tell me what you’re shipping. Free 30-min intro — reply within 24h.

Book a 30-min intro ↗
⚡ LIMITED AVAILABILITY

Got a project worth shipping?

Let’s Talk ↗