Blog

Behind the Scenes: Making a Mobile Application for Good

Alex Ford

Technical Engineer, Forum One

As mission-driven organizations explore how to engage audiences through mobile applications, here is a look into a recent app build that makes it easier for families and educators to access key information that supports young children’s education.

Forum One recently had the opportunity to design, develop, and launch a new Head Start resources mobile app for iOS and Android. Head Start programs promote school readiness of children ages birth to five from low-income families by supporting the development of the whole child by enhancing their cognitive, social, and emotional development. Head Start is housed within the Office of the Administration for Children and Families, under the U.S. Department of Health and Human Services (HHS). 

While Head Start was not starting from scratch — they did already have a mobile app online — the purpose of this new version was different. The previous app was simply a mobile version of their website. It contained no native control and no way for the application to interact with other systems, applications, libraries, etc. The new mobile app aims to create an optimized experience that provides early childhood educators, and others involved in Head Start programs, with specific, valuable information and resources. The major need was to have something that makes it easy to access key information on the go (rather than searching through the website), is accessible, and has a solid user interface.

Building the new native Head Start app

This project involved a lot of players. Forum One worked with the developers of the original app, our client’s web team, and other federal employees from Head Start and their parent agency to define the key goals and needs of the app so that it could truly be a valuable, easily-accessible resource for people who need this kind of information in real-time.

On the technical front, there were also a lot of players; as the interface required dealing with multiple data sources, several APIs (application program interface), and a complex multi-person authorizing environment, a smooth integration plan was essential. Our technical team worked to create a system that worked seamlessly, without sacrificing speed or performance.

Head Start Mobile App

The app itself is built in React Native. This approach comes with a number of benefits. A React Native project embeds a JavaScript runtime that runs the project’s code, which gave us access to patterns similar to web builds during development. Unlike most JavaScript-based frameworks, however, a React Native project does not embed a web browser; the components used by the app correspond to native views and controls. A well-built React Native app is virtually indistinguishable from an app built with native tools. When combined with the framework’s cross-platform features, it allows us to rapidly iterate on a native experience without having to learn two new platforms – Android and iOS – just to implement the project.

The JavaScript engine React Native uses is able to consume npm packages. These packages consist of the usual modules one would use for a React project (for example, Redux and a Fetch API polyfill), but we also installed modules that bridge JavaScript and device-platform APIs. This allows us to integrate features such as add-to-calendar functionality from within our React components, for example.

Seamless updates from website to app

The content for the Head Start app is managed from within the existing Head Start website, to create a seamless updating experience across platforms. We worked with the Head Start web team to create JSON-based APIs that expose filterable content listings and other endpoints the app can access. 

Content is managed centrally from within the website’s Drupal CMS, which in turn updates the app in real-time without any need to be pushed out separately. This prevents any headaches that come with attempting to maintain two sources of content where the configuration may begin drifting apart. We created a small access layer that tracks users’ filter selections, which allowed us to rely on the Drupal site for content management, and shift our attention to creating a solid user experience.

Head Start Mobile App

The result: a handy tool for educators

The new Head Start app offers many useful features, including:

  • Quick access to featured resources, policy, news, and events
  • Mobile access to the Early Childhood Learning and Knowledge Center (ECLKC) 
  • A mobile share option for each piece of content 
  • The option to add events to the user’s calendar
  • The ability to save various types of resources to an individual “My Stuff” section for quick access

One of our client’s favorite features is the “My Stuff” section, where a user can bookmark items they find while perusing the app, and then go back and find them all in one place. Resources in the “My Stuff” section are saved on the device using device storage APIs. 

A shared vision for a strong result

Since the new Head Start app launched in April of this year, the average screen time has increased by 82%. The average daily user has increased by 12%, and the application continues to be downloaded and used regularly as its content is updated and enriched. 

One of the main reasons the app is such a success, is Head Start and Forum One had a strong shared vision for this product. Our shared vision allowed us to collaborate easily, receive timely critical feedback when needed, and provide enthusiasm and encouragement along the way. Our client was thrilled with the final product, and we’re grateful for the opportunity to build a native app that helps Head Start practitioners better access resources for early childhood learning.

If you’d like to take a live tour, download the free Head Start app today on Android or iOS.

Written By

Alex Ford

Technical Engineer, Forum One

Looking to update or create an app to engage your audiences?

Let’s talk. Forum One’s mobile application experts would be happy to talk through your goals and technical requirements to launch a powerful and effective app.