logo design | web design | branding | app development

Leaf

CHALLENGE Elementary aged children spend less time in nature, which leads to a number of mental and physical health issues. How can you engage children with nature in a fun and educational way through web design and app development?

NARRATIVE I created a website and PWA with information and exploratory tasks that aims to engage budding scientists and future explorers to safely engage with the world around them. Leaf is a vertical slice, and focuses on North Carolina. The design artifacts, including logo and brand manual, were created with children in mind, and focus on bright, fun colors. The web design and PWA design use UX/UI practices and accessibility features.

Design Process

RESEARCH This project started with a literature review entitled The Nature of Learning: Childhood Education Through New Technology in National Parks. I chose this topic because it combined a few of my passions: science communication, kids, and the great outdoors. After months of research, I decided to carry this as the basis for my Master's captsone, a cumulative project designed and executed to showcase my interactive media skills.

BRANDING Since I was creating this project from the ground up, I had plenty of design freedom. When defining the branding for Leaf, I carefully chose fontsand colors and wrote guidelines for every aspect of the project. The branding is designed for kids using bright colors and easily readable fonts.

Leaf brand guidelines including logo, colors, and fonts

TARGET AUDIENCE Defining the target audience for this project was tricky, since I was designing for children, but kids don't consume media in a vacuum. Children aged 5 to 10 were my primary target audience, and I settled on parents or guardians as a secondary audience and educators as a tertiary audience. For each of these audiences, I created a few personas to shape my design choices moving forward.

Persona of young girl who dreams of being a scientist
Persona of outdoorsy parent of young child
Persona of elementary school teacher

APP DEVELOPMENT The initial plan was to code a PWA that contained exploratory tasks to promote engagement with nature and general information. As the project developed, I shifted the scope and moved most of the content to a website. The final version of the PWA has exploratory tasks that are filterable by season that promote mindfulness when in nature spaces. The writing and visual design is all aimed at children aged 5 to 10, and I chose to keep the tasks univeral so that the PWA could be used in a backyard or a National Park. I coded the PWA using HTML, CSS, and Javascript. I used SASS to write custom CSS for bootstrap, and tested my prototype locally before deploying it using Google Firebase.

Screenshots of Javascript function that filters tasks by season

CONTENT Since the goal of this project is to engage children with nature, I spent some quality time in nature throughout the course of the project. Inspiration for the species pages and tasks came from many, many ventures out into the state parks of North Carolina. I One of my favorite parts of this project was meeting environmental educators across the state of North Carolina, from park rangers to the Director of Education at the Greensboro Science Center. I took photo and video content to use across the site, including videos on the 'Species' pages. I chose 24 plants, animals, or natural phenomena to feature with information, photos, and videos. I plan to add more great North Carolina species, or branch out into more states (pun intended).

Off-white and orange fungi on a tree stump
A male and female duck swimming on a pond
Close-up of grey-green lichen
North American beaver holding onto a small log

WEB DEVELOPMENT All this information, as well as a link to the PWA, is hosted on a website I built using Webflow. The site consists of a Learn page with the featured species, an Explore page that leads to the PWA, as well as printable versions of the tasks, and an About page that tells parents and educators (my secondary and tertiary audiences) the importance of engaging kids with nature and how Leaf can help. The website, like the PWA, was designed for elementary aged children, which was a fun design challenge. I used bright colors and animations that I wouldn't add in a website targeted towards adults.

A tablet, desktop, and laptop showing the Leaf website