Ontario Parks Kiosk

A touchscreen kiosk was built for Ontario Parks visitors. It features animated interactive pages on park history, classifications, and the songbird nursery. It was developed with HTML, CSS, JavaScript, and GSAP, and designed using Illustrator and Photoshop. This local kiosk was crafted for large screens in public spaces like museums and nature centers.

Sep 10, 2024

Click to View Project

CLIENT

College Project

CLIENT

College Project

CLIENT

College Project

Role

Developer and Designer

Role

Developer and Designer

Role

Developer and Designer

User Flow

The kiosk is designed to provide an engaging and easy-to-navigate experience for visitors exploring Ontario Parks. It has a splash screen that has an inviting animated map that rotates.This was used to encourage interaction for the user.

Homepage & Entry Point

Features a smooth rotating animation of the park map to draw user attention.
When tapped, the map expands to full screen and reveals three main navigation tabs.

Core Navigation Tabs

Park History: Offers an overview of Ontario Parks’ origins, milestones, and conservation efforts.
Park Classification & Activities: Breaks down the types of parks and highlights popular visitor activities.
Songbird Nursery: Provides an immersive educational section with detailed descriptions and visuals of Ontario’s songbird ecosystem.

Homepage & Entry Point

Features a smooth rotating animation of the park map to draw user attention.
When tapped, the map expands to full screen and reveals three main navigation tabs.

Core Navigation Tabs

Park History: Offers an overview of Ontario Parks’ origins, milestones, and conservation efforts.
Park Classification & Activities: Breaks down the types of parks and highlights popular visitor activities.
Songbird Nursery: Provides an immersive educational section with detailed descriptions and visuals of Ontario’s songbird ecosystem.

Homepage & Entry Point

Features a smooth rotating animation of the park map to draw user attention.
When tapped, the map expands to full screen and reveals three main navigation tabs.

Core Navigation Tabs

Park History: Offers an overview of Ontario Parks’ origins, milestones, and conservation efforts.
Park Classification & Activities: Breaks down the types of parks and highlights popular visitor activities.
Songbird Nursery: Provides an immersive educational section with detailed descriptions and visuals of Ontario’s songbird ecosystem.

Development

Technology

The kiosk was developed using the modern web technologies of HTML, CSS, and JavaScript, with GSAP powering smooth and engaging animations throughout the interface.

Optimisation and Accessibility

The codebase was optimised to ensure responsive and fluid touch interactions on large-format touchscreen monitors typically found in public spaces like museums and visitor centres. The Custom designed visual assets such as maps, icons, and illustrations were integrated into the code to effectively communicate with the user.
The development focused on creating a reliable, accessible, and user-friendly experience that performs consistently in public environments to enhance visitor engagement and learning.

Technology

The kiosk was developed using the modern web technologies of HTML, CSS, and JavaScript, with GSAP powering smooth and engaging animations throughout the interface.

Optimisation and Accessibility

The codebase was optimised to ensure responsive and fluid touch interactions on large-format touchscreen monitors typically found in public spaces like museums and visitor centres. The Custom designed visual assets such as maps, icons, and illustrations were integrated into the code to effectively communicate with the user.
The development focused on creating a reliable, accessible, and user-friendly experience that performs consistently in public environments to enhance visitor engagement and learning.

Technology

The kiosk was developed using the modern web technologies of HTML, CSS, and JavaScript, with GSAP powering smooth and engaging animations throughout the interface.

Optimisation and Accessibility

The codebase was optimised to ensure responsive and fluid touch interactions on large-format touchscreen monitors typically found in public spaces like museums and visitor centres. The Custom designed visual assets such as maps, icons, and illustrations were integrated into the code to effectively communicate with the user.
The development focused on creating a reliable, accessible, and user-friendly experience that performs consistently in public environments to enhance visitor engagement and learning.

Design Process

The design process followed a structured approach to ensure the kiosk was both visually engaging and highly usable:

Research & Concept Development:Initial research focused on understanding the target audience which where identified to be families, tourists, and nature lovers. The core information was summarised and Mood boards and style guides were created to establish the natural, earthy aesthetic.

Wireframing & Layout Planning:Low-fidelity wireframes where created to map out the user flow and layout of key screens, ensuring a clear content hierarchy for touchscreen interaction.

Visual Design & Asset Creation:Using Adobe Illustrator and Photoshop, custom graphics, icons, and illustrations were designed to complement the educational content while maintaining brand consistency. Color palettes and typography where used as per the Ontario Parks Brand Guidlines.

Prototyping & User Testing:The initial Interactive prototypes were developed to test user experience, usability testing and feedback collection. The iteration from there on refined visual clarity, touch responsiveness, and animation pacing.

