Overview

Student vs Teacher View & Login

Based on our user research, we wanted to design a solution that takes into account the children's needs as well as the the teacher's. So, we decided we wanted to make technology a tool to engage and support children's reading. We came to conclusion of a reading-based app. This way children can be entertained while also developing their strong foundational skills.

Since school has a large impact in a child's interest and skills in reading, we decided to implement a class code fetaure into our design. As a result, our design solution currently includes a seperate teacher and student login. Teachers would create class codes on Page Friends and their students can join them. Based on the status of the user, they would different controls as well as access to different features. Teachers would have access to their students profiles and be able to see their student's specific stats, such as book interests, fluency, hours, and or other literacy statistics. The teacher can get a sense of each student's level as well as the stats of the overall class, allowing them to create their lessons based on those statistics. Additionally, if teachers sees that a student has a high screen time on the app, they can let the student know or stop them for logging in to further prevent screen addiction.

However, our primary target user are elementary student, and our app is designed to be implemented in or outside of classrooms. With this in mind, our current high-fidelity prototype focuses on the primary users while ignoring most of the teacher and classroom features. However, teacher and classroom features can be seen within our low-fidelity prototype and integrated within the student's view of the app. For more information, refer to "Limitations & Future Plans" page.

Furthermore, "collecting characters" also fosters emotional connection and enhances literary comprehension. Characters only unlock when the user records themselves reading and completes all the pages in a book. Thus, if a child wants a specfic character, they must read. As such, child users will develop a deeper connection to the story because they actively  "earning" the characters through their own reading effort. As users come to fully appreciate a newly unlocked character, they will naturally look back at the text to understand that character's context, motives, and background, which further boosts their interest, exploration, and comphrension in storytelling. 

Literature Research

Our decision to implement gamification into our design was influenced by our literature. Besides the benefits of our design's gamification features explained above, scientific studies have futher shown that gamification engages reading and comprehensive skills while also increasing the personal reading interest of the user. In the article "Impact of a gamified platform in the promotion of reading comprehension and attitudes towards reading in primary education", Prados Sánchez et al. (2023) conducted a case study that focused on the impacts of gamified learning vs traditional learning. The results shows that compared to traditional strategies, gamified components and platforms has a positive impact on students’ attitudes towards reading and on childrens reading comprehension. As such, we decided it would best to use gamification as way of making reading more fun and engaging among children.

Market Research

Coming with our final design for our gamified components was tricky as we didn't want to create a product that has already been made by another app. So, during market research we looked through already existing literacy apps for children. Most of which including some sort of gamified component. The one thing we noticed throughout our market research is that most of the games in these apps were repetitive such as the same style memorization and phonics game. To avoid this issue, we decided to come up with our "character collecting" component. Each of the characters you unlock is unique and different, and is therefore preventing gaming fatigue (or in this case, reading fatigue). When added to the user's town, each character will interact differently based on their personalities, as well as games personalized by the user's own interests and reading level. As explained above, if the user does not like the book or character within the book, they don't have to read it. Simply put, Page Friends is the user's personal collection of books and character interests.

Library Database

Our library and reading design accomplishes two of the criterias for intrinsic motivation: choice and curiosity. Page Friends does not force its users to read specific or assigned books, but instead lets user choose what book they want to read or what character they want to unlock. We chose this design purposefully to avoid confining users to reading goals they lack the internal motivation to achieve. Furthermore, we did not want to increase their disinterest in reading by forcing them to read a book they don't enjoy, which would only would only damage their engagement and drive them away from reading entirely. 

Additionally, a study conduced by Ives et al. (2020) found that the genre that a student enjoys reading can have an influence on autonomous motivation and reading frequency. Therefore, being able to provide our users with a variety of book options and genres become a priority in our design. We wanted our users to be able to explore and choose their own reading adventure, which is also why we decided to add a search button to our library page. We wanted to give users as much autonomy and choice as possible. This way they aren't restricted or forced to read stories they don't enjoy, which would only decrease their engagment with literature and further increase their disinterest in reading.

Above the recording, the user can take notes in the "Notes" box. Next to the label is a pencil icon, which is again, to provide clarity of what the box is supposed to do. The user can take notes by clicking the box. The note and page it was taken on will be saved and it can always be accessed later on. Adding this feature allows readers to deeper engage and focus with the text, enhancing memory retention and allowing them to refer back and connect ideas. Similarly, for this reason we also added a highlighting and underlining feature, found underneath the recording box. The buttons are labelled "Highlight" and "Underline" and are colored orange to differentiate them from the "Back" navigation button. Again, these features were added to transform the user's passive reading experience into an active learning process.

However, we purposefully did not make notetaking a requirement for completing a book. This decision was made because the recording feature already transforms reading into a more active process, and thus we did not want to further force the user to take notes if they did not think it was necessary. Additionally, notes are only useful to whoever is taking them, so forcing our users to write notes may seem too tedious or worthless to them. Especially, if they do not plan on referring back to their notes.

At the very bottom of the book is the page number and orange arrows. The orange arrows turn to the next page or go back a page. This simply design was done intentionally to keep our design simplistic and intuitive for users. Additionally, in the top right corner of the book is the book's read aloud fuction marked by a volume button. If the user is struggling to read everything on the page, they can click the button and an AI voice will read the page for them. Note that this does not mean they completed the page as they still need to make their own voice recording of the reading. This was purposefully done to ensure that users learn from the reading process, learning how to pronounce words and read from the page through the read aloud voice fuction and not as a shortcut that harms their education.

Additionally, we intentionally made Page Friend customizable because, as mentioned by Ciampa (2016) and explained in the "Library Database" section, we wanted to continue promoting choice within our design to further promote intrinsic motivation. By personally customizing Page Friend, users build a personal connection to their AI which would further motivates them to read and interact with the bot.

Market Research

During our market research, we found that one of the strengths that many current literacy apps have is that they provide some sort of free printout, award, or certificate that users can download and use. This was seen in apps such as “Reading Eggs” (Blake eLearning, 2008), “Duolingo ABC” (Duolingo, 2020), and “Teach Your Monster to Read” (Teach Your Monster, 2019). All of which have received positive reviews based on their website feed. As a result, we decided to take inspiration from this and also include an awards and achievements section in our design. Integrating this feature into our design incentivizes users to achieve literary milestones, boosting engagement and motivation through earned awards and achievements. 

Our orginal Dashboard design on the left, originally consisted of six widgets: "My Books", "Games", "Visit Town", "Achievements", "Library", and a Character widget. To reduce the amount of widgets, we decided to combine some of the widgets into one, including “My Books” and “Library” into only “Library” as well as “Visit Town” and “Games” into only “Visit Town”. This right shows our final Dashboard design, where there are now only four widgets:  "Library", "Visit Town", "Achievments", and a Character widget.

Our final design is a huge improvement from the original considering how it is less overwhelming and overstimulating. This final design is less cluttered and packed, which makes it easier for current and new users to navigate the system without feeling stressed about all the features Page Friends have to offer. Additionally, this design keeps children more engaged with the main key features of the app instead of messing around with less important features.

The interfaces for the “My Books” and “Library” were very similar, both letting users search and scroll through a selection of books, so we decided to combine elements from each interface. Since we received positive reviews from our participants about how easy it was to navigate during usability testing, we wanted to keep the same style of interfaces when combining “My Books” and “Library”. So in the end, our final design kept the same “Back” and “Search” buttons both in the low-fidelity for “My Books” and “Library”, the tabs on the side of the low-fidelity of “My Books”, and finally the same style of scrolling through books from the low-fidelity of “Library”. The final design could be seen above on the right side.