All Case Studies

WordBaby

September, 2024

WordBaby is a Unity-based 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.

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) of these “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.

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 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 ViewModel and View 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

• Challenge: The large volume of audio and image assets exceeded Google Play’s 200 MB size limit, even with compression, making the app difficult to publish and potentially less accessible to users.
• Solution: Utilized Unity’s Addressables system to enable offloading most audio and image assets to a remote server. Assets are organized into bundles and can be downloaded on-demand, significantly reducing the initial app size. This approach supports future updates and additional word packs without increasing the base app size.

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. 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:

• In-App Purchases: Implementation of purchasable content packs and a system for restoring previous purchases.
• Google Play Asset Delivery: Finalizing remote content delivery setup for efficient storage and downloads.
• 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.

Key Takeaways

Creating WordBaby has been fulfilling, both as a project my daughter enjoys and as a way to deepen my knowledge of Unity’s UI Toolkit, Addressables, MVVM architecture and more. Developing custom UI components and localization tools presented unique challenges that pushed my problem-solving and design skills. I’m excited for its release, to see how users interact with it, and to continue refining it to provide a fun and engaging learning experience for toddlers.