Project Objectives
The Data-Driven Touchscreen App is a self-guided info system for Ontario Parks, designed for kiosks in locations like Visitor Centres and Park Offices. It features a touch-optimized, full-HD interface that delivers engaging content across four screens—covering park history, visitor info, and the boreal forest. Built with Photoshop mockups and developed using HTML, CSS, and JavaScript, the app combines strong visuals with smooth, interactive functionality.
Challenges
The main challenge was creating an engaging, data-rich touchscreen app that was both educational and easy to use. We focused on clear layouts, accessible design, and smooth navigation to support users of all ages. A key technical hurdle was translating layered Photoshop designs into responsive HTML/CSS while preserving the visual structure and touch functionality.
The Process
The project began with thorough research and content organization using provided resources. Each screen was planned around key themes and learning goals, then designed as layered mockups in Adobe Photoshop for easy translation into code. I developed the interface using HTML, CSS, and JavaScript, adding interactivity and smooth transitions with GSAP. A central map of Ontario anchored the design across all screens for visual consistency. The process followed an iterative approach, refining both design and user experience throughout development.
Tools used
Designed in Photoshop and developed with HTML, CSS, and JavaScript, this app uses GSAP for smooth animations, creating a responsive and engaging touchscreen experience.