.png)
PagePal
Your Personal Reading Companion
Project Brief
01
Project Timeline
Project Type
Disciplines
Front-End Development
My Contribution
Web Development
Ideation
Project Overview
02
At its core, Page Pal is designed to transform reading from a solitary activity into a shared, enriching experience. The app empowers users to set personalized reading goals, track their progress, and connect with a community of book lovers. By combining tools for goal management, progress tracking, and social interaction, Page Pal helps users stay motivated, discover new books, and celebrate their literary achievements together.
Problem Area
1
The "culture of distractions" has led to a significant reduction in attention spans, making it difficult for individuals to engage in tasks that require deep focus, like reading.
2
Despite the proven cognitive and emotional benefits of reading, individuals struggle to maintain consistent reading habits in a world filled with constant digital distractions.
3
Encouraging users to prioritize reading despite constant digital distractions requires innovative solutions, such as personalized tools and gamification.
Page Pal addresses these challenges by offering users a personalized reading companion. With intuitive tools to track reading progress, set achievable goals, and share literary journeys with peers, Page Pal is designed to enhance the reading experience. As a book lover, I created this application to fulfill my needs for documenting book annotations and sharing my reading journey with fellow enthusiasts, which led to the ideation of Page Pal.
Ideation
03
Initial idea
The project started with a simple brief: design a web application that solves a real-world problem. As someone who loves reading and values responsible media consumption, I decided to create Page Pal.
What was the motivation behind it...?
I wanted a tool to track my own reading progress, jot down notes, and share recommendations with friends. That’s how Page Pal came to life: a place where users can set goals, track their progress, and celebrate their reading journey together.
User Flow Map
The User Flow Map for Page Pal outlines the intuitive journey users take across four key flows: Goal Management, Current Read Tracking, Data Insights, and Friend Activity. It guides users through setting reading goals, logging progress, gaining insights into their habits, and engaging with friends’ reading activities. Designed for simplicity, the flow ensures users can navigate the app effortlessly while staying motivated and connected.
Initial Sketch
The first step was sketching out the core features of Page Pal. I focused on creating a simple, intuitive layout for goal setting, progress tracking, and social interaction. These early sketches helped me visualize how users would navigate the app and interact with its key functionalities.
.png)
Iterations
04
Mid-Fi Prototype
With the sketches as a foundation, I moved on to the Mid-Fi prototype. This version included the main sections: User Goals, Current Reads, Data Insights, and Friend Activity. I introduced pop-up tabs for editing goals and tracking progress, ensuring the design was clean and easy to use. The prototype also featured a “Quote of the Day” section to encourage engagement and knowledge sharing.
Figma Prototype
Using the Mid-fidelity prototype, I recreated the design in Figma to get a better idea of diving sections and creating components.
A “Quote of the Day” section was integrated alongside the user goal tab to encourage user engagement and increase knowledge sharing.
And the Coding begins!
In this iteration, I added a new “Book Annotations” section under Data Insights, allowing users to save and revisit their notes. I also experimented with colors and layouts to refine the design, ensuring it was both functional and visually appealing. To enhance the mobile experience, I introduced a scrolling flow similar to other single-page websites, making navigation smoother and more intuitive.
Final Product
05
Final Iteration
The final iteration focused on polishing the design and adding user-friendly features. I applied a cohesive color palette, introduced pop-up error messages and form input placeholders, and enabled users to add friends and give Kudos for reading progress. Additionally, the “Completed Books” section was expanded, allowing users to save annotations and track their reading history more effectively.
Features
Features
06
Final Product
The final version of Page Pal is now live and ready for you to explore! This user-friendly web application is designed to help readers build consistent reading habits and connect with a community of book lovers.
Technology
07
HTML5
CSS3
JavaScript
Evaluation
08
What I Enjoyed Most
Developing this application required extensive testing and experimentation with layout, design, colors, and functionalities. I believe I executed a straightforward plan effectively, however, if given more time, I would have planned for additional features like API or SQL integration.
Despite these limitations, I’m pleased with the final outcome! The application is more aesthetically pleasing, includes additional functions, and has improved in terms of accessibility.
My Key Takeaways...
Coding is...fun? I enjoyed the process more than I anticipated. This project has inspired me to experiment with SwiftUI.
Planning makes perfect: It all started with an Excel sheet with lists of data models, then rough sketches to more refined prototype, I have learned to trust the process instead of jumping right into coding.
Never stop learning: Overall this was a significant learning curve f0r me as someone coming from a no-code background, however every step of the process was extremely rewarding as I learn something new making the countless hours of fixing bugs worth it!