Last Sunday, I was spending my day like most of the people scrolling to my Facebook feed, and after a new report about those runners, I decided to do something about it. My thinking was, "Can I provide some value to those runners for them to download an app that will teach them afterward what is the impact of COVID19 in France?"

A simple app that looked like an old school radar notifying them when they were living the 1Km radius could provide enough value. I thought that I had found a simple concept that could spread pretty quickly.

This application will be my trojan horse to educate about the disease and avoid this spread as much as possible;

I spent the day looking around React Native, geolocation & Map and ended up with a proof of concept.

By following the documentation of an excellent plugin and a tutorial that I saw on medium, I managed to display a map, get the current position of my phone and draw a line representing the route that my phone was following.

The main idea was to have a clear and straightforward representation of the concept. It was displaying a circle of 1KM around the starting point of the runner. The first action of the user will be to launch the run, and the GPS of the phone will give you an indication of your distance from your starting point.

The design will be as simple as possible, displaying the distance from the starting point, a map of the run & a simple color indicator. Those colors are helping to understand how close you are from the maximum distance you're allowed to run.

I thought about using a sound indicator, too, to give an idea of how close the runner will be from the limit allowed by his/her run.

Since I wanted to release and test the app as fast as possible, I chose a simple design mostly based on the map colors taken from snazzy maps and worked around it. The concept was simple, green your good, Orange, you're close to the 1Km limit, Red you're at the border.

Using those colors in the UI buttons and text indicator was the simplest way to put some emphasis on it.

And that was it.

I started to develop quickly and realized how bad I was at it. I needed more than two weeks of copy-pasting code from tutorials and examples from the react-native-maps library to get something close to what I wanted.

I managed to have my maps displayed and my marker animated with my route being drawn. I had a hard time implementing the color change in the route and it's still not working at the moment.

I also sadly realized that testing a running app relying on geolocation while being stuck in my small apartment was also a pretty complicated thing. I was closed to have something final but stopped developing the end of the lockdown being close. I managed anyway to have something almost working without having the time to implement the last screen. This one was the most important one. The one that was meant to teach people about the virus and get some money if possible.

The end goal of this app was to arrive at the last step: Being able to provide value to runners in order to teach them the impact of COVID in the french population. The goal was to encourage people to stay home and to explain the risk if they were going out.

For that, different ideas came up. The dumbest but more impactful one was to share at the end of the run, the number of people died from COVID during the race. Discussing it with my Friend Hugo, we realized that it was too aggressive, and he recommended me to share something more related to the spread of the virus. The number of people that you could have given the virus to during your race seemed like a good idea, and I chose to design that.

I also wanted to use this screen to try to raise money for the Parisian hospital by only adding a button that will trigger a gift to the organization.

It seemed to be pretty easy to implement with the SMS react-native plugin and by having a simple button that will trigger an SMS to give 5€ to the APHP. I might use this knowledge later.