React Native app

KAB mobile application built with React Native and Firebase

ReactNative and Firebase

IOS
IOS
Android
Android
React
React
Ruby on Rails
Ruby on Rails
Firebase
Firebase

The Keep a Breast Foundation™ mission is to empower young people around the world with breast health education and support. Their Check Yourself! free mobile app helps users around the world establish their own self-check routine.

NaNLABS joined forces with the app team to implement new designs on a yearly basis, to add new functionalities and to propose a major change in the technologies used in order to drastically improve the app’s user experience.

The app helps show users around the world the best way to check their boobies on a regular basis.

  • Step by step information display on how to perform breast self-check

  • Possibility to set up monthly self-check reminder

  • Monthly news on how to lower risk for breast cancer and events in the area

  • Social media share to promote the use of the app

  • Donation through PayPal

  • Advanced analytics and segmented user tracking while maintaining sessions anonymous

  • Available for different regions and languages (English, French, Dutch, German, Spanish, Japanese)

New Mobile App Design Implementation

Art is at the core of the Keep a Breast Foundation™. Every year, they partner with a different artist to bring awareness on the risks of breast cancer through a redesigned mobile app.

NaNLABS is proud to have implemented these stunning and impactful designs for two years in a row!

Key performance and usability improvements

Through technology change

For the app’s latest version, we decided to put a major focus on improving the overall user experience.

The main challenge was to maintain the app’s signature – its very high visual quality-, while improving loading time, storage and maintenance performance.

To tackle these challenges, NaNLABS suggested to use a new combination of technologies for the app: React Native and Firebase.

Front-end

Back-end

New front-end implementation with react native

In its early days, the app was developed using CoronaLabs, a tech intended to develop video games. Instead of having an interactive interface, it was made of images with clickable zones.

As a result, the app was too heavy and and every change in the copy implied to upload a new image. For the whole screen. Also, it was necessary to have one image per language that was supported.

In order to improve the performance and usability, we migrated the app to React Native.

Outcomes

  • Faster app implementation and maintenance thanks to the use of JSX

  • Increased flexibility to suggest and update images

  • Reduced size of the app from 40 to 8 MB

About ReactNative

This platform is mature and offers quality hybrid development possibilities. The adaptation to both iOS and Android platform was painless, as the specific code that we had develop per platform represents only about 10 % of the whole code.

Moving The Backend To The Cloud, Using Firebase

Check Yourself!’s backend system was originally developed in Ruby on Rails. To simplify the database management, we migrated it to Firebase. It is a Google cloud service that is easy to set up and maintain.

It was also powerful enough to cover our needs of sending notifications and storing sessions’ information without requiring user authentication.

It also provides strong analytics, allowing to track anonymous sessions. A "must" to gather insights on the use of the app while respecting the privacy of its users.

Installs

You too should download the app! Read why on the Keep a Breast website!

The Keep a Breast Foundation™ believes that art, education, awareness, and action are sources of empowerment, healing, and transformation. By making Check Yourself! a free, creative, interactive, and informative mobile application, they are making a difference.

NaNLABS is proud to have contributed to improving the experience of its numerous users around the world.