Volunteer Role: Professional Frontend Developer (Self-Directed) — NESA-Africa 2025

Volunteer Role: Professional Frontend Developer (Self-Directed) — NESA-Africa 2025

Org: Santos Creations Educational Foundation (SCEF)

Project: New Education Standard Award – Africa (NESA-Africa 2025)

Location: Remote (Africa & Diaspora welcome)

Commitment: 12–15 hrs/week (flexible, Oct–Dec peak) • Start: ASAP

Statement of Problem (what you’re fixing)

• High bounce + drop-offs: Key entry pages (Home, Nominate, Vote, Tickets) show steep early exits—forms feel long, copy dense, and mobile validation inconsistent.
• Fragmented flows: Users can’t easily progress Nominate → Vote → Tickets → Chapters → Advisors; navigation, CTA hierarchy, and page micro-copy aren’t guiding journeys.
• Inconsistent UI: Buttons, spacing, typography, and card layouts vary by page; limited component re-use and no mini design system.
• Performance + a11y debt: Mixed image sizing, render-blocking scripts, and color-contrast issues hurt Core Web Vitals and accessibility (WCAG 2.2 AA not consistently met).
• Localization & SEO gaps: i18n scaffolding is incomplete (EN/FR/PT/AR), metadata is uneven, and structured data is missing on key templates.
• Analytics blind spots: Limited funnel event tracking; no clear diagnostics for form abandonment or device-specific failures.
• Edu-tourism UX missing: The “discover Africa, attend gala, visit chapters” storyline isn’t surfaced in the frontend experience.

Goal: Reduce bounce rate by up to 95% on priority pages, lift funnel completion 20–40%, and ship a fast, accessible, consistent interface across 99+ pages—infused with an Africa edu-tourism journey.

Frontend SWOT (site review)

Strengths

• Strong mission + trust assets (governance/COI, SDG4/Agenda 2063), rich content, and active programs (NESA, EduAid, RMSA).
• Broad page coverage (≈99+) ready for componentization.
• Clear brand palette (dark blue / gold / black) and distinct voice.

Weaknesses

• Inconsistent styling and form UX; multi-step tasks feel heavy on mobile.
• Navigation and CTA hierarchy not guiding core actions.
• Performance/a11y issues: unoptimized media, contrast/keyboard gaps.
• Thin i18n/SEO groundwork; duplicate patterns inflate maintenance.

Opportunities

• Build a mini design system (tokens + shadcn/ui/Tailwind) to unify 99 pages quickly.
• Re-architect funnels (Nominate/Vote/Tickets/Chapters/Partners) with micro-copy, progressive validation, and autosave.
• Add edu-tourism layers: country guides, chapter maps, gala trip planning.
• Implement robust analytics (GA4/PostHog) and A/B test forms/CTAs.
• Ship Lighthouse ≥95 (Perf/Acc/SEO/Best Practices) across templates.

Threats

• Traffic spikes near nominations/voting may degrade UX if caching and media aren’t optimized.
• Accessibility or privacy missteps (NDPR/GDPR) could erode trust.
• Fragmented code could slow release velocity during peak weeks.

What you’ll do (no Figma; high autonomy)

• IA & flow overhaul: simplify key funnels with clear steps and success states.
• Design system lite: tokens (color/type/spacing), buttons, forms, cards, nav, modals.
• Forms that finish: inline validation, save-progress, keyboard/assistive tech friendly.
• Performance & a11y: optimize images/fonts, code-split, semantic markup; WCAG 2.2 AA.
• Localization & SEO: i18n scaffolding, meta/schema, sitemap, helpful 404/500.
• Analytics: event maps for each funnel; abandonment telemetry; simple A/Bs.
• Edu-tourism UX: chapter discovery, cultural snippets, travel pointers woven into flows.

Preferred stack (flexible)

Next.js/React, TypeScript, Tailwind, shadcn/ui, Framer Motion, React Hook Form + Zod, next-i18next (or similar), Vercel, GA4/PostHog, AXE/Lighthouse. (If you ship faster on an adjacent stack, make your case.)

Milestones (outcome-first)

1. Week 1-2 : UX audit + plan; header/nav/footer; tokens + core components.
2. Weeks 1-2: ship Nominate / Vote / Tickets e2e; analytics + error states.
3. Weeks 3: Partners/Chapters/Advisors; SEO+i18n; a11y/perf passes.
4. Week 3: polish, QA, docs, and handover with before/after metrics.

Success metrics

• Bounce rate ↓ up to 95% on key entry pages (stretch goal; iterate to reach)
• Funnel completion ↑ 20–40% (Nominate/Vote/Tickets)
• Lighthouse ≥95 on core templates
• Zero critical a11y blockers (WCAG 2.2 AA)

Guardrails

Integrity firewall: Funding does not influence award outcomes.

Privacy by design (NDPR/GDPR): explicit consent, data minimization, retention controls.

Security best practice; brand approvals for external assets.

Ambassador benefits

• Official SCEF/NESA Frontend Ambassador status + certificate & LinkedIn recommendation
• Credit on site & Gala roll, free online Gala ticket
• Portfolio case study with measurable impact; priority for future paid roles
• Network access (partners, judges, chapters) + Africa edu-tourism showcase footprint

How to apply (email both—one thread)

nesa.africa@gmail.com • babasholasantos.aderibigbe@nesa.africa

Send:

• Links to 2 shipped sites (what you changed + measurable outcomes)
• A 5-bullet plan to hit Lighthouse ≥95 without Figma
• Your availability (hours/week, timezone) and earliest start date

Questions? Same thread: nesa.africa@gmail.com + babasholasantos.aderibigbe@nesa.africa.