the front door. information distributed across distinct visual zones — colourful blocks, each with their own weight. hero = big colour block, bold type, one dominant feeling: "this is about YOUR problem." topics as individual cards — scannable at a glance. audience cards so the learner self-identifies fast. second CTA catches scrollers.
Screen 1
LANDING PAGE
ZONE 1 — HERO
headline: "understanding community engagement"
subhead: learn how to secure community buy-in to drive traction and strengthen your impact
the "why now" hook — you've got a strong solution but traction is slower than expected, uptake uneven, community not engaging
~~~ ENROL NOW ~~~
ZONE 2 — WHAT YOU'LL COVER
meaningful engagement + traction
defining "community" across contexts
challenging your assumptions
colonial histories + power dynamics
gender, age, religion, class + trust
comms channels that actually reach people
ZONE 3 — WHO IS THIS FOR
INNOVATORS + RESEARCHERS working on community-dependent projects
PRACTITIONERS strengthening adoption, building evidence, scaling
FUNDERS + ORGS designing inclusive monitoring + evaluation
ZONE 4 — EMMA
[ PHOTO ]
Dr Emma Heywood
founder, The 80:20 Pathway
BIO
15+ yrs working w/ communities in the global south. francophone west africa. conflict + crisis contexts. comms, behaviour change, engagement. UN advisory.
ZONE 5 — DETAILS STRIP
4 weeks
~2 hrs/week
100% online
introductory
sequential
ZONE 6 — SECOND CTA
~~~ ENROL NOW ~~~
pricing — does the landing page show price? or does "enrol" go to a plan picker (individual vs org)?
↓
minimal — just establishing the login. org-account users — do they arrive via invite link from their admin? different path?
Screen 2
ACCOUNT CREATION
fields: name / email / password / org (optional)
↓
sets expectations. here's how this works.
Screen 3
WELCOME + ORIENTATION
what this course is about — move beyond consultation toward meaningful collaboration. embed engagement in design, delivery, evaluation.
how it works — 5 modules, sequential, ~2hrs/wk, 4 weeks. progress saves automatically. each module: videos + reading + practical exercises.
what you'll take away — comms strategies, feedback interpretation, tools for traction + sustainability
~~~ BEGIN MODULE 1 ~~~
↓
this is the moment the student meets emma (if they haven't already). critical for the "energetic but professional" register.
Screen 3.5
EMMA'S INTRO VIDEO
↓
sidebar card on the left (tall). video thumbnail cards on the right in a grid. the student sees the whole module at a glance.
both of these are entry points into Screen 5 — clicking the episode title in the sidebar OR the video card both open the same episode page.
Screen 4
MODULE 1 LANDING
Welcome to Module 1: Understanding Context
progress: 0 of 5 complete
⏳ 1. Understanding Context↳ Resources
⏳ 2. The Global South: Power + Equality↳ Resources
⏳ 3. Solar Grids in East Africa↳ Resources
⏳ 4. Decolonising Innovation↳ Resources
⏳ 5. Bridging the Innovation Divide↳ Resources
✅ = complete · ⏳ = not yet
▶
Ep 1: Understanding Context
▶
Ep 2: The Global South — Power + Equality
▶
Ep 3: Solar Grids in East Africa
▶
Ep 4: Decolonising Innovation
▶
Ep 5: Bridging the Innovation Divide
↓
learner works through items here, reflecting on their own project. inline — no navigation away from the page.
returns to Screen 4. that episode now shows ✅. student picks next episode or continues sequentially.
video stays visible (sticky) as the student scrolls through the left panel. it's the anchor — everything on the left extends what they just watched.
Screen 5
EPISODE PAGE
each episode uses the Screen 5 template.
MODULE 1 · EPISODE 1 OF 5
Understanding Context
READ
Why Context Matters in Innovation
[ full text from emma's google doc goes here ]
DO (INTERACTIVE)
Contextual Alignment + Institutional Fit
TAKE IT TO THE FIELD
↓ DOWNLOAD CHECKLIST (PDF)
Return button to Module 1 hub
Video: Understanding Context
↓
this is what the "DO (INTERACTIVE)" section of each episode expands into. could be: checkboxes, drag-and-drop, matching, connectors, scenario decisions, memory games... each episode can take a DIFFERENT form — the surprise is the point. FORMAT TBD — waiting on emma's wish list.
Screen 6
INTERACTIVE COMPONENT
[ PLACEHOLDER ]
emma's dream quiz formats needed — the creative engine of the whole experience
emma's dream quiz formats needed before this screen can take shape
↓
this is what the "take it to the field" download looks like when opened — a PDF checklist rendered in browser. printable. designed for field use. the learner downloads this after completing the interactive version on-screen.
Screen 7
DOWNLOAD CHECKLIST
80:20 — Module 1, Episode 1
Checklist: Contextual Alignment + Institutional Fit
[ placeholder — real checklist items from emma's docs ]
↓
student lands here after finishing episode 5. surface a summary of their checklist responses? e.g. "you flagged 3 of 5 alignment items as needing attention" — adds reflection but adds complexity.
completion badge / cert? org admins may need proof their people did the training.
Screen 8
MODULE 1 COMPLETE
summary of what they covered — context, power dynamics, case study, decolonising design, innovation divide reminder: downloaded checklists available in your account anytime
~~~ CONTINUE TO MODULE 2 ~~~