All Case Studies

WordBaby

September, 2024

Download at Google Play

WordBaby is an Android app for toddlers, combining interactive image-based learning with parental controls and customization. Features include AI-narrated quizzes, book mode, multi-language support, and dynamic asset loading. Built with MVVM architecture, custom UI components, and optimized memory management, it offers a safe, engaging learning experience.

WordBaby logo with playful blue and red typography, representing the kid-friendly educational app for toddlers.
WordBaby welcome screen for selecting a language, showing English and Danish options with a confirm button for customization.
WordBaby main menu with options for 'Play Quiz' and 'Read a Book,' alongside buttons for Home, Lock App, Get More Words, Settings, and Quit.
WordBaby quiz mode showcasing six colorful food images, including lemonade, ham, water, raspberry, yogurt, and peas, with the word 'Peas' as the correct answer.
WordBaby quiz mode with four answer options: carrot, asparagus, ladybug, and salami, featuring the top menu with Home, Quiz, Lock App, Voice, and Sound Effects controls.
WordBaby quiz configuration wizard allowing selection of the number of answers per question, with options ranging from 2 to 10 for customizable difficulty.
WordBaby quiz topic selection screen with options for 'Animals' and 'Food,' featuring checkboxes to customize the quiz and a 'Save and play now' button.
Screenshot of the WordBaby app showing three word packs: Animals, Food, and Vehicles. Animals and Food are available, while Vehicles is marked 'Coming soon.' Navigation buttons for Home, Books, Pin app, and Get more words are visible at the top.
WordBaby chapter overview for the 'Animals' book, displaying chapters for Wild (lion), Birds (parrot), and Sea (dolphin) with vibrant, colorful backgrounds.
WordBaby Chapter 7 'Desert' from the Animals book, featuring images of a camel, coyote, fennec fox, and scorpion with colorful backgrounds.
Screenshot of WordBaby's Book Mode showcasing a colorful grid of food images, including a burger, salad, soup, and sandwich, alongside a panel for 'Next book' Animals featuring a golden retriever.
WordBaby settings modal with options for Audio & Text, Languages, Parental Controls, Restore Purchases, Get More Words, and App Version.
WordBaby parental controls settings, featuring options to unlock the app, adjust top menu behavior, change or remove PIN code, and toggle safety features.
Screenshot of the WordBaby Premium screen, showing locked word packs such as Vehicles, Tools & Utensils, Toys, and more. Pricing options include a $0.01 monthly pass, yearly pass, and lifetime pass. A note highlights the early adopter discount and free trial. Buttons for 'Maybe later' and 'Unlock now' are visible.
Screenshot of a WordBaby download prompt warning that the user is on a mobile network. The dialog offers three options: Cancel, Download all packs (62.20 MB), or Download pack (13.31 MB), allowing users to control data usage.

Introduction

  • Overview: WordBaby is an Android app built in Unity to introduce toddlers to words through interactive image-based learning. It offers a digital, engaging alternative to physical word image books with word packs that can be explored like books or played as configurable quizzes. The app’s bright, kid-friendly UI and secure parental controls create a safe, enjoyable experience tailored for young learners.
  • Motivation: During parental leave, I read many (some might say too many) “First 100 Words” books with my daughter. Exploring digital alternatives, I found most apps lacked modern UI/UX, parental controls, and customization, with some even containing ads. This inspired me to create a better, safer option that also served as a way to learn Unity’s UI Toolkit.

Key Features

  • Quiz Mode: An AI narrator reads a word aloud, prompting kids to choose the matching image. Correct answers trigger fun audio-visual feedback, aimed at enhancing learning engagement.
  • Configurable Quiz: Quiz settings allow parents to adjust the number of answer choices and selectively include word packs, tailoring the difficulty and focus to the child’s needs.
  • Book Mode: Presents word packs in a scrollable, non-gamified format, where clicking on an image triggers voice narration of the word, making it ideal for solo reading sessions.
  • Kid-Friendly UI: The design is bright and intuitive, with clearly separated parental and child features. Critical settings, like quiz configurations, are password-protected and hidden from unauthorized access.
  • Parental Controls: Safety measures include app pinning, password-protected exit, session locking, and long-press unlocks, ensuring young children can explore without accidental exits or access to settings.
  • Extensive Customization: Nearly every feature is adjustable. Narration, level of parental control, displayed text, and image-only options can be toggled, and quiz modes configured for a personalized learning experience.
  • Localization: Currently localized in Danish and English, with easily added support for more languages.
  • Welcome Flow: A guided welcome flow on the first launch prompts users to select a language, set an optional PIN, and accept terms of service.
  • Firebase Analytics & Crashlytics: Integrated Firebase to monitor app stability and usage patterns. Crashlytics captures crash reports with contextual metadata for faster debugging. Analytics events track feature usage (e.g., quiz mode interactions, language selection) to inform future updates. A simple UI is provided during onboarding and in settings to let users opt in or out of anonymous analytics, respecting privacy preferences at all times.

