Embedded Files
Overview
Overview
Core Concept & Key Features
Core Concept & Key Features
Page Friends is a friendly, interactive, and engaging application that helps elementary level students build confidence and motivation to read. Page Friends has multiple key features which includes:
AI-powered personalized feedback so that kids can practice concepts and words at their own pace
AI-powered book recommendations based on previously read books so that kids can explore their interests
Literacy games to increase phonics and vocabulary
Read-aloud activities to practice phonics
Awards/certificates for achievements to boost motivation and engagement
Unlock characters from stories to boost engagement with literature by fostering personal connections with book characters
Addressing the Problem
Addressing the Problem
Page Friends is specifically designed to help improve children's reading skills while also fostering their own personal interest in literature. The app integrates AI as a tool for personalized learning, providing reading support for all individuals. Additionally, the design incorporates elements of gamification to further enhance children's reading experience and encourage adventure. Page Friends was intentionally designed to promote literature exploration among its user, allowing individuals to discover and build their own reading journey. With Page Friends, children will continously develop their literacy skills as well as their own personal interest in reading and storytelling.
User & System Interactions
User & System Interactions
There are six main flows/processes the user can interact with the system:
🔐 Onboarding Flow
Existing Users Login
New Users Sign-Up
🗺️ Main Homepage Dashboard
⚙️ Page Friend
📚 Library
🏘️ Visit Town
🏆 Achievements
The four Dashboard widgets above are explained further below:
⚙️ Page Friend
User Profile Settings
Customize AI Bot
📚 Library
Explore New Books
My Books Collection
Personal Reading List
🏘️ Vist Town
Character Interactions
Gameplay & Mini-Games
🏆Achievements
Earned Trophies
Earned Certificates
Each of these flows/processes will be explained more in depth below.
Page Friend's High Fidelity Prototype.
Page Friend's High Fidelity Prototype.
For a better view of the prototype visit: https://www.figma.com/design/Jow3Id0yA5XKIRmbYerhmp/Page-Friends-Hi-Fi?node-id=0-1&m=dev&t=XzxIklpy1v8WohsN-1
To interact with the prototype visit: https://www.figma.com/proto/Jow3Id0yA5XKIRmbYerhmp/Page-Friends-Hi-Fi?node-id=49-4&p=f&t=iAg2k9PcPQxpEL6A-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=49%3A4&show-proto-sidebar=1
Onboarding Flow
Onboarding Flow
The right shows a photo the high-fidelity prototype of our onboarding process. The start screen consists on two buttons, "Login" and "Sign Up".
If the user already has an account, they can click the "Login" button and they will be taken to a login page that asks the user for their username and password.
For first time users, the user will need to click the "Sign Up" button. The user will be taken to a page asking if they are a student or educator. Depending on who the user is, the onboarding process with differ.
Start Page
Start Page
Login Page
Login Page
Sign-Up Page
Sign-Up Page
Educator Sign-Up Process
Educator Sign-Up Process
For educators, the user will be asked to provide information such as the school they work at, a school email, a username, and a password.
After creating an account, they will be asked to select the key statistics they are interested in collecting from their students. Based on their selection, AI analytics will calculate and anaylize these stats throughout their students usage. This data will show up later in the teacher's main dashboard.
After selecting their interests, the user will then be asked to create a class code. This is the final step of the onboarding process.
After this, the user will be taken to the login screen and asked to login with their information they have just created.
Educator Sign-Up Process
Student Sign-Up Process
Student Sign-Up Process
For students, the user will be asked to provide information such as a school email, a class code, a username, and a password.
After creating an account the user will then be asked about there interests. The user will be given a bunch of different genres that they can select as their interest.
Once they've finished and clicked next, they will be given a diagnostic test. The diagnostic test consists of recording yourself reading a given text and answering questions about the text. This diagnostic test integrates the use of AI analytics to provide personal feedback for later.
After completing the tests, they will have completed the onboarding process and be taken to the main Dashboard.
Student Sign-Up Process
Dashboard
Dashboard
When student users log-in, they are immediately taken to the Dashboard as their main homepage. The Dashboard is where users have access to all the features and widgets Page Friends have to offer. There are four widgets the user can select: The "Library", "Visit Town", "Achievements" and the Character on the bottom left corner. Each widget will be explained more below.
Character - AI Page Friend
Character - AI Page Friend
Clicking on the Character on the bottom left corner of the dashboard, will open the user's profile page. Here, they can view or add a class code, customize their profile as well as their Character. This Character is known as "Page Friend" and it is AI bot that guides and teaches the user throughout their reading journey.
To view or add a class code, the user can select the "Class Code" button. The class code is a seven digit code that allows the user to be put in a classroom designed by their teachers. In a class, teachers have access to their students profile.
To customize their Page Friend, the user can click on the Page Friend character and it's customization page will pop up. Users can change the color or change the clothing to their Page Friend.
Users can also customize their own profiles by tapping on the words "Favorite Books". A selection screen will pop and the user can mark up to three books as their favorite. Note that users can only mark books that they have completed as their favorite.
Keep in mind that only teachers have access to view their student's profile, unless the student makes their profile public by clicking the "Private" button on the top right corner. If the user decides to make their profile public, then students from their classroom can see their profile. Note that the Public/Private feature only works when the user is part of a class.
Library Widget
Library Widget
Library (Explore, My Books, & Reading List) Flow
Library (Explore, My Books, & Reading List) Flow
Clicking the "Library" widget on the Dashboard takes the user to the "Welcome to Library!" page. The user is automatically on the "Explore" tab and can scroll through a large database of books including a "Recommended" section and from a wide selection of genres. If the user wants to search for a specific book, they have access to a search bar on the top right. Besides the "Explore" tab, users can also navigate to the "My Books" and "Reading List" tab.
The "My Books" tab shows the books the user has in-progress as well as the books they have already completed. The in-progress books have a progression bar underneath them, showing the percentage of the book they have completed so far as well as the number of pages they have left to finish it. The completed books have the star rating that the user gave the book underneath them.
The "Reading List" tab shows the books the user has added to the list as well as any books from their list that are currently in-progress. As more books fill up the "My Books" and "Reading List" tabs, the sections will expand and allow users to scroll just like the "Explore" page.
Filtering
Filtering
Users can filter for books by selecting the "Filter" button at the bottom of the tabs. They can filter for or filter out for specific genres, specific words, specfic authors, or filter a specfic range of pages.
Once completed, the "Filter" button will turn dark blue to show that it's activated. The books in the Library will now only match what's been added to the filter.
To clear the filter, users must click the "Filter" button again and hit the "Clear" button on the top left corner of the filter page. The "Filter" button will turn back to it's orginal light blue color to show that it has been deactivated.
Viewing Book Information
Viewing Book Information
When users select a book from the library, they are taken to the book's information page. This page provides the book's basic information including it's title, author/authors, illustrator/illustrators, the genre/genres, the number of pages it has, and a summary/description of the book. All books will include this information, however, depending on the book's status, a progression bar or star rating may show.
If the user selects a book that is in-progress, a progress bar on the top right will appear and they will have the option to continue reading.
If the user selects a book that they have already completed, their star rating of the book will appear on the top right and they will have the option to reread the story.
Viewing & Reading Books
Viewing & Reading Books
When viewing a book, user's are given three options "Back" (where they taken back to the library), "Start Reading" and "Add to Reading List".
If the user selects "Add to Reading List", the book will be added to their reading list for later. This could be accessed on Dashboard's "Library" widget, in the "Reading List" tab. The "Add to Reading List" button will change to "Remove to Reading List", which users can click if they want to remove the book from their list.
If the user selects "Start Reading", they are taken to the actual pages of the book. On each page, the user can take notes, highlight, or underline sentences from the book. The user has access to an AI chat bot - Page Friend, where they can ask about the story, vocabulary, or any questions they have in general about the literature. To completely finish the book, the user must record themselves reading using the microphone feature. As they read, Page Friend will analyze the user's reading skills and provide personalize feedback to them such as reading tips and advice.
After completing the book, the user will be asked to rate the story out of five stars. This data allows our AI to provide personalized reading recommendations to the user. Book recommendations can be found throughout the app including the "Library" recommendations section, interacting with town characters and getting recommendations from them, and or by directly asking Page Friend for a book recommendation.
After rating the book, the user will unlock a character from the story. Once they've unlocked a character, they can visit the character by clicking the "Visit in My Town" button, or hit the back button to be taken back to the "Library" page. Either way, the book will be completed and added to their history of completed books.
Visit Town Widget
Visit Town Widget
Town
Town
This is the town where users can scroll and interact with their characters.
Game
Game
This is one of the literacy games the user can be asked
There are two ways users can visit their town. The more practical way is by clicking the townhouse that says "Visit Town" on the main Dashboard. The other way is by selecting the "Visit in My Town" button after completing a book and unlocking a character from the story.
While in the town, the user can interact with the characters they've unlocked. Book characters can give out quests or tasks to the user, which can consist of different types of games, book challenges, or book recommendations. The game that the user can play will be based on their reading and comprehension level that has been evaluated by the app's AI analytics feature. As the user completes the games, AI will further analyze their progress and continue providing feedback and book recommendations based on their skill level and interests. As the user completes more books, more characters will move into their town. Once the town reaches full capacity, it will eventually expand and more places will be unlocked. As more places get unlocked, the user will be able to scroll and explore more parts of the town.
Achievements Widget
Achievements Widget
When users select the "Achievements" Widgets on the main Dashboard, they are taken to the "Awards & Achievments" page shown on the left. Within Page Friends, users can unlock and collect trophies and certificates. Certificates can be earned by completing books. When users click on one of the certificates, they can view it and print it out. Each certificate will be designed differently, each one written with a personalized messaged as well as the user's personal Page Friend. An example of a certificate could be seen on the botton right. Trophies can be earned by completing a list of tasks. When users click on one of the trophies, they can view the title of the trophy, the milestone, and the criteria for earning it. An example of a trophy could be seen on the top right. As users continue to read and interact with the characters they've unlocked, more certificates and trophies will be added to their collection. Users will always have access to previous and current awards that they have earned.
Page updated
Report abuse