Graduation project: 3D integrated website design
Skills
UI/UX Design
HTML
CSS
JS
Three.js
Blender
3D Modelling
User Journey
Enhancing the engagement of students aged 11-13 in their learning of history through the implementation of 3D in a website.
PROBLEM
KS3 students have lower engagement with current teaching materials in school.
Drawing from my own experience as a student in a school that prioritised results over the process of learning, it was made clear to me that memory recall is more important than students enjoying what they are learning about. This sparked my question - why aren’t more learning resources engaging and fun for key stage 3 students (KS3, year 7 & 8s, 11-13 year olds).
SOLUTION
An informative, interactive and engaging learning resource
3D Models
Visual representations of topics enhances students engagement
Students understand topics faster
3D rather than 2D is increases engagement compared to other learning tools
Interactivity
Interacting with the model makes the learning process more ‘game’ like and is fun for students aged 11-13
Engaging with the points of interest of the model enhances their understanding of the information
The interaction is more interesting than reading plain text
The Information
Presenting the information in smaller pieces allows for higher focus and information retention
Promotes curiosity by getting the students to search for the information
Topic of the 7 wonders aligns with national curriculum and written content is targeted to age bracket
RESEARCH
How the students learn best
After consulting the research studies on child learning behaviour, as well as teachers, it was clear that they benefit from multimodal methods of teaching where information is presented in various formats to enhance retention and engagement. I found from a VARK Learn Ltd survey that 66% of students prefer learning in a multimodal way, with kinesthetic (interactive) learning being the most popular out of Visual, Audio, Read/Write and Kinesthetic.
COMPETITOR ANALYSIS
Existing resources had low interactivity rates
There are few resources for students in this age bracket that look at the 7 Wonders of the Ancient world, the most prominent being a 2D interactive map highlighting the location of them and providing brief information. The opportunity is clear to create an engaging and interactive resource for year 7-8 students.
USER TESTING
What the teachers thought
Mid-way through development, I conducted a survey consulting 10 secondary school teachers on the effectiveness of the website as a learning resource. I found that the information was educational for the age group but maybe too technical with some of the language. Additionally, they found that it may not be completely obvious to all users that you can interact with the models beyond clicking key parts, e.g rotating, panning and zooming.
IMPROVEMENTS
3 main improvements
Adding navigation instruction
A button located centrally at the bottom of the page is clearly in view while not disturbing the 3D graphics and indicates the 3D movement.
When clicked, this reveals the mouse controls for rotating, panning around and zooming into the 3D model.
Adding the glossary terms
Rather than removing the integral keywords that year 7 and 8s are unlikely to have heard of, I added a definition feature.
Now, these keywords are highlighted and when clicked on, bring up the definition in terms that the students will understand.
Adding links to Britannica
External links to Britannia were added to each of the pages to provide easy access to an additional learning resource.
This helps expand the students’ knowledge as well as provide an opportunity for their own further study.
FINAL DESIGN
A video demonstration
NOTABLE FEATURES
The 3D models
All 7 of the 3D models were made in Blender and feature a low poly count as well as a consistent colour palette for stylistic and optimisation purposes.
NOTABLE FEATURES
The opening scrolling animation
Separate from the main pages is a landing page that features a scrolling animation and interactive 3D model. This was made using the JS libraries Gsap and Lenis.
