Protecting Coastal Ecosystems + X-Prize Winning Digital Innovation

Sponsored by XPRIZE, the Big Ocean Button Challenge was a global $100,000 mobile app development competition to turn ocean data into products and services.

Save The Waves beat out more than 300 competitors to win the award for best conservation app. Endangered Waves App received more than 200+ votes in October, the second most out of any app in the competition.

Save the Waves is a global non-profit dedicated to protecting the world’s coastlines. MJD partnered with Save the Waves to create the Endangered Waves mobile app to empower surfers to monitor the health of their own coastlines through crowdsourced data.

Surfers—30 million of them, across the shores of 6 continents worldwide—are a large, untapped resource for coastline monitoring. To provide them the proper tools, MJD built Endangered Waves, a platform that includes iOS and Android native mobile apps.

Why We Got Involved

The world’s oceans are our planet’s life support system. At MJD, we live and work by the coast because we love the ocean. It provides recreation, limitless inspiration, and literally half the air we breathe (thank you, phytoplankton!). It’s part of our DNA.

In addition, we are always looking to partner with forward-thinking organizations that share our vision for the world. Save the Waves is exactly the kind of civic-minded visionary we love to help use technology in a positive way.

Agile Approach

Building a whole platform that includes a backend and mobile apps can be complicated and expensive, but when you narrow the focus and eliminate the extraneous, you can get a lot a done quickly.

Using the Agile software development process, we went from concept to design to build in only a few 2-week sprints. The whole process, from concept to app store submission, took less than two months.

Underlying Technology

The platform is really 3 separate things: a native iOS app, a native Android app, and finally a Firebase app.

With limited time and budget, we briefly considered using React Native for the iOS and Android apps. This would allow us to “write once and run everywhere”, but after a day of experimenting, it quickly became obvious that we wouldn’t be able to achieve the level of UI polish we required. React Native is very interesting, but just isn’t the right tool for the level of custom UI work we require of our mobile apps.

The iOS app is written in Swift 4 and targets the iOS 11 SDK. Choosing the latest SDK enabled us to limit the amount of QA needed, and enabled us to leverage some of the nice new features like map snapshots and map pin clustering.

The Android app is written in Kotlin 1.1 and targets Android version 8.0 (Oreo), with support back to Android 5.0 (Lollipop). For UI layout, we utilized Android’s newest layout functionality, ConstraintLayout, to allow for complex layouts that are performant and responsive on the wide range of Android device sizes.

An app of this type—one that stores user data and makes it available for all to see—needs a backend for storage and retrieval. Building a complex backend takes time and resources, and we knew we wanted to prioritize our effort on the frontend that people actually will interact with. To that end, we chose Firebase (https://firebase.google.com/) for the backend. It does everything we need, is affordable (free at our level of needs) and has solid SDKs for iOS, Android, and web. Also, it requires no DevOps or ongoing maintenance, which is ideal for a non-profit.

Design Approach

The design approach to any experience we’re creating is formed by three paths that fuse together. One is the perspective of users—their desires, needs, and emotional state; the second is usability; and third is design exploration, playing with what’s possible.For Endangered Waves we focused on the frustration people feel when they see trash on the beach or sewage pouring into the ocean: they want a way to share that with someone that can do something about it, and they need to feel like it’s actually going to make a difference. Otherwise, they’re not going to come back and contribute.

Our goal for the user interface design was to balance the seriousness of the problems impacting our environment with a hopeful tone and character that gives people a feeling of quick satisfaction and gratitude.

We focused on the action of submitting an issue—we wanted that at the front and foremost—to give people the quickest route possible to share what they’ve seen. The experience is enhanced with imagery, symbols, and maps to increase awareness, and hopefully inspire future action through a bigger visual story of what’s happening in and around their communities.

Outcome

The app is a simple and elegant way for surfers to report issues about their local coastlines. Endangered Waves educates the surfing community on key issues, bringing much needed awareness, provides avenues to greater stewardship, and helps Save the Waves prioritize areas and fill gaps in data.The platform won The Big Ocean Button Challenge (BOBC), a global crowdsourcing competition launched by HeroX and sponsored by XPRIZE, to find breakthroughs that transform big ocean data into useful mobile applications.