# UX, accessibility and client-advocate review

Reviewer disclosure: I authored Option C, then evaluated A, B and C against the same criteria. This is a cross-option review, not a claim of independent authorship for C. Source inspection is complete; visual scoring awaits the shared 390px/1440px screenshots.

## Review scope

The brief asks for three concise, visual, credible course-page directions, with screenshots, voice messages, result images and an actual contact box. Scores judge structure and usability of the prototype. Mock messages, simulated voice players and illustrative results cannot establish actual student outcomes.

All options provide the required media/evidence, local image dialogs, a real teaching excerpt, one course/one offer, FAQ and three-field contact box. Shared code provides native dialog keyboard behavior, pressed state for simulated audio, contact validation and live confirmation. None sends messages or accepts payment.

## Source findings pending screenshot pass

- C crops portrait screenshot/result assets with `object-fit:cover` and fixed landscape heights. This can hide the original message header, lower replies and context. Full-image containment and proportional aspect ratios are preferable when readable evidence is the point. A and B currently preserve the complete evidence images.
- All three use the same real 18-second teaching excerpt without captions or a verified transcript. Add captions and an adjacent short transcript for accessibility before production.
- A and C use approximately 13px input text. iOS Safari may zoom the page on field focus at that size; use 16px input text while retaining smaller field labels. B already uses 16px fields.
- C placeholder color `#8b7865` against input `#faf6ef` is approximately 3.92:1. Increase placeholder contrast to at least 4.5:1; visible labels already exist.
- Prototype disclaimers, context labels and durations often use 9–11px text across the options. These labels do important trust work and need enlargement rather than becoming decorative. B has an 8px voice disclaimer at intermediate widths.
- B's mobile header exposes a proof/course/contact navigation but hides its header CTA. C's mobile header hides all navigation and keeps offer access. A retains contact access in its header. Each remains usable, but B provides the best quick access to the comparison criteria without scrolling.
- Shared native enrollment dialog correctly states that the experience is a preview. Contact success state correctly states that no message was sent. The CTA route is reviewable and avoids false completion.

## Visual review: 1440px and 390px

Inspected each option's standalone hero and contact screenshots at both sizes, and inspected the desktop full captures. The standalone captures are suitable for comparison. Desktop full captures show horizontal compositing seams and shifted upper content, while standalone captures and parent-reported client/scroll widths show no overflow. Do not infer a real layout defect from those full-image seams or use these full captures in the client presentation.

### A — teaching first

Strongest current demonstration of something real: the opening presents a usable teaching excerpt before the mock evidence. The light CTA is easy to distinguish from supporting links, and the mobile contact form is well grouped. The course name is subordinate to an aspirational headline, however; B makes the subject more immediate. Its evidence treatment is readable in principle because complete image proportions are retained. On mobile the full sequence of six portrait images creates considerable scroll, even though text is short. The hero is visually substantial rather than compact; it consumes almost the full 990px desktop capture before the course facts.

Best use: show Majd's actual teaching immediately and let the delivery carry the offer. Weakness for this brief: credible course footage arrives early, but student voices and results require more scrolling than B/C's early proof framing.

### B — clearest offer and visual storefront

Best direct answer to Majd's “obvious and easy” request: the opening visibly names the course, shows format facts and puts a content/result composition alongside it. The blue frame establishes a clear visual subject, and the contact box has the strongest field typography. Evidence cards retain full portrait content after revision, enabling their context to stay visible. The repeated image in the hero and results is the same example; it must not be counted as two cases.

The inspected mobile screenshot has a real reading bug: hiding the headline `<br>` joins “دورة” and “صناعة”, and the short description also joins words around hidden breaks. Add literal spaces before/after responsive line breaks. The hero's overlay is visually appealing but blocks part of the work sample; keep an unobstructed version in the next section, as currently provided.

Best use: the default recommendation for the client brief, after fixing responsive word spacing. Weakness: the genuine teaching excerpt occurs after several mock proof items, so an initial visitor sees illustrative credibility before actual teaching evidence.

