PagePal
Your Personal Reading Companion
Reading Progress Tracking Tool: Designed for book lovers, by a book lover!
University Project
3 months
2024
Wed Design, JavaScript
When was the last time you read a book?
What happened to the New Year's resolutions you made? Those books you saved to your Goodreads but never got around to reading?
You’re not alone! In today’s fast-paced digital era, maintaining a consistent reading habit has become increasingly challenging.
Sorry no I haven't…I've been… busy! I don't think I can come to book club this week.
Have you finished that book we talked about?
Aren't you unemployed? Just pick up that book bro.
Sam sent you 10 new videos!
PROBLEM
Digital Distractions & Inconsistent Reading Habits
The "culture of distractions" has significantly reduced attention spans, making it difficult to focus on reading. Despite its cognitive and emotional benefits, individuals struggle to prioritize reading amidst constant digital interruptions.
Have you finished the new
show on Netflix?
#1 Key Finding
Attention Span Crisis
Digital distractions make it harder to focus on immersive activities like reading.
#2 Key Finding
Lack of Motivation
Many readers abandon books due to a lack of structured goal-setting and tracking.
#3 Key Finding
Social Engagement Gap
Reading is often perceived as a solitary activity, making it difficult to sustain motivation.
This has greatly inspired the creation of PagePal!
IDENTIFYING THE PROBLEM AREA
PROBLEM STATEMENT
Many individuals struggle to maintain a consistent reading habit due to digital distractions, lack of personalized goal tracking, and minimal social engagement.
ADDRESS THE GAP
MY DESIGN GOAL IS…
To develop a web-based reading companion that enables users to set personalized goals, track progress, and engage with a community of book lovers.
HOW THE SOLUTION ADDRESSES THE GAP
Introducing PagePal
PagePal is a web application designed to transform reading from a solitary activity into a shared, enriching experience. It empowers users to set goals, track progress, and connect with fellow readers.
User Goal Management
Set and track personalized reading goals with visual indicators.
Data Insights
Access informative charts and statistics on reading habits.
Current Read Tracking
Log pages read, annotate books, and update progress in real-time.
Friend Activity
Engage with a community, track friends’ reading progress, and exchange recommendations.
IDEATION
User Flow Mapping
I designed a structured user journey around four key flows:
Goal Management: Users set reading goals based on books, genres, or deadlines.
Current Read Tracking: Seamlessly log reading progress and annotations.
Data Insights: Visualize reading habits through charts and comparisons.
Friend Activity: Follow friends' progress and interact through book recommendations.
IDEATION
Initial Sketch
The first step was sketching out the core features of PagePal. 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.
WIREFRAMES
Low-Fidelity Prototype
With the sketches as a foundation, I moved on to the Mid-Fidelity 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 mobile wireframes closely mirror the desktop version in functionality but are optimized for smaller screens.
WIREFRAMES
Mid-Fidelity Prototype
Using the Mid-fidelity prototype, I recreated the design in Figma to get a better idea of diving sections and creating components.
I integrated a 'Quote of the Day' section alongside the user goal tab to encourage engagement and knowledge sharing.
AND THE CODING BEGINS!
High-Fidelity Prototype
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.
RESULT
Final Design
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.
The final version of Page Pal is now live and ready for you to explore!
Reflecting back
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.
Key Takeaways
Planning makes perfect: It all started with an Excel sheet listing data models, then moved from rough sketches to a refined prototype. I have learned to trust the process instead of jumping straight into coding.
Coding is...fun? I enjoyed the process more than I anticipated. This project has inspired me to experiment with SwiftUI.
Have a question, some feedback, or an idea? Let’s talk about it over matcha!
Let’s connect!
Portfolio v0.2
Designed by Lan Hoang!