Back to Projects

UX/UI Design

Outside Play

Website & Web App

Project Introduction

OutsidePlay – A User-Centric Platform for Children, Parents, and Educators
I contributed to designing a highly interactive web and mobile application for OutsidePlay, which aims to promote and facilitate outdoor play for children. The platform offers researched data, engaging games, helpful tips, and parental guidance to support children's play.

In addition, I worked on a dedicated teacher tool (web app) designed specifically to assist educators in creating structured, educational outdoor activities, fostering a dynamic learning environment.

My Role
UX/UI Designer & Developer
Partner
Dr. M. Brussoni
BC Injury Research and Prevention Unit (BCIRPU)
The Digital Lab
Time Frame
15 Months / 2022 - 2024
Project URL
outsideplay.org
go to the Website
go to the App

Background

Play is essential for a child's development, fostering cognitive growth, physical abilities, emotional well-being, interpersonal skills, and creativity. However, in recent years, outdoor play has declined due to safety concerns and misconceptions about its benefits.

To address this issue, OutsidePlay conducted extensive research on preventing child accidents and promoting outdoor play. Based on their findings, we designed a web and mobile application that transformed their research into a user-friendly platform. This solution made outdoor play more engaging, accessible, and safer for children, empowering parents and educators with valuable resources.

Additionally, a teacher tool (web app) was developed specifically for educators to create structured, educational outdoor activities, supporting the promotion of dynamic learning environments for children.

Target Users

Children
Engaging outdoor play with interactive games, fun facts, and challenges.
Patients & Caregivers
Research-based tips and safety insights for monitoring children's outdoor play.
Educators
Outdoor play resources and guides to promote active learning.

User Persona

Bio:
Liam is a curious and active third-grader who loves outdoor activities. He is always up for an adventure with friends, whether climbing trees, playing catch, or exploring a new area in the neighborhood park. However, he is often unsure which games to play and how to play safely.
Needs:
- An accessible source of engaging, new, and safe outdoor games and play ideas.
- Easy-to-understand instructions and a platform designed specifically for his age group. 
Bio:
Susan is a mother of two living in a city. She understands the importance of outdoor play for her kids but worries about their safety. She sometimes struggles to find ways to integrate outdoor play into her children's daily routine.
Needs:
- Credible, research-backed information on the benefits and safety measures of outdoor play.
- An easier way to monitor her kids’ outdoor play activities.
- Ideas and suggestions for outdoor games and tasks suitable for her kids’ age and abilities.
Bio:
Mr. Lee is a forward-thinking educator who believes in the power of play in education. He wants to integrate more outdoor and physical activities into his teaching but needs a structured guide and resources to do so effectively.
Needs:
- Guidance and practical resources on integrating play into the educational framework.
- Access to a database of research-backed outdoor game ideas and play scenarios.
- Tips on ensuring students' safety during outdoor play.

Problem

Statement

for

Teacher Tool

Key UX

Challenges

UX Goals

Problem 1
Lack of Structured Guidance for Outdoor Learning

Teachers struggle with integrating outdoor learning due to fragmented or overly theoretical resources.

Goal 1
  • Provide structured learning through a category-based lecture system.
  • Encourage practical application with ‘Suggested Discussion Questions.’
Problem 2
Safety Concerns and Risk Management

Teachers hesitate to implement outdoor learning due to unclear safety guidelines.

Goal 2
  • Ensure easy access to safety resources in the resource tab.
  • Promote real-world application with goal-setting and checking.
Problem 3
Accessibility and Practical Implementation Challenges

Teachers face obstacles like weather, school policies, and limited resources when implementing outdoor learning.

Goal 3
  • Offer ready-to-use materials via the resource tab.
  • Support execution through personalized goal-setting and checking.
MVP(Minimum Viable Product)

Develop a structured and practical teacher tool that enhances the integration of outdoor learning by providing accessible resources, safety guidance, and goal-setting features.

Key Features:
  • Category-based learning for structured outdoor education
  • Discussion prompts to encourage real-world application
  • Comprehensive safety resources for risk management
  • Personalized goal-setting to support implementation
  • Multi-format resources (videos, articles, PDFs) for easy access

Lo-fi Wireframes

User Flow
Low-Fidelity Wireframes

Branding

Brand Design: E-learning App

Hi-fidelity wireframes

App Entire Hi-fidelity Wireframes
Website Entire Hi-fidelity Wireframes

Final Features

Dashboard + Main pages
E-Learning
Goal Setting
OutsidePlay Portal

Design System & Style guide

Style Guide
Page Guide

Development

I am excited to showcase a website that I designed and fully developed using Webflow. Taking complete ownership of this project, I meticulously crafted every detail to ensure a seamless user experience. Leveraging Webflow’s powerful features, I built a responsive and visually engaging site with ease.
Click the button below to explore the final result.

go to the Website
go to the App

Conclusion & Reflection

Initially, OutsidePlay was fully developed by the engineering team, but due to partner requirements, the platform was later migrated to Webflow. This transition introduced certain limitations, such as the removal of the goal-tracking and progress-checking features, which had been designed to enhance user engagement and real-world application.

Despite this constraint, the platform still successfully delivers structured outdoor learning resources through a category-based lecture system, discussion prompts, and multimedia resources. The redesign focused on maintaining accessibility and usability while ensuring that educators, parents, and children could easily find and apply relevant content.

This project highlighted the challenges of adapting a platform within technical constraints and reinforced my ability to prioritize user needs while balancing feasibility in no-code environments.