Image of interface


Our brief for this task was COVID-19 has caused widespread disruption to schooling for over 18 months and this is likely to continue for some time. Many institutions were forced to embrace remote and online learning during the pandemic. So we had to create a platform that allowed teachers to have both an in person and online learning environment

How I did it

Part 1

Research & Brain Storming

After receiving our design brief we then went off and brainstormed our problem and we looks at different sections, like the pros of remote learning, the cons, who it involves, devices people use, where it can be used, and what sort of application it is like a website or an app.

After we decided that it would be for primary school students from primary 6 onwards and teachers. Then we came up with different ideas of what we could do and one of our ideas was basically the meta verse so when Mark Zuckerberg cam out with the meta verse Jordan says he stole his idea haha.

We also carried out research  on remote learning, looked at different competitors  to see what they where doing and carried out a survey. You ca see all of our research on our notion just click the notion icon at the bottom of the page.

My Role

  • Web designer
  • Web developer
  • Essay author

Part 2

User Personas

After carrying out our brainstorming we decided to create 3 different user personas so that we can get a grasp on who we are designing for and what they need. In each of them we added their name, age and occupation and also their interests, goals and pain points. These will help us gain more of an insight of what my users are like.

We created three different personas, One was a teachers, one was a student and the final one was a parent. We created these three as we thought it would give us a wide range of different users so that we could understand the needs of everyone.

User persona 1
User persona 2
User persona 3

Part 3

User Flows

Our next step after doing research and creating our user personas and deciding on who it was for and that it would be a web app on a laptop but if taken further could be designed for a mobile or table. We then created a user flow for the application so that we could see howe users would flow through it and how they would interact with the different pages. So that we could make it easy for them to get what they want in the quickest time as no one likes to spend ages looking for what they want.

Part 4

Journey & Empathy Mapping

The first image shows our empathy map that we created as part of the research for creating this app. This empathy map that we created to give us a deeper insight into our customer base on what they think & feel, see, say & do, and what they hear. It also shows their pains and gains.

We found creating this empathy map for our potential customers very useful as it allowed us to gain a further and better insight to them so that we can create our app in the best way possible so that all of our users get a good experience from the app and that they actually find it beneficial and helpful too them.

The second picture below is our journey map that we created that shows all of the different actions that the user can take, any questions they might have when using the app, any happy moments they may have when successfully using the app, any pain points that they may come across, and any opportunities that they may discover when using the app.

Part 5

Card Sorting

To figure out where all of our pages will be linked together we carried out a card sorting exercise. First we organised our main pages so we could see how many pages we will have and where each one of them will lead too. We then typed out our sub pages and started putting them under the page that they will be part of.

This was a good exercise as it allowed us to visualise how our application and make sure that we have all of the pages we need and that all of the sub pages are in with the correct main pages.

Part 6

Crazy 8s

As we have done before when designing UIs for other projects. We decided to carry out the crazy 8s task that allowed us to come up with 8 different ideas in 8 minutes. We picked 8 different screens that will be in the app and designed each of them quickly. This was a good and helpful task as it allowed us to get some ideas for screens and started the ball rolling in the sketching phase and allowed us to easily think of designs for the other pages as well.

Part 7

Branding, word marque & tagline

After another meeting with my group we decided that we needed a good brand for our educational hybrid app, one that fitted our voice and tone well and suited what we where going for. First we looked at what we where gonna call our app, we looked at many different words that associated with education.

After looking at all of these we decided to see what educate was in different languages and after putting educate into google translate we found that educate in latin is educare. We both thought that this was a great name for our project as it has the word care in it and thats one of the ideas we want to get across with our app.

Below is the final word marque that we decided too use, this is due to the E being designed as an abstract representation of an old style rotary  phone. As one of our main features is video and voice chatting between teachers and their classes. We also discovered when looking at the E it resembles books stacked up in a pile.

We then decided that our brand needed a tagline, which made it clear what our application offers. So we brainstormed 9 different taglines we liked then finally decided on the one we choose which you can see below. We thought it was the best and it rolls off the tongue well.

"Education for the next generation"

Part 8

Voice/tone, brand values & colour

We wanted our voice & tone for our app to be simple, educational and family orientated.

We also decided that our brand should have some values and they should be simplicity, community, user centred and family orientated. I believe we achieved all of these in our design and the UX of the app.

After we then decided on our entire colour pallet:

  1. 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.
  2. 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 colours
  3. The next colour we choose was white as it is serene and calming.
  4. The final colour we choose was black as it represents power and sophistication.

Part 9

Icons & Element collage

We created an element collage for our application Educare, it shows the key elements in our application. It shows the logo, text, typography, images, colour pallet, icons, navigation tabs and buttons

Part 10

Sketches/LO-FI Mockups

After sorting everything else out about the app we then started in on designing what our screens will look like. As we decided that we would design this app for both the teachers and the students we have too design 2 sets of screens cause teachers will be able to do more on the app than students.


  1. 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 that their teacher has set.
  2. The first 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 to the profile page.


  1. 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.
  2. 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.



Part 11

MID-FI Mockups

Below shows the different MIDFI mockups that we created for our application. They are just basic mockups that show how each page will be laid out and where the different elements of he screen will be placed they are like our sketches but they have more detail in them and they allow you too understand about what will be placed where in each page like where the brand will be, where buttons are placed and where the content will go. It also allows us to get everything right before we start creating our HIFI mockups.

I have just shown a few images as we have soo many it would make the page very long and probably boring haha.

The images that I have added below are the same as the previous in the sketches section to show them advanced further.



Part 12

HI-FI Mockups & Final Design

Below you can see the final outcome of the application. I have included the Figma file so that you can navigate through the app yourself and get a feel for what it would be like as it has been prototyped a bit to show how you can navigate through it. Overall I think our app turned out really good and could be taken further with different features added into it.