Mobile App for Schools

Project Overview

Build an app on iOS and Android for schools to easily communicate with families.

Problem

School and district customers had been promised personalized apps, but due to changes to app store policies there were issues with delivery of new apps and maintenance of existing apps.

Project goals

Quickly develop and release a single stand-alone app that fulfills promises made to customers:

• Deliver website content to the app with minimal or no extra work required by schools

• App user interface feels familiar to parents

• Ability for schools to send push notifications to people with their app

Project Constraints

• App must not be affected by “white-label” app restrictions

• Available on both iOS and Android

• Easily maintainable

Team

CPO, Product Manager (me), Software Engineering Manager, 5 Software Engineers, plus supporting roles in product, design, QA, marketing, accounting, and client services

Role / contribution

Product Manager for entire product lifecycle, which for this project included:

Research and design, prototyping, user testing, mockups and user stories, user acceptance testing and QA, product owner & project manager for cross-functional development team, data analysis, coordination with client teams and marketing, and many other tasks as needed.

Tools

Sketch, InVision, GitHub and GitHub project boards, mobile device emulators and basic shell scripting, TestFlight, Google Play Store, App Store and Confluence

Process

Discovery & research

Since business requirements defined the basic needs of the app, this stage of the project focused on how to best meet those needs within the project constraints and timeline.

Because “white-label” apps were being removed from the App Store and Google Play, we decided the best approach was to build one app that could show info for any school, instead of one app per school. And, similar to social media apps, families subscribe to a specific school to receive updates.

Speaking with schools, parents and internal teams also unearthed a few additional requirements:

• Since children within the same family may attend different schools, parents need to be able to add and receive updates from multiple schools. As children age they’ll change schools so being able to remove schools was also necessary.

• Schools wanted some branding. Showing the school logo on alerts, events and news could provide this while also help families with children at different schools quickly see which info is for which school.

• For internal ease of use, client services wanted a simple toggle to control if a school is available in the app.

• Since a school may have multiple calendars and news feeds which may not all be relevant to a specific child, parents wanted to be able to choose which calendars and feeds to see.

Define the MVP and Tech Stack

The CPO, software engineering manager, another product manager, and me collaborated to define the product MVP and tech stack.

• To minimize the work required by schools to update app content, news and events on their websites would automatically populate into the app via an API.

• To address maintainability and cross-platform availability, the app would be built using a standard, well-supported language and libraries.

• To allow the school to send push notifications to app users, the feature in the website content management system that allowed schools to send notifications to their previous apps would be enhanced to send notifications to this new app.

Design iterations and user flows

In order for parents to onboard quickly with minimal or no instructions, the interface needed to feel very familiar. Based on the huge popularity of Facebook and other social media apps, we opted to go in a similar direction with a scrolling news feed and buttons across the bottom for key features.

The design process involved multiple steps, increasing in fidelity as it was finalized.

First, the CPO and the two of us product managers made rough drawings of screens and possible user flows.

Then I created low-fidelity wireframes in Sketch and connected them together in InVision to create prototypes to validate the user flows.

After finalizing the main workflows, I built a symbol/component library in Sketch. To allow the school branding to be more prominent, the colors and look of the app were kept simple and neutral. This also sped up development as we were able to keep some of the default styling of the standard component library.

For each screen and key elements I designed multiple variants to discover what would work best, through a combination of internal reviews and user testing. I also made a high-fidelity prototype for additional user testing and to increase internal hype around the project.

Development and testing

During this phase my role evolved into project manager and product owner as I became part of the agile, cross-functional development team building the app.

The software engineer manager and I collaborated closely on the project plan to ensure development occurred in the appropriate order, according to available team resources and within the project timeline. Likewise, we worked together closely to create the user stories, where I added the design and interaction acceptance criteria while he added the technical implementation details.

As part of the development process, when each user story had been built into the app, I did user acceptance testing with iOS and Android emulators. After it passed UAT, it would go through code review and QA by other folks.

In this way, we layered more functionality into the app and fine tuned the interface and interactions.

As part of this process, our QA teammate and I collaborated on edge cases. For example, I created SQL queries to find the longest school names and she would use them while testing. Thus we were able to catch and fix issues before the schools did.

And of course, there were always final rounds of testing for each app version using TestFlight and beta testing tracks on real devices by all of us on the team.

App Launch

Due to the “white-label” app restrictions causing issues with delivery of new apps and maintenance of existing apps, it was vital to find all impacted schools and districts. While the engineering team was developing the app, I coordinated with the client services and accounting teams to ensure we had a complete list of all app customers. This required me to combine data from the CRM, internal team documentation, and direct queries of the product databases.

Marketing and client services used the app information and mockups I shared with them to compose appropriate messaging to affected customers and marketing materials to attract new customers. To ensure maximum engagement, the team provided the schools with help documentation for staff and also onboarding materials to share with families.

After the initial launch, the app continued to be iterated past the MVP with enhancements such as localizations, an in-app browser, pull-down to refresh content, sharing options, smart banners promoting the app to school website visitors on mobile devices, and more.

Results

🏆 More than 300 schools and districts who had or had been promised apps were successfully switched to the new school mobile app, directly addressing customer needs while side-stepping app store restrictions.

🏫 When the pandemic happened, all customers were given the app for free to support their communities. This provided 124K families timely access to urgent messages, school news and schedules, fostering connections during a pivotal moment.

🙌 App is still in use today: App Store and Google Play.