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
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.