Project Overview
The Ontario Parks Touchscreen Kiosk Web App is a standalone, interactive digital experience designed to be installed on a physical touchscreen kiosk located in Ontario Parks offices, visitor centres, or outfitter stores. This web app will serve as an engaging information hub, guiding users through a self-paced exploration of Ontario’s natural landscapes, park history, visitor activities, and the Boreal Forest songbird nursery. Developed using HTML, CSS, JavaScript, and GSAP animations, the application combines immersive motion graphics with clear navigation across four main screens, all based on design layouts developed in the Design Studio 1 course.
Objectives
The primary objective of this project is to implement a fully functional, visually engaging, and informative web application that aligns with the user interface design produced in Design Studio 1. Each of the four screens—Intro, History & Organization, Visitor Information & Activities, and Songbird Nursery—will feature tailored animations and content that effectively communicate key topics to users of all ages. The project also emphasizes technical excellence, with requirements for clean, commented code, graphic optimization, and adherence to design principles such as alignment, contrast, and spacing. Through GSAP animations and interactive transitions, the goal is to provide a captivating experience that encourages exploration and learning about Ontario Parks.
Challenges
One of the key challenges in this project is ensuring seamless integration between the design mockups and functional code, particularly across multiple screens with unique content and animations. Managing and optimizing assets—especially when working with large or detailed images and SVGs—will require attention to performance without compromising visual quality. Creating smooth, meaningful GSAP animations that enhance rather than distract from the content is another complex aspect, especially given the need for clarity on public touchscreen devices. Additionally, maintaining a responsive and user-friendly interface that works reliably on kiosk touchscreens adds a layer of technical consideration to the project’s execution.
Touchscreen Kiosk Prototype
Tools Used
- HTML
- After Effects
- CSS
- Photoshop
- JavaScript