Now that i have a really good idea on the layout and plan that i want to follow for this app and aswell with the colour and typography i have chosen. I am now going to start designing the actual screens for this app.
Screen 1 & 2
The first screen is just and onboarding screen, for when you first download the app the user will be asked to either create an account or login for if they have re-downloaded the app for example.
The second screen is the main home page for the app, it displays options for the student to go and find some near by parks to study or relax and aswell as some sustainable options to travel around the city. I also made a shortcut to the page where you can view each of the targets from the 11th SDG. The final parts of this screen is some buttons where you can see the goals that have been set for the week which could be to spend 30 minutes in a green space or take 5 modes of sustainable transport, completing them will gain you points and overtime you can find yourself on the local leaderboard.
Screen 3 & 4
Here are the two screens for the green spaces and city transport sections of the app, i listed down some of the suggested areas for a student to visit and also some easy options to travel around the city, i wanted to keep both of the screens in the same layout to avoid any confusion and i think that it has worked out really nicely.
SDG 11
I then had a screen which would give a link to all different screens which gives information on the specific target that you may have chosen. I thought that it was necessary to include these so the users would be able to learn a lot more on the 11th SDG.
https://www.figma.com/proto/QReadmeNnArjA4j86WHHZy/Untitled?page-id=0%3A1&node-id=1-12&node-type=canvas&viewport=330%2C128%2C0.09&t=AmPF7HGc45wJCALJ-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A12