AlMaghrib Events Page

Before building anything, we needed the exact design language of almaghrib.org — not an approximation, but the actual computed values that define the brand.

Claude navigated the live site, read computed styles from every element, and produced a 757-line reference document: 4 font families, 40+ color values organized by role, 11 button variants with exact sizing, 4 card types, the complete footer specification, and animation timing curves.

This became the single source of truth. Every design decision that followed referenced it, and the automated brand-compliance review in Step 7 audited the prototypes line-by-line against it.

Designer takeaway: Minutes to extract what takes days of manual inspection. You start with a complete brand spec, not a mood board.

A first-time visitor browsing casually needs something different from a returning student checking dates in her city. Before choosing a visual direction, we mapped who uses this page and what they need.

Claude launched a research sub-agent that produced five personas specific to AlMaghrib's audience:

• Omar (Newcomer) — First visit. Needs clear value proposition and social proof.
• Fatima (Parent) — Registering kids. Needs schedule clarity and logistics.
• Amira (Regular) — Returning student. Wants to filter by city and find new courses fast.
• Yusuf (Traveler) — Comparing events across cities, weighing dates against travel cost.
• Sarah (Browser) — Found AlMaghrib on social media. Exploring, not committed yet.

Each persona came with a journey map. The UX strategy extended this into a conversion funnel, mobile-first approach, and accessibility plan. These directly shaped the design briefs: Direction A for Omar and Fatima, B for Amira and Yusuf, C for Sarah.

Designer takeaway: Research artifacts that would take days of workshops, generated in minutes. You review and refine — not create from scratch.

Placeholder content creates a gap between what stakeholders see and what the product will feel like. We eliminated that by pulling live data from AlMaghrib's public API.

Claude fetched the API response, parsed it, and extracted 21 events across 19 cities and 2 continents: titles, instructor names and photos, dates, pricing in three currencies (USD, CAD, GBP), poster images, background images, and registration URLs.

This data was embedded directly into each prototype. Stakeholders see their own events with real prices and real photos — so feedback becomes specific ("Journey Through Jannah looks cropped") instead of hypothetical.

A build spec defined the shared page structure for all three directions, and a data schema documented every API field and its display mapping.

Designer takeaway: Real data in prototypes from day one. Stakeholder feedback is concrete and actionable when they see their own content.

Rather than commit to one direction upfront, we defined three distinct visual approaches — each with a different personality, layout, and target persona.

Direction	Personality	Layout	Target Persona
A: Community Hub	Warm, people-first	Horizontal cards, instructor avatars prominent, 2-column grid	Omar, Fatima (newcomers, parents)
B: Clean Directory	Information-dense, scannable	List/table layout, small thumbnails, sort controls	Amira, Yusuf (regulars, planners)
C: Immersive Showcase	Visual, cinematic	Large image-dominant cards, dark theme, hover reveals	Sarah (browsers, explorers)

Each brief mapped the design system values from Step 1 to concrete decisions: typography, color emphasis, card anatomy, interaction patterns, and hover states. Specific enough to build from without ambiguity.

Designer takeaway: Describe the mood, get a full design brief. Three directions explored in the time it takes to set up one Figma artboard.

Each design brief became a self-contained HTML file. No build tools, no dependencies. Open it in a browser and it works — filtering, responsive layout, scroll animations, real data.

In a traditional workflow, briefs become static Figma frames. Here, the brief became a working page. Click "North America" and see 17 events filter. Resize the window and watch the layout adapt. Tap a card for instructor details and pricing.

All three prototypes replicate the live almaghrib.org footer — correct logo, verified URLs, matching typography. The constraint was deliberate: single-file HTML. Send it as an email attachment, open in Chrome, done.

Designer takeaway: Working prototypes, not static frames. The review conversation shifts from "imagine this would scroll" to "scroll it and tell me what you think."

Claude built three options. Kamran made the judgment calls — clicking through filters, scrolling on desktop and mobile, comparing visual quality:

• Direction B dropped: Too dense, poor visual quality. The information-heavy approach sacrificed the warmth an events page needs.
• Direction C strongest: Cards answer "who, what, where, when" at a glance. Dark theme with large images creates impact. Hover reveals add depth without clutter.
• Direction A needs work: Card sizing inconsistent on desktop. "Journey Through Jannah" broken on desktop. Price too prominent — should move to expanded view only.

The key decision: date, instructor, topic, and location are primary. Price is secondary. This shaped every iteration in Step 7.

This step took minutes — but without a human eye for quality, Claude would iterate equally on all three directions, polishing one that should have been dropped.

Designer takeaway: Your eye for quality drives the direction. Claude executes. Without that judgment call, 20 iteration cycles would have been wasted.

Four phases of autonomous refinement, each doing work that would take a designer hours.

Iteration (10 cycles per direction). A design-iterator agent ran a screenshot–analyze–improve loop: take a screenshot, identify the single most impactful visual improvement, implement it, verify with another screenshot. Direction A: standardized card images, removed visual clutter, improved text hierarchy, fixed a scroll animation bug. Direction C: refined card gradients for legibility, added purple glow to active filters, strengthened the hero overlay.

Brand compliance (2 agents, parallel). Two review agents compared each prototype's code against the 757-line design system from Step 1. Direction A received 9 fixes, Direction C received 12 — correcting typography, spacing, and color values to match the live site exactly.

Footer verification. Claude navigated to the live site, extracted the correct logo URL, all navigation links, social media URLs, and copyright text. Both prototypes updated with verified data.

Designer takeaway: 20 screenshot-and-fix cycles plus automated brand auditing — quality assurance that takes hours, compressed into minutes.