### C — strongest personal and voice-led direction

Most distinct personal tone: the portrait, handwritten greeting and chat card create an identifiable instructor presence. The voice section starts immediately after the opening, which directly addresses the request for messages people can hear. The contact box is welcoming and has a clear submit action. This is an actual compositional alternative to A/B.

It has the most actionable defects in the inspected version: portrait proof images are cropped into landscape windows; the mobile hero joins words around hidden breaks and becomes awkwardly wrapped; the small labels are harder to read than B's primary text. These are usability faults, not matters of preference. Its course title is also a small eyebrow while the large headline is aspirational. The proof cards use generic thematic captions rather than distinguishing partial viewing, reported completion and consulting; use those contexts when real material replaces mocks.

Best use: a warmer candidate if Majd wants the instructor and voices to lead. Weakness: until cropping and responsive spacing are fixed, it is less clear and inspectable than A/B.

## Scores

Scores below reflect the inspected prototype version, before the outstanding C cropping and B/C spacing corrections. They are comparative design judgments, not accessibility certification or measured conversion outcomes.

| Option | Scanability | Mobile ease | Evidence usability | Contact/enrollment usability | Accessibility |
|---|---:|---:|---:|---:|---:|
| A | 8 | 8 | 9 | 9 | 7 |
| B | 9 | 7 | 9 | 9 | 8 |
| C | 7 | 6 | 6 | 9 | 7 |

Recommendation: lead the client comparison with B for immediate clarity, A for actual teaching proof, and C for personal/voice-led trust. No winner should be presented as a conversion finding. Once the straightforward C/B defects are corrected, compare the structures again rather than preserving these pre-fix score penalties.

## Priorities before client handoff

1. Fix B/C hidden-break spacing and C full-evidence containment.
2. Replace the artifacted full-page captures or present stable section captures.
3. Raise A/C field font size to 16px; darken C placeholder text; enlarge the smallest trust labels, especially B's 8px voice disclaimer.
4. Align every card's caption, enlarged-dialog caption and actual graphic context. If classifying a mock as consulting, the graphic itself must not say it is student work.
5. Add an accessible transcript/caption path for the actual teaching excerpt before production, then repeat keyboard and interaction checks on the final copy/assets.
## Final refinement review — supersedes the earlier scores

Inspected the final standalone hero, feedback, results and contact captures at 390px and 1440px, including the repaired C evidence framing. B/C headlines now retain word separation; C shows complete portrait evidence; fields are enlarged; the mobile evidence rails expose explicit previous/next buttons and a 1/3 position counter. The rails reduce repeated vertical scrolling while keeping evidence discoverable. The earlier cropping, joined-word and field-size penalties no longer apply. Full-page artifact captures are excluded from the final presentation.

The parent-provided functional report confirms all three videos play for 18 seconds with one subtitle track and no media errors; one voice simulation runs at a time; next controls reach 2/3; enrollment opens; and the local contact confirmation receives focus. Parent also reports modal Escape/focus return checks passing and computed contrast issues corrected. The subtitle track is ASR-derived and remains subject to transcription uncertainty; these checks are prototype QA rather than a formal accessibility audit.

| Option | Scanability | Mobile ease | Evidence usability | Contact/enrollment usability | Accessibility |
|---|---:|---:|---:|---:|---:|
| A | 8 | 8 | 9 | 9 | 8 |
| B | 9 | 9 | 9 | 9 | 8 |
| C | 8 | 8 | 9 | 9 | 8 |

**Recommendation remains B for Majd's explicit clarity brief.** Its course title and facts require the least interpretation. A remains the strongest actual-teaching-first alternative; C remains the warmer instructor/voice-first alternative. C is now a usable contender rather than a candidate held back by fixable visual defects. No remaining screenshot finding blocks this design comparison. Actual proof assets, final commercial terms and connected contact/payment behavior remain production inputs, not prototype defects.