How we designed and created a children's safety app

How we designed and created a children's safety app

THE PROBLEM

Losing a child is one of the most stressful times. Our client wanted a way to quickly locate their whereabouts and call them all through a web app.

Losing a child is one of the most stressful times. Our client wanted a way to quickly locate their whereabouts and call them all through a web app.

THE SOLUTION

With our team of product managers, Figma designers, and Bubble developers, we scoped, designed and developed a kids finding platform. An adult simply scans a child's band, takes them to the app, can instantly make a call and relieve them of their stress.

With our team of product managers, Figma designers, and Bubble developers, we scoped, designed and developed a kids finding platform. An adult simply scans a child's band, takes them to the app, can instantly make a call and relieve them of their stress.

Designing The Entire
Brand Look & Feel

"This is an app focused on kids so the whole feel of the app had to represent that"

"This is an app focused on kids so the whole feel of the app had to represent that"

First, we did extensive research into our target audience's preferences. Armed with these insights, we defined the brand's core values and personality traits, centering on creativity, curiosity, and trustworthiness.


With a focus on visual appeal, we carefully curated a vibrant and child-friendly visual identity, selecting playful colours and typography that would resonate with our young users. The animations, a central element of the brand, was thoughtfully designed to encapsulate the essence of the app, featuring friendly characters or captivating illustrations.


To ensure a consistent and immersive brand experience, we paid close attention to the user interface and overall user experience design. Every interaction and visual element of the app was thoughtfully aligned with the brand's values and personality. Through continuous feedback and iteration, we refined the brand, resulting in a cohesive and captivating experience that truly reflects the spirit of the kids finding app.


"The vibrant colours and icons are perfect for the app."

"The vibrant colours and icons are perfect for the app."

Designing
Intuitive UI/UX on Figma

Designing
Intuitive UI/UX on Figma

Starting with with rough sketches on paper, we created a variety of ideas for the brand and app.


Through collaborative design sessions and feedback, we refined the wireframes, ensuring a user-centric experience. Leveraging Figma, we transformed the wireframes into visually captivating screens, incorporating playful colours, bold illustrations, and child-friendly typography. Iterative design reviews and user testing allowed us to fine-tune the designs, optimising both usability and aesthetics.


Our team of Figma designers created a brand, wireframes and designs that captured the essence of the kids finding app.


Developing Pixel Perfect Designs On Bubble To Create A Responsive Web App

Developing Pixel Perfect Designs On Bubble To Create A Responsive Web App

To seamlessly implement Figma designs into Bubble.io, we followed a systematic process that ensured a smooth transition from the design phase to the development phase. This started with a clear handover meeting between our Figma designers to our Bubble designers.

Bubble.io's drag-and-drop interface enabled us to easily place and position the design elements within the app's pages and workflows. By referencing the Figma designs, we ensured that the layout and styling in Bubble.io closely matched the original design vision.

Throughout the implementation process, we gave our partner daily updates through Slack and visual updates via Loom. To ensure our designs were implemented as close as possible to the Figma, our Figma design team regularly checked the Bubble web app.

Once our partner, Figma designers and Bubble developers were happy with the designs on Bubble, we started on the functionality.


Integrating Google Maps & Twilio With Privacy At The Forefront

Integrating Google Maps & Twilio With Privacy At The Forefront

Integrating Google Maps & Twilio With Privacy At The Forefront

The idea of the app is that a child wears a band with a QR code. If the child is lost, an adult scans the band and is able to share the child's location, then ring the parents.


To share their location, we integrated Google Maps API into the app. This allowed us to enable real-time location tracking and sharing when a child goes missing. Through a secure and encrypted connection, the app captures and transmits the child's location to designated guardians or authorities, ensuring quick response and assistance. This also involved some custom code.

To make calls, we integrated Twilio's API, ensuring seamless voice communication within the app. In case of emergencies or urgent situations, the app facilitates direct calls to predefined contacts or emergency services, ensuring prompt assistance when needed.



Privacy was a paramount consideration given the sensitive nature of the app. We adhered to best practices in data security, employing encryption protocols to safeguard personal information. We also implemented strict user access controls, ensuring that only authorized individuals can access sensitive features and information within the app.

THE RESULT

An Intuitive Bubble Web App Ensuring The Safety Of Children

An Intuitive Bubble Web App Ensuring The Safety Of Children

We took this project from idea to launch.


We designed the brand look and feel. We designed the screens of the web app on Figma and developed this on Bubble.


This was brought to life with our team of expert Bubble developers, Figma designers and product managers.

We took this project from idea to launch.


We designed the brand look and feel. We designed the screens of the web app on Figma and developed this on Bubble.


This was brought to life with our team of expert Bubble developers, Figma designers and product managers.

Get in touch

We’ll get to learn about your customers, their inspiration and vision. This process will heavily involve you as the client to help us understand the problem and we'll provide you a no-code solution.

Book A Meeting

OR

Share Your Idea

Get in touch

We’ll get to learn about your customers, their inspiration and vision. This process will heavily involve you as the client to help us understand the problem and we'll provide you a no-code solution.

Book A Meeting

OR

Share Your Idea

Get in touch

We’ll get to learn about your customers, their inspiration and vision. This process will heavily involve you as the client to help us understand the problem and we'll provide you a no-code solution.

Book A Meeting

OR

Share Your Idea