Hands On Tech concepts

Try these five tasks in each concept

On your phone, open the home page. In five seconds, what could you learn there?
Registration is closed. Sign up for the workshop alert (nothing is sent).
You are an electrician who could mentor. Find out what mentors do and send the enquiry.
You organise a Residents' Network. Find where to ask about hosting a workshop.
Look at the photos. Can you see what the hands and tools are doing?

Before you start: The workshop photos in these concepts are cleared for public review. Forms only show a demo message; nothing is sent or saved. "Hands On Tech" is typeset until the verified logo is supplied. Amber dashed boxes inside the mock-ups are reviewer notes, not website copy.

The five concepts

They share the same facts, photos, brand colours and type, so the differences you see are structural: what you see first, how you find your way, how the photos tell the story, how a workshop is explained, and where the next action sits.

01 Workbench

Open on a close repair photo with the workshop-alert form right beside it, so visitors see the work and can act in one glance.

Strongest use: A parent or young person on a phone who wants to know what is taught and get the date, in one screen.
Honest trade-off: The most familiar layout of the five. Mentors and partners find their routes only below the first screen or in the menu.

Open concept 01 Open in new tab

Pages to try:

Phone view and navigation map

Pages: Home, Workshops, Get involved (Mentorship, Volunteer, Partners, Support Us). About Us and Contact Us are sections on Home.

02 Four Doors

The opening screen asks which of four people you are (learner or parent, mentor, group organiser, supporter) and sends each to a path built for that decision.

Strongest use: Mixed audiences arriving from different places: a teacher, a would-be mentor and a parent each see their route straight away.
Honest trade-off: The headline does not name the skills, the door photos are small on phones, and every visitor has to choose before seeing workshop detail.

Open concept 02 Open in new tab

Pages to try:

Phone view and navigation map

Pages: Home (four routes, plus Partners, Support Us, About Us, Contact Us sections), Workshops, Mentor (Mentorship, Volunteer). All eight sections sit behind the "All sections" button at every width.

03 Show and Try

Pair two related photos in every section so visitors see a skill being shown and then practised, making mentorship the story.

Strongest use: Recruiting mentors and reassuring parents that someone will guide their son, not just lecture.
Honest trade-off: Needs matching photo pairs for every skill; the two hero frames are near-identical and may read as a repeat. The partner route is weaker.

Open concept 03 Open in new tab

Pages to try:

Phone view and navigation map

Pages: Home (Partners, Support Us, About Us, Contact Us sections), Workshops, Mentorship (includes Volunteer).

04 Saturday Morning

Explain a workshop as one Saturday morning, from arrival to a finished repair, so a parent and son can picture going together.

Strongest use: A father deciding whether to bring his son: it shows what the morning holds, from arrival to a finished repair.
Honest trade-off: The middle stages need Christian to confirm how a session runs. The alert form sits after the timeline; the hero and header jump to it.

Open concept 04 Open in new tab

Pages to try:

Phone view and navigation map

Pages: Home (timeline, Partners, Support Us, About Us, Contact Us sections), Workshops, Volunteer (includes Mentorship).

05 Photo Essay

Let the workshop photographs carry the story in a calm full-width sequence, with a slim sticky bar that keeps the workshop alert one tap away.

Strongest use: Supporters and partners who need to feel the atmosphere, and anyone browsing on a phone: the alert never leaves the screen.
Honest trade-off: Depends on a steady supply of cleared, good photos. Skills are named in words only lower down, and the help routes are far down the page.

Open concept 05 Open in new tab

Pages to try:

Phone view and navigation map

Pages: Home (About Us, Contact Us sections), Workshops, Get involved (Mentorship, Volunteer, Partners, Support Us). Menu button at every width; sticky alert bar on all pages.

The same screen across all five

Choose a screen. Each capture is the first view at that width (1440 px desktop, 390 px phone), taken from the final versions.

Home, desktop Home, phone Workshops, desktop Workshops, phone

Home, desktop

Concept 03 Home, desktop — 03 Show and Try

Concept 04 Home, desktop — 04 Saturday Morning

Concept 05 Home, desktop — 05 Photo Essay

Home, phone

Concept 03 Home, phone — 03 Show and Try

