Interactive Kids Story Book Development

Technology Stack

Laravel
jQuery
HTML
Stripe
AWS

The Client

This is an online adventure book for kids. The interactive portal allows children to upload their photos, get them cartoonized, create new adventure stories, compile them, and share them digitally with their parents or grandparents. Every story can be custom-made with an individual child’s name on it. Parents can also order printed copies of these personalized books. There’s nothing like kids' reaction to receiving personalized storybooks around their names.

The Challenge

Capital Numbers was required to create this online adventure book from scratch and optimize it for all screen sizes. As a team, our main aim in this project was to add vivid illustrations to let kids have fun and get captivated. Poorly designed graphics turn kids away. So, our main challenge was to create images that bring stories to life.

Secondly, we needed to graphically represent the adventures in a storyboard format that unfolds each scene step by step.

Thirdly, it was essential to integrate a custom API to cartoonize user-uploaded photos.

Fourthly, we needed to propose a storage solution that could process large-sized images without slowing down the system.

And lastly, we had to carefully leave spaces for bleed and crop areas in each image to prevent white borders and unwanted cropping upon printing.

The Solution

Capital Numbers’ UI/UX experts started the project by researching various artwork. During the R&D, we jotted down critical points like the dynamic additions, fun elements, illustrations, CTAs, paper sizes, fold marks, and other design hacks that seemed fit. After the initial research, we thought through the most suitable backend, frontend, payment, and hosting solutions and finalized the following:

We chose Laravel as the backend solution because this PHP framework is scalable, secure, and saves hours of coding time. And these are just the main benefits. There’s a lot more to Laravel. For example, it has built-in modules and responsive templates that work well across screens.

We took care of all styling aspects like colors, fonts, menus, etc., using HTML, CSS, and jQuery. We purposely kept the frontend minimalistic to prevent kids from getting overwhelmed.

Our experts added MySQL because this database solution is scalable and offers excellent uptime. Plus, MySQL is safe for storing sensitive data like child photos in this case.

We embedded Flipbook to simulate the page-turning effect of physical books.

We added Stripe to secure online card payments because Stripe is PCI-compliant and never stores card holders’ information.

Finally, we hosted the product on AWS because it has an enormous capacity for running image-heavy websites at an impressive speed.

Results

It took quite a bit of thinking and workarounds to implement the above technologies and give this product its desired shape. Plus, the project brief wasn’t quite elaborate. So, our creative minds had to flesh out various ideas to give this project what was required. But, at the end of it all, we’re happy with what we’ve achieved and how.

Here’s a summary of the project outcome:

Interactive, Graphically-rich Book

Capital Numbers created an interactive adventure book where kids can upload their photos, enter their names, choose characteristics like hair color and gender, and start their adventures. We designed it impeccably in a storyboard format with solid graphics that add a lot of fun to every scene.

Layout Designs

We mainly took cues from hand-drawn sketches to design the storyboard layouts, settings, characters, moods, and landscapes.

Visualizations

It was challenging to condense ideas from rough sketches. But, our experts succeeded in visualizing the concepts and putting them in order one by one.

Consistent Flow

Throughout the narrative, we maintained the consistency of props, colors, textures, etc., to offer visual flow in all the scenes.

Dynamic Content

We incorporated a dynamic ‘name’ field where kids can enter their names to personalize their adventure stories.

Custom API

Our custom-integrated API gives uploaded photos a cartoon effect, adding some more fun and joy to the adventures.

Flipbook Integration

The Flipbook we integrated helps kids enjoy online page-flips while going from one scene to the next.

Smooth Navigation

We used CSS codes to keep the forward and backward navigation between scenes simple and smooth.

Bleed and Crop Marks

We carefully placed the margins, bleeds, and crop marks in every scene to ensure nothing gets trimmed during printouts.

Secure Payments

Our Stripe integration helps parents securely purchase their printed copies using their debit and credit cards.

User Admin

We even incorporated a backend dashboard to help the admin manage all purchases, shipments, photos, etc., efficiently.

Amazon S3 Bucket

Dozens of large graphics had to be stored reliably. So, we chose Amazon S3's service because it’s infinite.

Data Privacy Policies

As a responsible team, we released the portal only after conforming to all privacy policies to keep uploaded photos safe from being misused.

Personalized Adventure Book

Executing this project from concept to release has been quite a creative journey. But, our team enjoyed every bit of it. The final product is a personalized children’s book optimized for desktops and mobiles.

Dedicated Development

While it seems like a simple adventure book, turning a stack of loose sketches into a cohesive book format wasn’t easy initially. But, thanks to our dedicated team's graphic designing skills, which helped create something so holistic from a sketchy design brief.

Beautiful Storyboard Art

What initially was a series of scattered drawings is now a beautiful animated storyboard art that kids love and enjoy. And the journey of developing this has been immensely satisfying.