UX Strategy · Web Design · Financial Platform
Arab Finance — The New Era 2026
A full UX strategy and visual redesign of Arab Finance — one of Egypt's largest financial news and data platforms. The project repositioned the platform from a content-heavy news site into a structured financial content ecosystem built around trust, clarity, and monetization.
View Live PrototypeClient
Arab Finance
Services
UX Research · UX Strategy · UI Design · Design System · Responsive Design
Timeline
8 Weeks
Year
2026
Case Study Video
Project Screens
Case Study
The situation
Arab Finance is one of Egypt's biggest financial platforms — but it had grown organically into a content dump. No clear hierarchy, ads competing with editorial, media buried, and a homepage that didn't communicate what the platform was actually for.
Strategic shift
I repositioned the product around three clear pillars: Company Profiles (data), Media Hub (video & podcast programs), and a Newsletter (trust-building + free-to-premium path). The homepage became a value gateway, not a news feed.
The user journey became: land → understand the value → consume → subscribe → upgrade. Monetization as a natural outcome of trust, not a wall.
Design system
Built a unified grid system across all breakpoints with explicit reflow rules — not just scaling. Typography tuned for financial data. Color hierarchy simplified to guide attention. Full RTL/LTR parity with Arabic (Cairo) and English (Manrope).
Outcome
Clear structure that guides users to conversion. Media content packaged as a sponsorship-ready product. Consistent system from widescreen to mobile.
Design System
Color Palette
Purple 950
#0F0B2D
Gradient Start / Dark bg
Purple 800
#2D1A6E
Gradient Mid / Deep Purple
Purple 500
#6B4CC8
Gradient End / Brand Violet
Navy 950
#060E20
Primary Text
Navy 900
#0A1A3A
Surface Dark
Navy 500
#2456B0
Secondary
Positive
#22C55E
Market Up / Success
Negative
#EF4444
Market Down / Error
Typography
Manrope (EN) · Cairo (AR/RTL)
| Style | Size | Weight | Font |
|---|---|---|---|
| Display | 32px | Bold 700 | Manrope / Cairo |
| Heading 1 | 24px | SemiBold 600 | Manrope / Cairo |
| Heading 2 | 18px | SemiBold 600 | Manrope / Cairo |
| Subtitle | 16px | Medium 500 | Manrope / Cairo |
| Body | 14px | Regular 400 | Manrope / Cairo |
| Caption | 12px | Regular 400 | Manrope / Cairo |
| Label / Tag | 11px | SemiBold 600 | Manrope / Cairo — UPPERCASE |
System Notes
- 4px base grid — spacing scale: space-1 (4px) → space-12. All spacing must be multiples of 4px.
- Responsive breakpoints: Desktop 1440px · Laptop · Tablet 768px · Mobile 390px
- RTL/LTR parity — Arabic (Cairo) + English (Manrope) at every type scale
- Semantic tokens: positive #22C55E (market up) / negative #EF4444 (market down) / warning / brand
- Navbar: 1440×127px · gradient-brand-90 background · Logo 188px left · 2 CTAs right-aligned
- Buttons: 3 types — Primary (gradient fill) · Secondary (outlined purple/500) · Dark (navy fill) · Height always 36px
- Sector Nav: 37px height · 76px per tab · Active = purple fill + 4px bottom border
- Labels: 12 types · 28px height · SemiBold 11px UPPERCASE · One badge per card only
- CSS var: --gradient-brand-90: linear-gradient(90deg, #0F0B2D 0%, #2D1A6E 50%, #6B4CC8 100%)
- CSS var: --btn-height: 36px · --btn-radius: 6px · --btn-pad-x: 16px · --btn-font: Manrope SemiBold 14px
- Never use approximate solid colors for gradients — always apply --gradient-brand-90
- All Arabic text: font-family Cairo, direction rtl. Labels mirror to top-right in Arabic layouts.