FLVS Digital Library Discovery App
Supporting the expansion of the (FLVS) Florida Virtual School System's online learning platform.
MY ROLE
As a product designer helped develop and design a platform for parents to explore a curated library of recommended literature, which ensures that their children fulfill their language arts reading requirements each semester.
OUTCOMES
3.5x Faster Book Search 👉 The new filter features make searching for books 3.5 times faster, saving parents time and enhancing their experience.
84% Satisfaction with Recommendations 👉 The app allows parents to customize suggestions based on their kids' ages and interests, resulting in highly accurate and relevant suggestions.
80% Enjoyed the Experience 👉 Parents reported a 80% satisfaction rate with the modern and engaging design, which was enjoyed by parents and children.
PROJECT OVERVIEW
The Florida Virtual School System (FLVS) has been a pioneer in online education, offering a comprehensive K-12 curriculum through its virtual platform to students in Florida and across the U.S. At Compendiem Agency, I had the unique opportunity to partner with FLVS to enhance their educational tools for homeschooling parents of K-6 students.
SCOPE
This case study focuses on improving the literature discovery and selection experience for parents within the app.
PROBLEM SPACE
70% of parents spend over an hour weekly finding books for their kids, and 64% are dissatisfied with current recommendations.
Parents who homeschool their K-6 grades children face challenges ensuring they meet language arts reading requirements each semester. Currently, they rely on visiting the library or receiving emailed recommendations from the FLVS faculty, which is a time-consuming and ineffective process.
Goals
👉 Creating an all-new digital library platform that integrates into the FLVS Site.
👉 Streamlining the process to help parents quickly find and select appropriate books for their children.
👉 Creating an engaging experience for parents and children.
01 DISCOVER
Understanding Parents Needs and Discovering Existing Solutions on the Market
To gain profound insights into users’ needs and identify existing solutions, two research methods, interviews and competitive research were implemented:
Interviews
Here are the interview questions I worked on:
What are the primary criteria parents use when selecting literature for their children?
How do parents discover new books for their children?
What are parents' common pain points when searching for books online?
When and how often do parents usually read stories to their children?
How do children get involved in the process of picking books?
Competitive Research
I reviewed various digital book library apps including Epic, Google Reads and Amazon Kids. The solutions these competitors use served as the beginning point for the design. This research focused on three key areas: book search, book profiles, and visual design.
Research Outcomes
After completing the research, I synthesized the data to develop my insights and created two personas and one competitive analysis.
Personas
Insights
Parents need to know the age range, length, category, and a summary of the stories to choose them.
Children are involved in choosing stories and often pick them based on the cover.
Parents rely on other parents’ recommendations to select stories.
Parents need to be able to save books they want to read later.Parents often search for books by topics.
Competitive Research
02 DEFINE
Defining the Users Needs
I wrote the following user stories to highlight the app's core features that help users achieve their goals.
As a parent I need a
Robust filter system to refine my searches by age, length, and category (e.g., LGBTQ+ friendly).
Feature to set up profile for my children to customize the book recommendations.
Quick access to book recommendations on the homepage.
Easy-to-scan book profiles featuring tags, summaries, and detailed information about each book.
03 IDEATE
Mapping the Ideal Experience
After synthesizing the data, I conducted a sketching workshop and mapped out the key steps a parent would take to pick the right story for their children and read it.
Exploring Variations
Then I selected the search page which is the most critical page and sketched various solutions for parents to find books based on different criteria like topic, title, author, age, length, and category. They can also use an immersive filter form to refine their search.
After that, I selected a standout design based on the following user-centric considerations:
Intuitive Age Range Setting: Using a range slider for setting the age range is intuitive and user-friendly, allowing for seamless adjustments.
Consolidated Configuration: By grouping all configuration options in one section, users have a clear and cohesive interface where all adjustable parameters are easily accessible.
Readable Length Section: Square buttons in the length section make it easier to read. Studies show that a stacked format helps users scan information faster.
Story Boarding the Prototype
Then, I made a storyboard which was a lightweight, sketched wireframe I later used to build my prototype. Each screen included the UI elements and fundamental interactions for users to complete essential tasks.
04 LOW FIDELITY DESIGN
Low Fidelity Wireframes
After coming up with solid ideas and sketching process, I started to design low fidelity wireframes to present the ideas in a more clear way.
05 HIGH FIDELITY DESIGN
Creating Mood Boards
Before creating high-fidelity designs, I made two mood boards to showcase the app's look and feel. One featured a clean and playful design with cut-out illustrations reminding children book stories visuals, while the other had a brutalist style with vintage colors with the essence of old games.
Testing Out the Mood Boards
After testing two mood boards with high fidelity designs and the first mood board style selected due to its emphasis on content and a clean, accessible user interface.
Developed the UI Style Guide and Design System
After defining the final feel and look of product, I developed design system in Figma to ensure product consistency. My primary focus was on colors, illustrations, typography, and icons. I also developed a series of components to streamline and enhance the high-fidelity design process.
High fidelity screens and prototype
After defining the visual language system, I created the high-fidelity screens for the MVP and developed a clickable prototype to present the user experience and prepare for user testing.
06 USER TEST
User Testing
I recruited 10 participants and conducted 30-minute Zoom user test sessions with each of them.
All participants completed the tasks, however, they provided feedback on potential improvements. I prioritized their feedback and implemented two of them.
Before - Ambiguity in "Start Reading" Button and Banner Image
Users were unclear whether the "Start Reading" buttons referred to a book or something else. Additionally, they were uncertain if the banner image represented a book.
After - Book Header and Button Label for Better User Understanding
I updated the header to include the book's title and author, and changed the button label to "Read This Book" to make it clear that the header is recommending a specific book for users to read.
Before - Lack of Access to Recently Read Books
Users wanted an easy way to return to the books they recently read, either to reread or finish them.
After - Added "Recently Read" Section on Homepage
I added a "Recently Read" section at the top of the homepage, allowing users to access the books they recently read.
Solution
Examples of the Features Designed by me
Setting Profile For Children
Parents can set up personalized profiles for their children by entering their names, ages, and avatars. It can be challenging for parents to find age-appropriate books for their children, so the app should request the child's age to recommend suitable books effectively.
Exploring Books
Through the homepage, parents can explore book and topic recommendations provided by the app. They also can access the books that recently read.
Searching and Filtering Books
Parents need to find age-appropriate books for their children, understand the story duration, and determine if the book is educational. I added filters for age, length, and category on the search page to help with this.
Checking the profile of book
Parents want to know if a book is suitable for their children, save books for later, and read other parents' comments. They also need to know the book's age range, length, and category. To address these needs, I included a book summary, a heart icon to save books, and highlighted important information like age range, length, and category.
Prototype
This prototype demonstrates key product interactions. To ensure efficiency, only a selection of flows has been recorded.
Next Steps
As mentioned before, I made some quick refinements to the app based on user testing, but there are more improvements that will take additional time. The most important thing that I will do it as the next step is:
Adding to the onboarding: Adding a section in onboarding step to ask parents about their favorite children's topics or categories. This will improve the algorithm's ability to make personalized recommendations.