Concept 04 Home, phone — 04 Saturday Morning

Workshops, desktop

Concept 03 Workshops, desktop — 03 Show and Try

Concept 04 Workshops, desktop — 04 Saturday Morning

Concept 05 Workshops, desktop — 05 Photo Essay

Workshops, phone

Concept 03 Workshops, phone — 03 Show and Try

Concept 04 Workshops, phone — 04 Saturday Morning

Concept 05 Workshops, phone — 05 Photo Essay

Open two favourites side by side

Or open each concept in its own tab with the "Open in new tab" buttons above.

How each concept did on the five review questions

My assessment after testing every concept at 390 px and 1440 px. These are design judgements to check with visitors, not measured performance. No concept has been tested with real visitors yet.

Question	01 Workbench	02 Four Doors	03 Show and Try	04 Saturday Morning	05 Photo Essay
1. On a phone, can a first-time visitor tell what they could learn?	Strong Headline and one sentence name all three skills; the handlebar repair is readable above the form.	Adequate Door photos show bicycles, but the skills are named only after the learner route.	Adequate The diptych shows a wheel task at once; skills are named further down.	Adequate Photo and headline show repair; skills are named in the timeline and alert section.	Weak Big readable photo, but the skills are named only in the essay further down.
2. With registration closed, can they find and try the workshop-alert flow?	Strong The form is on the first screen and repeated on Workshops.	Strong One tap on the first door lands on the form.	Strong Hero button jumps to the form directly below.	Adequate Header and hero jump to the form; the form itself comes after the timeline.	Strong The sticky bar is always on screen and opens the form in place.
3. Can a potential mentor or community partner find a relevant next step?	Adequate Clear section below the skills and in the menu; not on the first screen.	Strong Mentor and group routes are on the first screen.	Adequate Mentor route is in the hero; the partner route is a home section only.	Adequate Dedicated volunteer and hosting sections; not on the first screen.	Weak Help routes come after the essay; the menu is behind a button.
4. Does the imagery show real activity, with readable crops and accurate context?	Strong One large, readable close-up; skill tiles use matching photos; air-con is honestly text-only.	Adequate Real photos, but phone thumbnails are small (about 100 px wide).	Adequate Strong demonstrate-and-practise pairs; the hero pair looks almost the same twice.	Adequate A photo at each stage, but from different sessions; captions say which.	Strong The fullest, most truthful picture of a session; captions describe actions only.
5. Could a small team maintain it when a new workshop opens or a photo changes?	Strong One status line and one form; a new date changes two words.	Adequate Four routes of copy to keep current; status still lives in one place.	Weak Every new skill or photo change needs a matching pair.	Adequate The timeline must be updated if the session format or times change.	Adequate Easy to swap photos, but the sequence needs curating and depends on cleared photos.

Full browser test results: process/test-report.md. Method notes: methods.md. Photo use and clearance: photo-usage.csv.

My top three

A recommendation to discuss, not a decision. Which concept will get more visitors to sign up is a hypothesis until the live site has real visits to compare.

01 Workbench
Why: It is the only concept where the skills, a readable repair photo and the alert form all fit on the first phone screen, so the primary task needs no navigation.
Trade-off: It is the least distinctive layout, and mentors and partners only see their routes after scrolling.
Open 01
02 Four Doors
Why: Every audience in the brief, including teachers and Residents' Network organisers, sees its own next step on the first screen.
Trade-off: Visitors must choose a route before they see what is taught, and the door photos are small on phones.
Open 02
04 Saturday Morning
Why: It answers the question the old site never did, "what actually happens?", and speaks directly to fathers and sons.
Trade-off: The stage order needs Christian's confirmation, and the form sits after the timeline rather than in the first screen.
Open 04

A combination worth considering: the 01 first screen, the 02 route row directly under it, and the 04 morning timeline on the Workshops page.

How to ask for a revision or a combination

Use the concept numbers. For example:

"Revise 03: use a different hero pair and make the partner route stronger."
"Combine 01 home hero + 02 route row + 05 sticky bar."
"Shortlist 01 and 04; show me 04 with the form in the first screen."

Any of these keeps us in the design stage. When you have chosen a direction, say "Approve [numbers] and write the PRD"; that starts the requirements document.