Custom Website Development for a Children's Book Publisher
Enabling on-the-fly personalization and purchase of books
The client
An Author and Online Seller of Children's Book
Our client is a Singapore-based boutique publisher of bestselling children's books. With a goal to make reading and learning fun for kids and engage them in unique ways, the client creates hyper-personalized, interesting, and feature-rich ebooks and books that enable the users to make their own books with pictures. These print-ready design templates allow customers to design their own books and purchase them for their kids or for gifting purposes.
PROJECT REQUIREMENTS
Developing an Intuitive Website for Personalized Kids' Books
The client had the vision to create a website that would allow users to easily design personalized, animated, and interactive books/ebooks for children. While they had conceptualized the overall website design and some elements, they lacked the technical expertise to fully bring this vision to life. Leveraging our extensive experience in digital publishing and web development, the client collaborated with us for kid's book e-store development from scratch that could allow users to create their own picture books online.
Some key requirements were:
Users should be able to personalize stories by inserting custom names, visuals, audio narrations, etc. with minimum friction
The website needs to provide an intuitive interface to select personalized elements and preview the final output before ordering printed copies
Animations, sounds, music, and text narration need to be seamlessly incorporated into customizable children's books to enrich the reading experience
PROJECT CHALLENGES
Navigating Personalization Complexities for a Seamless User Experience
Our team faced several key challenges in implementation and visualization:
Seamless Transitions and Page-Flipping Effect
Implementing smooth page transitions and page-flipping effects within the interactive ebooks posed technical challenges for our developers. Careful coordination between the frontend and backend was needed.
Longer Names Led to Spacing and Alignment Issues
When customers entered very long names for personalization, it often led to text spacing, formatting, and alignment issues in the final rendered output.
Handprint Image Issues
Users uploading handprint images posed unanticipated challenges if the images captured were not proper or fingers/handlines were not visible. Our algorithms needed to be robust to process poor-quality uploads or ask users to re-upload images if the parameters were not met.
Extensive Testing
Given the highly interactive and personalized nature of the ebooks, tremendous functionality testing was needed across different browsers, devices, and use cases to deliver a polished user experience.
On-the-Fly Character Customizatio
One key challenge was enabling real-time character customization and showing previews to users. As users selected custom preferences for characters (names, clothes, hairstyles, etc.), our team had to dynamically render the updated characters and insert them into the page visuals.
Generating Print-Ready PDF Online
We were required to generate instant PDF previews for user preview and back-end printing process, ensuring proper formatting across devices, dynamically embedding edits, and delivering good page load speeds.
OUR SOLUTION
Developing a Fully Interactive Website, Allowing Users to Browse & Shop from a Collection of Interactive Books
Identifying the needs of the client, we decided to delegate a team of 6 professionals, including developers, designers, and testers to take up the project.
1
Website Designing
When designing the website, our top priority was ensuring it accurately reflected our client's conceptualized vision for her target audience of children. Our website designers for children's books carefully crafted each element, image, and placement on the website to completely align with the desired theme and tone. Our designers worked diligently to make the website visually appealing and interesting for kids through intuitive animated and graphical components.
2
Website Development
The website was built using a React frontend framework and Laravel for the backend, leveraging our web developers' expertise to create a high-performing website with robust capabilities. Key features developed include.
Top features incorporated within the website
Previews before ordering
Easy signup/login
Handprint image upload & rendering
Email notifications
Read-aloud books
Shopping cart
Order history/ status tracking
Payment gateway integration
Gift cards
Wishlist
As a part of the development process, our developers embedded the following book features within the website
Custom Books
We developed custom books that allow users to put a child's name into the story as one of the characters and customize the illustrated character in just a few easy taps and clicks. Users also have the option to preview pages with your customizations before placing an order.
Unique features added to custom books-
Character avatars- In our current development phase, we are enabling this feature. It will allow children to create illustrated avatars of themselves to insert in the story as the main character or a side character.
Character customization- These books provide a range of hairstyles, skin tones, facial features, dresses, etc., enabling users to customize the story characters as they desire.
Read-aloud feature- These interactive ebooks come with word-for-word narration, highlighting text as it's read aloud. If required, parents can record custom narration in their own voice for a more familiar storytelling experience.
Sound effects and music- Other than allowing users to make their own digital books, some books also feature special sound effects and music in the background to keep the children gripped and build suspense and excitement.
Animations and multi-media- For certain books, we incorporated multimedia-rich content to transform reading into an engaging, dynamic experience for children.
Customized cover page- We have enabled the functionality for users to custom-made their book cover page. Users can personalize the front cover with your child's name, favorite colors, photographs, and art.
Musical ebooks- Users have the option to download musical ebooks that bring stories to life with songs and rhythms kids can sing along to.
Handprint Books
We created a functionality that allows users to personalize children's books with photos of their child's handprints. The process works as follows:
Parents upload photos containing images of their own hands alongside their child's hands.
We use computer vision and AI to automatically detect the hands in each image and mark key points on the hands, like finger joints and the edges of palms.
The handprints are then converted into cartoon illustrations of story characters that match the shape and proportions of the provided hand images. For example, a young child's handprint may be turned into an animal character such as a bear cub.
The personalized handprint characters are embedded within the books' existing illustrations.
Before finalizing an order, users can preview digital book pages featuring their custom handprint drawings integrated seamlessly into classic children's stories.
3
Online PDF Generation for Preview and Backend
To allow customers to preview the final customized book before ordering printed copies, we implemented functionality to generate online PDF previews of the books with the following capability-
Embedding vector and PNG graphics: The PDF embeds vectors & PNG images/illustrations seamlessly within the books.
Line wrapping & text formatting: The PDF previews properly format wrapped text, alignments, bulleted lists, and other textual elements in the books to match the final printed output.
Back-end integration: Our developers have integrated PDFs with the client's back-end order processing system. Once an order is successfully placed, a PDF matching the customer's customizations is automatically generated for the printing process.
4
Website Testing
Our Q/A testors conducted thorough testing across the entire personalized book creation website, to ensure the smooth functioning of embedded interactive eBook capabilities. The website and interactive eBooks were tested across modern browsers, devices (desktop, mobile, tablet), and operating systems. Furthermore, all flow from user signup to final order review were rigorously tested, and the load times were optimized until we received the desired outcomes.
Tech Stack Used
Frontend
React JS
HTML 5
CSS3
Backend
Python toolkit
MySQL
Laravel
Fonts embedding
TrueType (.ttf)
OpenType (.otf)
WOFF
WOFF2
TrueType Collections (.ttc)
Image processing
Computer vision and AI
Website Infrastructure
AWS
Project Outcomes
Impressed with the successful launch of the website, the client is now expanding its operations and working with our team closely on its second phase which involves inviting more authors to sell books on its website, adding more formats and functionalities, and implementing a royalty or subscription-based model.
As more personalized books became available combined with smoother customer experiences, the client saw consistent month-on-month growth in sales revenue and order volume.
The site maintained over 99.95% uptime in the first year with no major outages.
CONTACT US
Seeking Professional Help in Personalized Children's Books Development?
Share your requirements with our team and get a tailored solution for your project! To get in touch, write to us at info@suntecindia.com.
