Designing an Educative Mobile App
By: Viggo Kavermann
Class: DDM2D
Date: 1-11-2024
Module: 1_6: User-Centered Design
Teacher: Patrick Gielisse
Class: DDM2D
Date: 1-11-2024
Module: 1_6: User-Centered Design
Teacher: Patrick Gielisse
Introduction
As part of my education at SiNTLUCAS, my classmated and I were each tasked with designing an educative mobile app using Adobe XD and Adobe Illustrator.
This assignment was part of module 1_6: User-Centered Design, and it had the intention of teaching us how to use new software, and how to design and simplify a user-interface for a specific audience.
Our educative website had to fit on the newest smartphone devices. It had to be simple, easy to navigate, and we had to aim it towards a target audience of kids who are around the ages of 6 - 10 years.
This assignment was part of module 1_6: User-Centered Design, and it had the intention of teaching us how to use new software, and how to design and simplify a user-interface for a specific audience.
Our educative website had to fit on the newest smartphone devices. It had to be simple, easy to navigate, and we had to aim it towards a target audience of kids who are around the ages of 6 - 10 years.
Debriefing
The first step of the assignment was to create a debriefing of the whole assignment.
We were tasked with visiting the website mijnlucas.sintlucas.nl where we would find all the necessary information, which we then had to re-write into a shorter and simpler version using Microsoft Word. This way we could get a general idea of what the whole assignment was about and what we had to do.
Here you can see my debriefing:
NOTE: This debriefing is in Dutch.
We were tasked with visiting the website mijnlucas.sintlucas.nl where we would find all the necessary information, which we then had to re-write into a shorter and simpler version using Microsoft Word. This way we could get a general idea of what the whole assignment was about and what we had to do.
Here you can see my debriefing:
NOTE: This debriefing is in Dutch.
Beoogde doel van het project:
Het doel van dit project is om verder te werken aan het ontwikkelen van onze vaardigheden door Adobe programma’s te gebruiken waar we nog niet erg bekend mee zijn, hiermee gaan we een interactief en aantrekkelijk gebruikersinterface ontwerpen voor een bepaalde doelgroep.
We gaan ook leren hoe we de gebruikerservaring beter kunnen maken door rekening te houden met de behoeften en voorkeuren van de doelgroep, als de doelgroep bepaalde eisen stelt dan moet ons eindwerk daar ook aan voldoen zodat het zo goed mogelijk bij hun past.
We leren Adobe Illustrator te gebruiken op een basisniveau, we moeten kunnen uitleggen waarom we ons verder moeten ontwikkelen met Adobe Illustrator, we kunnen op een basisniveau werken met Adobe XD, we ontwikkelen onze toolbox verder, en we kunnen uitleggen wat een wireframe en een userflow zijn en waar deze dingen mij bij kunnen helpen.
We gaan ook leren hoe we de gebruikerservaring beter kunnen maken door rekening te houden met de behoeften en voorkeuren van de doelgroep, als de doelgroep bepaalde eisen stelt dan moet ons eindwerk daar ook aan voldoen zodat het zo goed mogelijk bij hun past.
We leren Adobe Illustrator te gebruiken op een basisniveau, we moeten kunnen uitleggen waarom we ons verder moeten ontwikkelen met Adobe Illustrator, we kunnen op een basisniveau werken met Adobe XD, we ontwikkelen onze toolbox verder, en we kunnen uitleggen wat een wireframe en een userflow zijn en waar deze dingen mij bij kunnen helpen.
Doelgroep die je wilt aanspreken:
De doelgroep waar we ons op moeten focussen zijn lagere scholen, zij willen graag een boeiende en interactieve leerervaring kunnen maken voor hun leerlingen in de vorm van een educatieve game of app.
Deze lagere scholen zijn op zoek naar educatieve games voor kinderen van 6 tot 10 jaar oud, zij willen zich vooral focussen op de vakken Engels, Nederlands, Rekenen, Geschiedenis en Aardrijkskunde.
De mensen voor wie het eindwerk (de educatieve game of app interface) is bestemd zijn dus jongeren tussen de 6 en 10 jaar oud van lagere scholen, het interface moet er dus simpel uit zien, het moet makkelijk zijn om te navigeren en het moet ook aantrekkelijk zijn voor jonge kinderen, veel goofy en kleurvolle aspecten gebruiken zou dus goed kunnen helpen om de aandacht van de doelgroep te kunnen trekken en om het eindwerk ook werkelijk aantrekkelijk te kunnen maken, zo ziet het er leuk en interessant uit en vind de doelgroep het minder saai.
Deze lagere scholen zijn op zoek naar educatieve games voor kinderen van 6 tot 10 jaar oud, zij willen zich vooral focussen op de vakken Engels, Nederlands, Rekenen, Geschiedenis en Aardrijkskunde.
De mensen voor wie het eindwerk (de educatieve game of app interface) is bestemd zijn dus jongeren tussen de 6 en 10 jaar oud van lagere scholen, het interface moet er dus simpel uit zien, het moet makkelijk zijn om te navigeren en het moet ook aantrekkelijk zijn voor jonge kinderen, veel goofy en kleurvolle aspecten gebruiken zou dus goed kunnen helpen om de aandacht van de doelgroep te kunnen trekken en om het eindwerk ook werkelijk aantrekkelijk te kunnen maken, zo ziet het er leuk en interessant uit en vind de doelgroep het minder saai.
Eisen waar het project aan moet voldoen:
We moeten een Behance pagina maken waarin we onze debriefing, onderzoek, wireframe, userflow, drie uitgewerkte versies van drie user interface schermen die bij de doelgroep passen, de interactieve en uitgewerkte verzie van onze user interface, een link uit Adobe XD waarmee andere mensen het interface kunnen testen, ons denk & proces, onze onderbouwing, de feedback die we hebben ontvangen, wat we met de feedback hebben gedaan en een reflectie.
Uiteindelijk moeten we dus een Behance pagina inleveren die laat zien wat we hebben gemaakt en hoe we dat hebben gedaan (hoe ons proces er dus uit zag).
Het interface dat we gaan maken moet dus simpel, duidelijk en makkelijk zijn om te gebruiken, en het moet ook passen bij een bepaald doelgroep.
Uiteindelijk moeten we dus een Behance pagina inleveren die laat zien wat we hebben gemaakt en hoe we dat hebben gedaan (hoe ons proces er dus uit zag).
Het interface dat we gaan maken moet dus simpel, duidelijk en makkelijk zijn om te gebruiken, en het moet ook passen bij een bepaald doelgroep.
Product Analysis
The second step of the assignment was to analyze the product we were tasked with creating.
We had to look up several images of other user-interfaces and use them as inspiration for our own work.
Of course, we couldn't completely copy the designs, but it was important that we could get an idea of what we really needed to include and how we could present it in a simple way without overcrowding the screen with options.
Here you can see the reference images that I gathered from the internet:
We had to look up several images of other user-interfaces and use them as inspiration for our own work.
Of course, we couldn't completely copy the designs, but it was important that we could get an idea of what we really needed to include and how we could present it in a simple way without overcrowding the screen with options.
Here you can see the reference images that I gathered from the internet:
Wireframes & Userflow
The third step of the assignment was to create a wireframe and a userflow for our own educative website.
We had to make a simple sketch of where we would want all of the buttons to be, as well as thinking of where each button would lead so that the user would have a simple way of navigating our website.
Here you can see my original wireframe and userflow before I received any feedback from my teacher:
We had to make a simple sketch of where we would want all of the buttons to be, as well as thinking of where each button would lead so that the user would have a simple way of navigating our website.
Here you can see my original wireframe and userflow before I received any feedback from my teacher:
We actually had to make a physical sketch of our wireframe on a sheet of paper, but because I didn't quite understand the message that mentioned this at first and felt like I could do it more quickly digitally, I skipped straight ahead to making the wireframe in Adobe XD to save some time. I also believed that doing it this way would make it easier to change anything on the fly, as I could just easily drag and scale a bunch of rectangles, while if I drew it on a physical sheet of paper I would have to erase everything whenever I wanted to change something.
Final Wireframe
The fourth and final step of the assignment was to ask our teacher for feedback on our wireframe and userflow, make some changes, create custom vector icons using Adobe Illustrator, and finalize our design.
Here you can see all of the vector icons that I created within Adobe Illustrator:
Here you can see all of the vector icons that I created within Adobe Illustrator:
And finally, here you can see the finished version of my educative website after I received feedback from my teacher:
NOTE: Some parts, such as the subjects and their levels, are still white because we only had to finalize 3 of the pages of our educative website.
NOTE: Some parts, such as the subjects and their levels, are still white because we only had to finalize 3 of the pages of our educative website.
If you would like to try out the website by yourself, here is a link to it: https://xd.adobe.com/view/15ffcaa4-2732-4781-8b4f-50c9f549f6f1-40ac/
In conclusion, I had a lot of fun working on this assignment. It was mostly pretty simple to understand, it was very fun to work with Adobe XD, and I learned a lot of new things that will certainly help me out in the future.
I found it really enjoyable to mess around with different ways to simplify a user-interface, there are so many ways you can make it look unique and it was really fun to get the chance to mess around with it.
There were some things that I would like to have improved, but due to strict time limitations I was sadly unable to.
All in all, I don't think I would want to change anything as I am very sattisfied with the final result.
I found it really enjoyable to mess around with different ways to simplify a user-interface, there are so many ways you can make it look unique and it was really fun to get the chance to mess around with it.
There were some things that I would like to have improved, but due to strict time limitations I was sadly unable to.
All in all, I don't think I would want to change anything as I am very sattisfied with the final result.