The design process followed a structured approach to ensure the kiosk was both visually engaging and highly usable:

Research & Concept Development:Initial research focused on understanding the target audience which where identified to be families, tourists, and nature lovers. The core information was summarised and Mood boards and style guides were created to establish the natural, earthy aesthetic.

Wireframing & Layout Planning:Low-fidelity wireframes where created to map out the user flow and layout of key screens, ensuring a clear content hierarchy for touchscreen interaction.

Visual Design & Asset Creation:Using Adobe Illustrator and Photoshop, custom graphics, icons, and illustrations were designed to complement the educational content while maintaining brand consistency. Color palettes and typography where used as per the Ontario Parks Brand Guidlines.

Prototyping & User Testing:The initial Interactive prototypes were developed to test user experience, usability testing and feedback collection. The iteration from there on refined visual clarity, touch responsiveness, and animation pacing.

The design process followed a structured approach to ensure the kiosk was both visually engaging and highly usable:

Research & Concept Development:Initial research focused on understanding the target audience which where identified to be families, tourists, and nature lovers. The core information was summarised and Mood boards and style guides were created to establish the natural, earthy aesthetic.

Wireframing & Layout Planning:Low-fidelity wireframes where created to map out the user flow and layout of key screens, ensuring a clear content hierarchy for touchscreen interaction.

Visual Design & Asset Creation:Using Adobe Illustrator and Photoshop, custom graphics, icons, and illustrations were designed to complement the educational content while maintaining brand consistency. Color palettes and typography where used as per the Ontario Parks Brand Guidlines.

Prototyping & User Testing:The initial Interactive prototypes were developed to test user experience, usability testing and feedback collection. The iteration from there on refined visual clarity, touch responsiveness, and animation pacing.

Final Screens

The final screens of the kiosk bring together all the design and development work into a seamless, engaging user experience. The interface balances visual appeal with usability, featuring smooth animations and clear layouts optimized for large touchscreen displays. Each screen is carefully crafted to ensure visitors can easily access information while enjoying a visually rich environment that reflects the natural beauty of Ontario Parks.

Homepage with Rotating Map
A welcoming animated map gently rotates, inviting users to explore. This screen acts as the entry point and encourages interaction through subtle motion and clear visual design.

Expanded Map & Navigation Screen
Upon tapping, the map expands to fill the screen, revealing three navigation tabs. These tabs are prominently displayed for easy access and designed for responsive touch interaction.
Park History Screen
This screen presents Ontario Parks’ rich history, combining storytelling text with relevant imagery and smooth animations to engage users and provide informative content.
Park Classification & Activities Screen
Detailed explanations of park types and visitor activities are presented here, supported by custom icons and concise text to facilitate quick comprehension.
Songbird Nursery Screen
An immersive educational section showcasing detailed information and illustrations about local songbirds, enhanced with interactive and animated elements to enrich the learning experience.

Homepage with Rotating Map
A welcoming animated map gently rotates, inviting users to explore. This screen acts as the entry point and encourages interaction through subtle motion and clear visual design.

Expanded Map & Navigation Screen
Upon tapping, the map expands to fill the screen, revealing three navigation tabs. These tabs are prominently displayed for easy access and designed for responsive touch interaction.
Park History Screen
This screen presents Ontario Parks’ rich history, combining storytelling text with relevant imagery and smooth animations to engage users and provide informative content.
Park Classification & Activities Screen
Detailed explanations of park types and visitor activities are presented here, supported by custom icons and concise text to facilitate quick comprehension.
Songbird Nursery Screen
An immersive educational section showcasing detailed information and illustrations about local songbirds, enhanced with interactive and animated elements to enrich the learning experience.

Homepage with Rotating Map
A welcoming animated map gently rotates, inviting users to explore. This screen acts as the entry point and encourages interaction through subtle motion and clear visual design.

Expanded Map & Navigation Screen
Upon tapping, the map expands to fill the screen, revealing three navigation tabs. These tabs are prominently displayed for easy access and designed for responsive touch interaction.
Park History Screen
This screen presents Ontario Parks’ rich history, combining storytelling text with relevant imagery and smooth animations to engage users and provide informative content.
Park Classification & Activities Screen
Detailed explanations of park types and visitor activities are presented here, supported by custom icons and concise text to facilitate quick comprehension.
Songbird Nursery Screen
An immersive educational section showcasing detailed information and illustrations about local songbirds, enhanced with interactive and animated elements to enrich the learning experience.

Gathergram (Internship)

During the span of my internship, my main responsibility was creating a product demo video that effectively presented the app's main features to potential clientele. I was also tasked with making a few social media posters during my initial internship challenge.All rights to the posters and media created are reserved by Gathergram.app.

Ontario Parks Kiosk