Spencehouse
Include to Play

Wireframes

This is where we plan the structure and user journey. Don’t worry about the visual design yet, here we’re just planning.

AOnboarding — How a user gets started

There are three ways to start a module
Each learning module is a separate asset. There is no module to module navigation. Users must sign in to start.

01 · New user — 4 steps + confirm

Welcome
→ Acknowledgement of Country
→ Name
→ Role
→ State
→ Email
→ Confirm code
→ Module begins
One question per screen. Each answer feeds the next screen’s copy.

02 · Returning — by email

Welcome
→ “Resume”
→ Email
→ Module, at last position
No password — email is the key. An unknown email offers the new-user path instead of erroring.

03 · Returning — remembered

Cookie found
→ “Welcome back, Nadia”
→ Module, at last position
Zero taps to resume. Always offers “Not you?” to fall back to the email path.
Why this order? Name first — it’s the easiest thing to give and it personalises everything after. Email last — it’s the one people hesitate over, and by then they’ve already invested three answers.
Open questions.
  • Do we need to confirm email? Makes it more secure. Adds a step. YES
  • Is state captured only for reporting? YES
  • Do we need to capture actual playgroup name? NO - but add role
  • Do users all have a unique email? Does anyone share an email? YES, NO
  • Do users share a device? NO

BSeries Welcome

The homepage for the e-learning series
Every module used to repeat its own welcome and Acknowledgement of Country. The Acknowledgement is now a single screen before sign-in, and this welcome happens once, after it.

Welcome message

The original welcome message was too long. Cut to less than half so module links are more prominent.

Primary content

Module 1
Module 2 (built)
Module 3
Resource Pack
Modules are not locked to order — a facilitator can open any of them. Module 2 is the only one with real content so far. Resource pack can be downloaded from here or the menu.

Additional info

Funding announcement
Why once, not per module? The intro and Acknowledgement don’t change between modules — a facilitator doing all three in one sitting shouldn’t sit through the same two screens three times.
Open questions.
  • Does a returning facilitator see this intro again, or land straight on the index? NO, returning user should land on the page they are up to
  • Do we want Modules 2 and 3 “locked” so they can only be accessed after module one is complete, or is it more like a suggestion that they do in order and the app will not restrict access to the content? NO, let users access in any order.

CModule Content

E-learning modules
A module title screen confirms you opened the right module, then a one-time tooltip tour, then the module intro and home that branches into the three Practice Tips.

01 · Arrival + tooltips

Module title
→ 3 navigation tooltips
Title screen, plus a one-time tooltip tour. Worth deciding whether a returning facilitator sees the tour again on a second module.

02 · Into Module 2 — framing

Supporting Families
→ Module outcomes + 3 Practice Tips
The Module 1 check now sits as a tip on the title screen, so nothing here interrupts a facilitator who is in the right place.

03 · Practice tips + check pattern

Practice Tip 1 content
→ Test your knowledge
The outcomes screen is the module’s home. Tips unlock in order, per the designer note in the outline.
Why a menu, not a straight line? The outline asks for branching into three Practice Tips, worked through in order. A menu screen gives a facilitator who does five minutes on the bus a place to come back to — the straight line doesn’t.
Open questions.
  • How many screens in total? The progress bar needs a denominator.
  • Resources now live in the left drawer, so they’re always one tap away. The drawer itself still needs wireframing — chapter list, resources link, exit.
  • How does a facilitator actually get to Module 1 from here? Left menu drawer links back to index
  • What marks a Practice Tip complete — reaching the end, or passing the check? Reaching end
  • Can a returning facilitator skip the three intro screens? yes
  • “Navigating this module” has no written copy in the outline — only a designer note.
Content flags — raised, not changed
Every word in the frames below is verbatim from the outline.
  • Acknowledgement of Country reads “Playgroup State and Territory organisations acknowledges” — plural subject, singular verb.
  • “Modeling Inclusion” uses US spelling; the rest of the document is Australian English.
  • The Ask-Tell-Ask example names the parent “Theresa” once and “Therese” four times.
  • Two example quotes (Phillipa’s and Amy’s last line) are missing a closing quote mark.
  • The existing Design-tab mockups treat Ellen, Nam and Precy as three separate parents. In the outline Ellen is the facilitator, Nam is the dad, Precy is his daughter — that placeholder story data contradicts the source and should not carry into production.
  • Screen M02 (series intro) runs to about 150 words. It reads fine on a phone but it is the longest single screen in the module.

Prototype

Include to Play
Visual treatment
Bold, layered, light on its feet. Colour fields carry the page; white shows up as organic shapes that hold content. Separation by tone, never by shadow.
01 Colour — nine brand + two extensions
Dark teal
#24696E
Mid teal
#478A8F
Light teal
#669E9E
Deep red
#CF4545
Coral
#F2614F
Light coral
#F27D70
Mauve
#997591
Light mauve
#C29EBD
Peach
#FAA899
Gold
#FFBF00
Stone
#CFCFC4
Paper
#FFFFFF · #F6F2EA
Colour sets rhythm, not meaning — max two field colours per screen. Pure white is for cards only; it earns its brightness on a colour field or on Paper, never as the page itself.
02 Type & components
Supporting Families
display · BBH Hegarty · one per screen
Creating belonging through empathy
heading · Outfit 700
Body copy is Outfit 17px, 1.6 leading, a ~52-character measure — roughly nine words a line, the readability floor for this audience.
body · Outfit 400 · 17px/1.6
Direction A — “Colour field” · full-bleed hues, white cards on blobs, coral-led
logo placeholder
20 min
Include to Play · Module 2
Supporting
Families
Three practice tips for building belonging with families who are new to playgroup — and new to asking for help.
Self-paced · your progress saves automatically
Practice Tip 1 · Empathy3 / 6
Consider a family’s prior experience
A family arriving at your playgroup carries every group they’ve already tried. Tap a name to hear what happened.
portrait · Ellen
Practice Tip 1 · Empathy4 / 6
Creating belonging
Six things facilitators do that make a family feel they belong. Open each one.
0 of 6 opened
Direction B — “Paper cut” · stone-paper base, big type, overlapping panels, teal-led
logo placeholder
Module 2 of 3
Include to Play
Supporting
Families
Twenty minutes, three practice tips, and one question worth sitting with: what does this family already expect from us?
Practice Tip 1 — Empathy7 min
Practice Tip 2 — Checking in5 min
Practice Tip 3 — Conversations6 min
Prior experience3 / 6
What they bring with them
portrait · Ellen
Reflect: whose first visit have you never asked about?
Practice Tip 1 · Empathy4 / 6
Creating belonging
Six moves, six sheets. Open the ones you want to take to Thursday.
1 of 6 opened

Production

Link to the production build and style guides