mobile & app
GeoQuest
design & development
back to projects
Geoquest
the gamifiction and future of elearning.
MOBILE APP DESIGN & DEVELOPMENT
For my final year 'Computing Project', I chose the subject of the gamification, history & future of eLearning. I became heavily interested in the subject, especially when looking at the future.
The project consisted of a 12,000 word research dissertation on the subject, I then went through an in-depth design process with colours, fonts, icons, logos, user personas & scenarios, wireframing & prototyping.
PROJECT
The final deliverables were a hi-fi prototype created using Figma, Photoshop & Framer X, a promotional video and an app created in Android Studio using XML & JavaScript.
I received an 87 on the project, the highest grade on my course, you can download the entire project here if you would like to see the full research and design process.
The project consisted of a 12,000 word research dissertation on the subject, I then went through an in-depth design process with colours, fonts, icons, logos, user personas & scenarios, wireframing & prototyping.
PROJECT
The final deliverables were a hi-fi prototype created using Figma, Photoshop & Framer X, a promotional video and an app created in Android Studio using XML & JavaScript.
I received an 87 on the project, the highest grade on my course, you can download the entire project here if you would like to see the full research and design process.
INDUSTRY
Elearning
SKILLS
User Experience
User Interface
Mobile App Design
App Development
Wireframing
Prototyping
Design Research
Graphic Design
PROGRAMMES
Photoshop
Figma
Framer X
Premiere Pro
After Effects
Android Studio
Elearning
SKILLS
User Experience
User Interface
Mobile App Design
App Development
Wireframing
Prototyping
Design Research
Graphic Design
PROGRAMMES
Photoshop
Figma
Framer X
Premiere Pro
After Effects
Android Studio
PROCESS
Research, research & research
As this was going to be a long and very important project, the first step was to do some intense research into the area which involved learning about the history of elearning and mobile learning.
This lead me into finding out about the process of 'gamification' which is basically taking aspects from games such as rewards, badges and competition and crossing them over with learning solutions.
I then went into deeper research on the current solutions and also what elearning and gamification might possibly look like in the future, getting in touch with some experts in the elearning and augmented/virtual reality industry to hear what their opinions are on the subject matter.
Before I began I had to set out what was needed and how I would go about this.
This lead me into finding out about the process of 'gamification' which is basically taking aspects from games such as rewards, badges and competition and crossing them over with learning solutions.
I then went into deeper research on the current solutions and also what elearning and gamification might possibly look like in the future, getting in touch with some experts in the elearning and augmented/virtual reality industry to hear what their opinions are on the subject matter.
Before I began I had to set out what was needed and how I would go about this.
CURRENT SOLUTIONS
Codecademy & Duolingo
I looked around and found lots of good examples of how people are currently incorporating gamification into elearning and not just in the obvious ways that you would commonly think of.
The chances are you use gamification in every day life but I'm not going to bore you with the full details, if you are really interested, you can download the full 13,784 word report here....
After investigating the subject for a number of weeks, I had concluded that Duolingo was the best solution that was currently out there, so I decided to run some tests of my own on the elearning application.
The chances are you use gamification in every day life but I'm not going to bore you with the full details, if you are really interested, you can download the full 13,784 word report here....
After investigating the subject for a number of weeks, I had concluded that Duolingo was the best solution that was currently out there, so I decided to run some tests of my own on the elearning application.
I started by getting together 10 Duolingo users and had them answer some simple questions to find out what they liked about the app, what they didn't like about the app and then suggestions on how to improve the app.
It was then time to start putting together some design ideas by looking at layouts of similar apps such as progressive puzzle games as this was the route I had decided to go down for my gamified elearning app.
At this point, I had to work out what aspects of gamification I would use for my app to work so I created a mind map.
It was then time to start putting together some design ideas by looking at layouts of similar apps such as progressive puzzle games as this was the route I had decided to go down for my gamified elearning app.
At this point, I had to work out what aspects of gamification I would use for my app to work so I created a mind map.
The elearning subject I decided to focus on was Geography so the first idea I came up with was to have a globe adventurer and decided on the name GeoBuddy and designed some colour palettes.
I realised during the process that the biggest complaint about Duolingo is that the lessons can become repetitive so I went back to the drawing board and thought a theme would be a good idea to keep the user as engaged as possible.
I liked the idea of having the pre-fix Geo involved as a potential user should easily be able to know that the app will be about something geography or location based.
I decided to use a Viking theme but GeoViking doesn't quite work and eViking could be about anything so I ended up going for GeoQuest as it shows the theme of the app and the quest gives the indication there's a bit more to be discovered.
I decided to use a Viking theme but GeoViking doesn't quite work and eViking could be about anything so I ended up going for GeoQuest as it shows the theme of the app and the quest gives the indication there's a bit more to be discovered.
COLOURS & FONTS
Colour Theory & Vikings
It was time to start thinking about what colours and fonts to use for my app.
As I decided on a Viking theme, I did some research into what colours would be associated with Nordic culture. Some traditional colours are reds, yellows, oranges, browns and blacks.
I also did some research into how colours are used in elearning and luckily reds, oranges and yellows are used to stimulate the mind, preventing boredom and stimulating mental activity so this was the colour scheme I decided on.
As I decided on a Viking theme, I did some research into what colours would be associated with Nordic culture. Some traditional colours are reds, yellows, oranges, browns and blacks.
I also did some research into how colours are used in elearning and luckily reds, oranges and yellows are used to stimulate the mind, preventing boredom and stimulating mental activity so this was the colour scheme I decided on.
Aa
Blackhood Bold
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Aa
Nordica
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Title
Article Title
Lead
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad.
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad.
Firebrick
primary colour
#B5011F
R 181
G 1
B 31
R 181
G 1
B 31
Orangey Yellow
primary colour
#F2AD22
R 242
G 173
B 34
R 242
G 173
B 34
Teal
primary colour
#168871
R 22
G 136
B 113
R 22
G 136
B 113
Black
secondary colour
#000000
R 0
G 0
B 0
R 0
G 0
B 0
White
primary colour
#ffffff
R 255
G 255
B 255
R 255
G 255
B 255
LOGO & ASSETS
George the Destroyer!
The next stage was making the design come to life by using the colours and theme to getting our first assets made such as the logo and the character.
The fonts I used were influenced by the theme so I had prepared that they would be part of the logo for GeoQuest.
The fonts I used were influenced by the theme so I had prepared that they would be part of the logo for GeoQuest.
I used some Norse runes texture as a mask on photoshop and put a Viking helmet on the Q. I ended up animating the logo on After Effects as the introduction to the app.
One of the main takes from my previous research into the subject was that users lose interest in elearning apps as there isn't usually much of a storyline, hence why I decided to try and have a look at popular games such as Angry Birds and Candy crush.
I decided to merge these storyline games with something that did go down well with Duolingo, Duo the owl, so I created my own character(s)....
One of the main takes from my previous research into the subject was that users lose interest in elearning apps as there isn't usually much of a storyline, hence why I decided to try and have a look at popular games such as Angry Birds and Candy crush.
I decided to merge these storyline games with something that did go down well with Duolingo, Duo the owl, so I created my own character(s)....
WIREFRAMES & COMPOSTITIONS
Finally, the design!
The first thing I needed to do was work out what pages I was going to need for the app to work, so I made a quick list of every screen needed.
I then drew up some rough sketches of the screens needed as a wireframe and then began the design stage.
PROTOTYPE & DEVELOPMENT
Discovery of Framer
After I designed all the screens, I needed to turn this idea into a working prototype. I did some research and as I wanted to have the most powerful prototype possible, I decided to create it on Framer X as they received lots of good reviews for powerful prototyping tools.
The fun wasn't over yet, I still had to develop the app and do some user testing on my finished prototype. So here is the app tutorial created in XML & Javscript on Android Studio.
USABILITY TESTING
Almost there
The final stage of the project was to test out the application to see how well it performs.
I decided to use the following usability testing methods: Pre-test questionnaire, session recordings, phones interviews and post-test questionnaires (SUS & open ended).
The main aspect of the testing was giving the user tasks they had to complete, with no help, to test out the usability of the app by recording the amount of clicks taken and how long it takes the user to get to the desired destination.
I decided to use the following usability testing methods: Pre-test questionnaire, session recordings, phones interviews and post-test questionnaires (SUS & open ended).
The main aspect of the testing was giving the user tasks they had to complete, with no help, to test out the usability of the app by recording the amount of clicks taken and how long it takes the user to get to the desired destination.
The majority of the users performed the tasks well except one who had a problem with most of the tasks, there's a lot of information there so I also ran an SUS test in which you can find out how user-friendly your design or creation is and boil it down to a final number on a scale.
VIDEO
I lied, there's still one more!
I decided to come up with a promotional video for my application as I could not showcase the product in person due to the COVID-19 pandemic.
I created this quick video on Adobe Premiere Pro and it's just a quick run through of the screens.
I created this quick video on Adobe Premiere Pro and it's just a quick run through of the screens.