![](https://cdn.myportfolio.com/b0c75522-5ba8-489d-8999-403b39ba4406/b32c1c4d-6377-4b0e-bf96-c5e7d28cdf81_rw_1920.png?h=4d83b0b56094e122333629e8f9840e96)
(Phonodig Adobe XD Prototype)
Background
Phonodig is a personal project created using Adobe XD and inspired by my time spent teaching English abroad. Due to the covid-19 pandemic, classes in Hong Kong moved online. I had to adjust to teaching over Zoom and making use of a lot more digital materials than before. Phonics seemed to be the area which students struggled the most with and during this time, I was tasked with the creation of a lot of phonics learning material. This got me to thinking about how children learn about phonics and really piqued my interest in e-learning in general.
Concept
This educational app aims to teach young learners about phonics and blending in a somewhat gamified manner. Players are led by Frederic the Gopher through a series of levels. As players “dig down” they unlock new phonemes (i.e. units of sound).
There are 3 main tiers of difficulty ranging from very basic phonemes such as /a/,/b/, etc. to more complex ones such as /ai/,/igh/, etc..
Players are taught each phoneme in a a guided and linear fashion. First, they are introduced to the phoneme. After this they are presented with a number of sample words containing the phoneme. After this, they are presented with a sample sentence featuring the vocabulary that has been taught. Finally, in order to help solidify their knowledge, players complete a mini-game.
![](https://cdn.myportfolio.com/b0c75522-5ba8-489d-8999-403b39ba4406/4bc35348-04fd-4250-b7fe-bf63004ea530_rw_1920.png?h=7d6f5c8c80b75b3212fba2a85f7672a2)
A user flow created using Lucidchart
PROTOTYPing
After making some quick sketches, I developed some some rough wireframes. This allowed me to better visualise the overall layout of the application in simple terms.
![](https://cdn.myportfolio.com/b0c75522-5ba8-489d-8999-403b39ba4406/53c64c23-17d5-47fa-ba00-6f13976d9626_rw_600.png?h=5b31ac28d5a4e0915f3917625bf520f4)
![](https://cdn.myportfolio.com/b0c75522-5ba8-489d-8999-403b39ba4406/a5e7efd2-8a37-4112-a742-0ae3b2f6bfa1_rw_600.png?h=a8a88a41df09d8de1d42c5918a5916a5)
![](https://cdn.myportfolio.com/b0c75522-5ba8-489d-8999-403b39ba4406/7bb24f9e-da54-441c-a4bb-96180697560d_rw_600.png?h=864f84866f693b9544e7ea320e6cea44)
I then began working on a high fidelity Adobe XD prototype. Visually, I opted for a generally colourful style in order to appeal to the young target audience. The prototype can be found at the following link: Phonodig. Feel free to have a look at the video demo below.
Future Directions
As this was the first full project that I completed using Adobe XD, I learned a lot as I progressed.
I hope to create mini games within the app. I would also like to implement voice input features for users so that they can practice phonics sounds and receive feedback on their progress.