Sketches & Planning

Educare is an educational application for the next generation to use that Chris dale and myself have created for one of our course projects. Below are some basic sketches of what the different screens will look like on the students version of our application.


This image is how the home page of the app will look like. There will be buttons at the top like on every web page and also our brand. On the left hand side on the home screen there is the navigation that will have all the buttons going down where the users can go to every page. There will be text on the right side of the page that shows the time and date. Finally at the bottom of the page there will be the users profile image that will be different for each user and they can click it and be taken too the profile page.

Next we have our call page that will have the same layout as the last page. We decided to keep every page with the same layout as it keeps it consistent for our users. For the students they will not be able to call anyone they will only be able to join scheduled calls.

This is our active call page that the students will see when they are in a call with their teacher, they will be able too see their teacher and there will be buttons on the bottom where they can turn their cameras and mics on and off and also on the left side they will be able to access the pop up chat button.

As mentioned above when the student clicks the chat pop up on the left they will see the chat bar appear where they can talk to their teacher and the rest of the class.

Next we have our chat page that users can talk to their teacher, classmates or be in different groups. It has a simple layout where you still have the nav on the left then beside it you have a search bar where you can search for different people to talk too and also see all of your ongoing conversations with people and groups, then you have the message screen itself where you see the title and then the messages between the student and whoever they are talking too.

This is our marks page where students can see their marks on different tests and it is the same layout as the previous page where they can search different marks and then see the marks that they got they can also see marks for the whole class.

In the files page the students will be able to look at different files of work the teacher has uploaded for them to do. They can also look at recordings where they can see previous recordings of different class if they missed them or need to learn it again. There is also a section that will allow students to upload work for the teacher too mark.

This is the recordings page where the user can see previous class recordings so that they can catch up on work they may have missed.

This is the profiles page where the user can see and change their profile image. They can also see their name, email, student ID and their password. Again this page has the same basic layout as the rest to keep it consistent. Also on the nav on the left whatever tab they are on will be green so they know what page they are on but on the profile page the image at the bottom left will be highlighted so they know that they are on that page.

Finally you have the login page where you have out brand, email or username, password and then the sign-in button. We also have a section where you can create an account or reset your password if forgotten or you can log in via a different account like Microsoft.


These are the sketches for the teachers version of the application which is similar to the students one but it has more features.

The profile page is the same as on the students version. Again like the students version the app is laid out in the same way to keep it consistent.

The call page for the teachers is different too the students cause they will be able to see their recent calls and their contacts but their contacts will be split up into teachers and parents and they will also see the date and time displayed as well.

This is the active call screen which is different from the students one cause the teachers can see the whole class on the call. It does have the same features like the camera and mic buttons, end call button and a button that will take them to the whiteboard screen. There will also be the button on the left side to open the chat bar.

The active call chat bar is the same for the teachers as it is for the students.

When the teachers clicks on the W button it will open the whiteboard so that both the students and the teacher will be able to write things onto it and get the class to interact more while online learning.

The chat page is the same as on the students one.

The file page is the same for both student and teacher

The recording page is similar too both only for the teachers they will be allowed to upload any recordings from previous lessons.

The Marks page is much the same for the teachers although it will allow the teachers to add comments on the work.

The profile page is the same on both versions of the application.

Both login pages are the same for both versions.

User Persona's

Icon & Colour Pallet

Finally we decided on what our logo was gonna be. We thought that we would use the E from our name so that people know instantly what it is like how other companies like Facebook, Google, Disney and even Omniplex cinemas use just the first letter of their names and you instantly know what they are. This is what we hope to achieve from our brand.

The first colour that we decided to use was a shade of green as it represents growth, nature  and hope as students minds are grown through education in school and will give them hope for the future.The next 3 colours we choose to use where different shades grey as it the colour of intellect, knowledge and wisdom. Which are all to do with school and learning. They alls have a good contrast between the 3 coloursThe next colour we choose was white as it is serene and calming.The final colour we choose was black as it represents power and sophistication.

After deciding on the colour of our application we then decided on what our name was gonna be. So after brainstorming and thinking of many different names we finally landed on Educare which is latin for educate.We thought this would be a great name for our brand as the first part is edu which is educate and then care for the caring environment teachers try and create in school and the same environment we want to create in our application.


These images are the HIFI mockups of what our final application looks like.Again these are like the sketches and the MIDFI mockups but they show in more detail where elements are placed like the brand, buttons and all of the content. By doing all three steps it shows us the design process from start to finish.

Sign In



Chris dale