Key Challenges & Solutions

1. Custom UI Components for Layout

  • Challenge: Unity UI Toolkit lacks layout features like CSS grid, gap, and essential UI components. Workarounds were error-prone and increased code complexity.
  • Solution: Implemented Grid and Stack components with configurable column/row counts, alignment and gap control. Built custom components: toggles, checkboxes, password inputs, pin entry fields, steppers, and navigation dots.

2. Implementing MVVM Architecture

  • Challenge: Unity’s UI Toolkit lacks structured architecture, leading to potential code disorganization in large projects.
  • Solution: Developed a lightweight MVVM framework with generic base classes to minimize redundancy. Configured dependencies between Views, ViewModels, and Models using Zenject for injection in base classes. Extended support for specialized views, such as wizards with sequential subview navigation.

3. Optimized Data Binding

  • Challenge: Unity’s 2023 data binding often relies on update cycles and string references, leading to performance issues and runtime error risks.
  • Solution: Built a custom data binding system using compiled lambdas for property access, ensuring minimal performance impact. The system leverages the INotifyPropertyChanged interface for automatic updates via PropertyChanged events and supports optional data transformation through converter methods. This approach eliminates string-based references, reducing error risks and maintaining loose coupling. Integrated Loxodon Fody to simplify INotifyPropertyChanged boilerplate, keeping View and ViewModel code concise.

4. Localization & Content Automation

  • Challenge: Creating word packs (localized audio, text, images) was error-prone and time-intensive, requiring manual tasks like populating scriptable objects, generating audio files, and linking resources to localization tables.
  • Solution: Developed editor tools to automate the process. Scripts generate localization tables, create Azure TTS audio files, populate word pack content, assign addressable paths, verify data integrity, and flag missing resources, with a single click. While translations are still manually added for quality, the system drastically reduces setup time and minimizes errors.
  • Exploration: Implemented string table auto-translation with Google Translate API, but discarded due to poor single-word translation quality.

5. Managing App Size with Addressables & Play Asset Delivery

  • Challenge: WordBaby’s audio and image-heavy content quickly exceeded Google Play’s 200 MB size limit, even with compression. While Addressables enabled remote asset loading, relying solely on CDN-hosted bundles led to slower first-time experiences and potential failures on unstable connections.

  • Solution: Combined Unity Addressables with Play Asset Delivery (PAD) to bundle word pack assets into asset packs delivered via Google Play. Core packs like Animals are included using the Install-Time delivery mode, ensuring they’re available immediately after install without bloating the base APK. Additional packs use On-Demand delivery, allowing users to download content as needed. A custom in-app UI was built to manage downloads, showing actual bundle sizes, download progress, and letting users choose whether to download individual packs or all available content. This approach ensures a smooth first-launch experience, keeps the app under Play Store limits, and supports scalable content expansion.

6. Addressables Memory Management

  • Challenge: Manual asset loading and unloading in Unity’s Addressables increases the risk of memory leaks, leading to crashes and performance issues on mobile devices.
  • Solution: Created a custom asset manager to handle Addressables dynamically. Core assets are preloaded, while view-specific assets are cached and released when views are closed. The manager includes a callback system for on-demand asset loading, ensuring assets are loaded only when needed. This approach optimizes memory usage and maintains stable performance on mobile.

7. Implementing In-App Purchase Infrastructure

  • Challenge: Although WordBaby is currently a free app, I wanted to implement in-app purchase functionality to gain practical experience with Google Play Billing. The challenge was integrating a reliable IAP system with proper UI, localized pricing, and dynamic product listings from Google Play.

  • Solution: Integrated Unity’s IAP system with Google Play Billing Library, supporting both subscriptions and non-consumable products. Built a complete IAP UI with dynamic product rendering, localized price display, and error handling. The system is modular, supports feature gating. It is, however, fully disabled in the current release.

8. Hyphenation Challenges

  • Challenge: WordBaby’s landscape layout caused awkward line breaks for longer words. Default line breaks often split words incorrectly, especially in some localized text, reducing readability and disrupting visual flow.
  • Solution: Integrated the NHunspell hyphenation library to insert soft hyphens programmatically into localized string tables using language-specific rules. To address occasional NHunspell misjudgments, I implemented a custom string table metadata class for manual overrides on a per-word basis. This ensures consistent, grammatically correct hyphenations across all languages.

Future Development

For the upcoming release, I plan to integrate:

  • User Engagement: Adding an in-app review prompt to encourage feedback.
  • Additional Languages: Exploring human translators for high-quality translations to multiple languages.
  • iOS Expansion: If successful on Android, an iOS version is on the roadmap for broader accessibility.

Have a Game or XR App in Mind?

Let’s chat about how I can help making it happen.

I’ll get back to you the next business day.

Get in Touch