Turning the Junior Ranger wireframes into a working prototype
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.