top of page

Unboxing Engineering, An Interactive Educational Website Project

Our project, "Unboxing Engineering," addresses the lack of engaging educational materials for high school students on the roles and contributions of various engineering disciplines. By developing an interactive website featuring a deconstructed iPhone model, we aim to provide an intuitive and immersive learning experience. The website allows users to interact with 19 different components of the iPhone, exploring how different types of engineers contributed to its design, development, and manufacturing.



To bring this project to life, we employed a variety of tools and programming languages. We used Blender for creating detailed 3D animations that demonstrate the dynamic disassembly of the iPhone model. The UI/UX design was crafted in Figma, allowing for iterative design prototypes and feedback integration. For web development, we utilized HTML, CSS, and JavaScript, with Three.js facilitating the 3D rendering in the browser. HTMX was employed for dynamic icon management.


The project utilized eLearning research and the Ontario high school curriculum to shape the content. Internally, unit tests and manual testing ensured the website met technical specifications. The project also incorporated detailed 3D animations and a user-friendly UI/UX design, enhancing the overall user experience.



This project lays a solid foundation for future enhancements, such as adding more models and integrating advanced technologies like VR for a more immersive experience. Ultimately, "Unboxing Engineering" aims to inspire and educate the next generation of engineers by showcasing the interdisciplinary nature of engineering in a tangible and interactive way.


You can visit our website via this link: https://unboxingengineering-npsg.onrender.com/



bottom of page