MilkCargo - Parents App

Introduction

In the MilkCargo Parent App project, our team collaborated with Finland's renowned early-education institution, Fun Academy (FA). Together, we crafted an app tailored for parents of children aged 3-6. As these young minds begin their journey of exploration, our app serves as a guide, demonstrating how to impart essential life knowledge designed by FA in an engaging and joyful manner.

Background - Fun Academy

Fun Academy is an education company that provides pedagogical solutions based on the unique Fun Learning approach.

Our solutions are developed for a truly international application and are adaptable to every curriculum.

We empower educators to unlock children's full potential, empowering them to pursue their dreams and aspirations in life. [...]

-- About Us - Fun Academy

Fun Academy

is a Finland-based educational institution emphasizing the "Fun Learning" approach for joyful engagement.
utilizes the "Kip Crew" characters to create unique and creative educational experiences.
collaborates with various organizations, making a significant impact in Finland and internationally.
has seen its methodologies adopted globally, with notable success in places like Vietnam.

Objective

MilkCargo Parent App

Platform: Web, iOS, TV

Target: Parents and educators of children aged 3-6 in China

home preview

map preview

profile preview

result preview

stage preview

stories preview

task preview

Simple & Intuitive UI: The app features a user-friendly and intuitive UI, ensuring that users can navigate with ease. This design consideration is particularly beneficial for those unfamiliar with technology, such as the elderly, ensuring they can access content without any hitches.
Remote Control Compatible: The app is designed to be versatile in its interaction methods. Whether users are accessing it via a computer or a TV, they can easily navigate using a keyboard or a remote control. This flexibility ensures that users have a seamless experience regardless of their device preference.
Internationalization and Localized Content: Recognizing the diverse cultural nuances of its target audience in China, the app is equipped with internationalization features. This ensures that content is not only translated but also culturally relevant. Localized content ensures that the app resonates with its users, providing them with a more personalized and meaningful experience.
Consistent Design with Fun Academy: The app aligns its design aesthetics with Fun Academy, incorporating the recognizable Kip Crew characters and maintaining consistent theme colors. This ensures a familiar visual experience for users who are acquainted with Fun Academy's branding, while also delivering content in a cohesive and engaging manner.

Workflow Overview

MilkCargo Parents App high level overview

When Fun Academy updates raw data and materials, the subsequent steps are:
1. Direct extraction of the updated content.
2. Conversion into region-specific materials.
All text, media files, and associated metadata are extracted and then transformed into a structured database. This data is then optimized for Cloud CDN using a bespoke data processing tool.
We've developed a comprehensive set of APIs that handle authentication, user management, and resource access, ensuring a streamlined experience for client-side integration.
Designed a unified cross-platform user interface, ensuring a consistent and smooth content display both on the Web and iOS platforms.

My Role

App Development
- Led the front-end development, selecting the optimal technical stack to ensure robust and efficient app performance.
- Developed a dynamic web application utilizing the power of React and TypeScript. Further enhanced its cross-platform capabilities by integrating the Ionic framework and Capacitor runtime, enabling seamless compilation into an iOS app.
- Integrated Apple In-App Purchase and WeChat Pay, enabling users to make transactions directly within the app.
- Pioneered a user-centric feature allowing seamless navigation of the app on TV using various mainstream remote controls, enhancing the user experience and accessibility.
Project Management & Code Review
- Authored detailed task specifications (tickets), allocated story points for accurate effort estimation, and conducted rigorous code reviews to ensure adherence to quality standards.
- Oversaw the management of App Store Connect, handling responsibilities such as in-app purchase configurations, TestFlight beta testing, and app publishing processes.
Collaboration with Designers
- Engaged in regular review sessions with the design team, collaborating partners, and project stakeholders. This iterative process ensured that the app's design and functionality were continually refined based on constructive feedback, aligning with the project's vision and user needs.
Data Extraction and Transformation
- Created and maintained a software tool designed for efficient data management. This tool facilitated the extraction of raw data from Airtable through its API and CSV formatted files. Post extraction, the data underwent a transformation process, converting it into organized and structured formats suitable.

Challenges

Rendering SVGs in TV box with limited computation power.

When it comes to digital graphics, SVGs are renowned for their scalability and adaptability across various platforms. However, when it came to rendering these SVGs on TV boxes with constrained computational capabilities, we encountered significant challenges. The inherent complexity of SVGs demanded a level of processing power that these TV boxes simply couldn't provide efficiently. The result was noticeable lag, rendering delays, and an overall subpar user experience. To address this limitation and ensure smooth graphics rendering on these low-performance TV boxes, we made the strategic decision to replace all SVGs with PNGs. PNGs, being raster-based, offered a more straightforward and less resource-intensive rendering process, making them a more suitable choice for devices with limited computational power.

Using tab-index and on-keydownto enable basic navigation via remote control without mouse.

There's a requirement to adapt traditional navigation methods to cater to diverse devices, especially those without standard input mechanisms like a mouse. One such scenario is the use of web applications on smart TVs or set-top boxes, where the primary mode of interaction is a remote control. To address this unique challenge, developers can harness the power of the tabindex and onkeydown attributes in HTML. By judiciously setting the tabindex values, developers can define a clear and logical navigation sequence for elements, ensuring that users can seamlessly move between interactive components using the arrow keys on their remote. Meanwhile, the onkeydown event listener can be employed to detect and respond to specific key presses, allowing for actions like selection or activation. Together, these attributes can transform a traditionally mouse-driven web interface into one that's fully navigable via a remote control, enhancing user experience and accessibility for TV-based web applications."

Reflection

If I had a chance to start over again, I would

Utilize SSG (Static Site Generation) and ISG (Incremental Static Generation): In hindsight, leveraging the capabilities of SSG and ISG would have been a game-changer for the project. SSG would allow for pre-rendering the site's pages at build time, ensuring rapid load times and enhanced SEO performance. On the other hand, ISG would provide the flexibility to update static content incrementally, ensuring that users always receive the most up-to-date information without compromising on speed. Together, these methodologies would significantly boost the overall performance and responsiveness of the site, leading to a smoother user experience.
Implement Advanced Image Loading Strategies: Images play a crucial role in user engagement, but they can also be the culprits behind slow page loads if not handled correctly. On reflection, adopting more sophisticated image loading strategies, such as lazy loading, adaptive image sizing, and using modern formats like WebP, would have greatly improved the user experience (UX). These techniques would ensure that images are loaded efficiently, reducing unnecessary bandwidth usage and accelerating page load times. A faster-loading site with optimized visuals would not only enhance user satisfaction but also positively impact SEO rankings and overall site engagement.

Demo