Summer Williams Portfolio
UX/UI - Innovation - Graphic Design

Endangered Waves

 

Endangered Waves App

stw-header.png
 
 

PROJECT OVERVIEW ––––

The Save The Waves Coalition protects coastal ecosystems around the world in partnership with local communities, utilizing a unique combination of protected areas, economics, and direct action.

They partnered with MJD Interactive to create Endangered Waves, an app that empowered surfers to report issues on their local coastlines. I was fortunate to be on the design team while interning as a UX/UI Designer at MJD Interactive. 

View MJD’s Case Study.

 

ROLES

  • Design QA

  • UI Designer

DELIVERABLES

  • Iconography

  • Onboarding screens

  • Handing off developer-ready assets

 
 
award-image.png
 

AWARD WINNING APP

The Big Ocean Button Challenge, sponsored by XPRIZE, was a $100,000 mobile app development competition. The Endangered Waves app surpassed more than 300 competitors for the best conservation app, resulting in it being one of the 7 winning recipients.

“This competition was designed to encourage app developers and data scientists to work toward a future where the world’s ocean data is available at our fingertips, visualized in a user-friendly and meaningful way.”

– Scientific American
 

 
 
 

CHALLENGE

Clearly convey the essence of the Endangered Waves app through visual design.

 

SOLUTION

A simple iconography set to illustrate the 6 different coastal threat categories, and a seamless onboarding tutorial of the app. 

 
 
 

INTUITIVE ENOUGH TO KEEP ENJOYING NATURE 

Endangered Waves is an app to empower surfers to take action when they see a coastal issue. There are over 30 million surfers worldwide who deeply care about the ocean. 

Thinking about the users (surfers, conservationists, & coast-lovers worldwide), the app needed to be intuitive enough to quickly report an issue and allow them to get back to enjoying the outdoors. 

 
 

IN-APP ICONOGRAPHY

stw-icons-phone.png
 

SIMPLE ICONS TO REPRESENT COMPLEX ISSUES

Coastal threat categories: Oil spill, Sewage, Trashed, No Access, General, and Coastal Erosion

I designed the iconography set to represent the different coastal threat categories that users can file their issue under. The icons are simplified and designed to be recognizable at small sizes.
 

 
 

APP ONBOARDING SCREENS

SKETCH IDEATION

stw-sketch.png
 

Low-fidelity Wireframes of app

stw-wireframes.png

Interactive Low-fidelity Prototype

 

Feel free to click around on this interactive prototype! Or you can also play with it here.

 
 

High-fidelity design of onboarding screens

stw-header.png
 

ONBOARDING SCREENS TO EDUCATE

The final onboarding tutorial resulted in 3 screens that represented how the app works. White dashed lines are used to illustrate the fact that your reported issue gets sent off to the proper people. Similar iconography was used in the onboarding to make users feel familiar with the app upon first use.