Junior Ranger AI Mini Challenges

After the Challenge List and wireframes, the next step for Junior Ranger AI Mini Challenges was making it clickable: an actual web app children could tap through.

Web, not an app store. It’s built as a web app rather than a native app, so families can open it in a browser on a phone or tablet without installing anything. The wireframes were already drawn with browser chrome for this reason.

The stack. I’m building the front end in Expo with TypeScript, following the architecture decisions and privacy rules the team had already agreed on.

The screens:

• Home and an All Challenges browse screen
• Challenge detail, capture and result, the core loop of picking a challenge, taking a photo and getting feedback
• Collection, grouped by species type (bugs, birds and so on) and showing what you’ve found and what’s still locked
• Profile and settings, stored in the browser with no account or login
• Accessibility, with a text-to-speech toggle and room for more options

Accessibility checks. The designs aim for low text and read-aloud support, and I checked colour contrast and touch-target sizes against WCAG 2.2 AA. For younger kids on small screens, big targets and clear contrast matter as much as the content.

Tests. I added automated Jest tests so changes don’t quietly break screens the team is relying on.

Having the challenges written first paid off again here: every screen had real content from day one instead of placeholder text.

Junior Ranger AI is an industry project I’m working on at uni for the Queensland Indigenous Land and Sea Ranger Program. Children in Years 4 to 7 complete short environmental challenges between Ranger visits: they photograph or name a species or item and get simple AI-assisted feedback.

My first big deliverable was the Challenge List: the actual challenges the app offers. It’s harder than it sounds.

What ended up in it:

• 23 challenges across four categories: Wildlife, Plants, Recyclables and Environmental Features.
• Instructions written at a Year 3 reading level, below the youngest users, so nobody gets stuck on the words.
• Content for northern Australia: regional species and wet and dry season framing, not generic examples.
• Safety notes kept in red, like keeping away from water’s edge because of crocodiles and not handling cane toads. Normally I’d avoid relying on colour, but here it’s a deliberate safety signal.
• Plant challenges go to a specialist plant-recognition service, because general image recognition is weaker on plants.

Open questions. Not everything resolves cleanly. One challenge involving cane toads is still being checked against the “safe species” rule because of their toxicity. Another question is how children without a working camera can still take part.

After the list came the wireframes in draw.io and Figma: home, challenge, capture, result, a species collection screen grouped by type (bugs, birds and so on), and an accessibility screen with text-to-speech. Writing the content first made the screens much easier to design, because I knew exactly what each one had to hold.