BREATHE WITH ME/
DESIGN + CODE
splash
About

Breathe with me was an incredible adventure.


The MVP was the result of the close collaboration between Founders and Coders and the Anna Freud Centre in London. My team and I had the incredible luck of winning a hackathon (September 2016) in which we were funded to design and build 'Breathe with me’ for the duration of two sprints, each running for two weeks.


The idea was originally conceived by Charlotte Barrett from AFC and together with her we designed, developed and tested the app throughout the duration of the whole build.

AFC-hackathon
The challenge

The idea and aim of the app is simple - to help children and young people suffering from anxiety to learn how to breathe mindfully, in a charming and friendly way. An important requirement for the app was that it would be available offline, as we know that anxiety and panic attacks can come at any point in time. Other requirements were that it would be accessible across many browsers and devices and would extremely simple and friendly to its users.


I designed the whole app as well as writing parts of the code. It was an interesting and challenging experience to build this project in a such a limited time frame and to take into consideration all the psychological aspects and accessibility requirements that were scoped.

Solution

We build the MVP as a progressive web app, which meant that once visited, it can be accessed again at any time when users are offline. We made sure it worked on as many browsers and devices as possible, concentrating on its mobile version for the MVP.


I went for the simplest and most friendly design possible so that when needed, the breathing exercises can be accessed immediately. I came up with three different animal avatars which the user can choose from: cat dog and panda. The colous pallette is made of calming, pastel colours and changing gradient backgrounds.


We didnt have budget for buying fonts or rights for music so I looked for the best free resources I could find. I used google font’s Amatic font which is very friendly and looks like hand writting.


We used amooth and soft animations to transitions between pages, keeping it fun but also calm and reassuring.


The result was received with great pleasure by our product owner, the Anna Freud Centre as well as many children and young people which we gave the app to for testing.


It was one of the best MVP’s I have done so far.

avatars
Logo / Icon