Let's Learn!
The Brief:
Let’s Learn was the final project for HND Web Development in which an interactive and educational web based app was to be designed for children wishing to learn more about science and the topics this would cover. The project included the entire website made from scratch, without the use of any frameworks, custom code, strong UI & UX, handmade graphics and characters as well as good implementation of SEO, information architecture and link structure.
Languages Used:

→ HTML
→ CSS
→ JavaScript
→ jQuery

Programmes Used:

→ Adobe Photoshop
→ Adobe Illustrator
→ Adobe Draw
→ Brackets

Other:

→ iPad Pro & Apple Pencil
→ W3 Schools

Screenshot 2019-10-09 at 14.13.04
Screenshot 2019-10-09 at 14.13.25
This is Meep!


Meep was designed to help the user navigate the web app, offer tips and tricks and provide a little companion to the experience of learning. Meep was first sketched out using Procreate and then these sketches were taken in to Adobe Illustrator and then eventually animated.
Custom Images & Backgrounds
Each section of the web app featured it’s own custom created background relevant to what the user would be learning.

Each of these backgrounds were hand made in Adobe Illustrator and featured both a web size version as well as a smaller version for mobiles and devices with smaller screens.
What about interactivity?
Each science topic comes with its own smaller sections of information which were kept condensed due to the age of the end users and to help memory retention. Each page only contained two to three sections of information in order to reduce the feeling of being overwhelmed when reading the facts.

At the end of each section there is an interactive quiz that allows the user to test their knowledge based on the previous information they have just read. Once the quiz is complete it will show you how many questions you got right, which ones you got wrong and will allow you to try the quiz again until you get at least 80%.