"Ocean acidification, pollution, deforestation, and the climate crisis are pressing issues facing current and future generations. The agriculture, transportation, and energy industries are major contributors to these issues." - Sentient Media
The purpose of EcoKids Adventures is to invest in and build up the next generation of Junior Eco Warriors!
In February 2024, our team set out to help our client crack the code of providing an online resource that would cultivate the next generation of Junior EcoWarriors: kids who grew up environmentally-conscious and would desire to do their part to help protect our planet's environment.
A project challenge we faced was on how to build for our primary user, the children, when in fact it is their parents or guardians who have to be sold the product.
Below chronicles what we set out to do, and what we accomplished.
Based on our user interviews, we created two user personas, Tanner, a 6-year-old, and his dad, Jordan. We catalogued their very different needs in two separate lists. We used FigJam to track of all our user research findings, as well as project management schedule.
Typically, we thought of a user also being the main decision-maker, when it came to accessing their products. Makes sense: if the user wanted something, they would go ahead and buy it. Not quite so in this case.
Ultimately, we determined that each of them would be the primary user, but for different parts of the product: Tanner would be the primary user of the actual site and game interfaces, while Jordan would be the primary user of the site's onboarding.
Some key methods we used during this phase included affinity diagramming, persona mapping, user journey & storyboarding, and the "I Wish, I Like, What If" method.
Our team brainstormed ideas based on User Interviews, competitor analysis (SWOT method), online research, and our own creative thoughts, to produce a cluster of notes, on which we then voted.
We then used a Feature Prioritization Matrix (complexity vs. impact) to narrow down our ideas into a few actionable features that we would work on.
Since the client did not yet have an existing Website, we performed heuristic analyses on competitors to determine the strengths and weaknesses of their Web interfaces.
We created hand-drawn sketches of the onboarding UI and Loading and World Map screens, iterating them into low-fidelity, and eventually, high-fidelity, prototypes. Here is where we transitioned from FigJam to Figma.
Below are some screenshots of finished product, a high-fidelity, interactive prototype in Figma. The "Forest Firefight" sample game demo was created using Framer.
Lastly, we reviewed all our visual design notes and deliverables to refined a style tile, as an at-a-glance summary of a fuller style guide that could be shared with fellow team members & developers.
