Designing a Truly Minimal Surf App
The Designing of CRNT App for iOS, Watch, and Android
It’s 5:30am — the alarms goes off. I hit snooze. Then I remember the swell filled in during the night. Wondering where the best waves are going to be, I hurry out the door. Over the next hour or so I text three friends and together we check six spots. We finally make the call to surf at the break that looks the best. I have to be at work 9:00am. By the time I get in the water I’ve only got an hour and a half left to surf.
Now imagine the same scenario but this time I check the conditions of those six spots in bed on my phone. The app is serving up real time data for those breaks so I know exactly where to surf. I get an extra 15 minutes to snooze and an extra hour in the water.
Surfing is something that is very important to me. I have a deep love for the beach and the ocean. It has made me frustrated at times but also has lifted my soul spiritually on a good wave/day of surfing. The conditions truly make or break a surf session.
I am also a designer. I design apps and websites for a living. I made the decision to design a surf app. This is where I started — making a minimal app that does one thing and does it really well — tell me the current conditions of my favorite breaks.
Here’s how it was done:
Starting with the data
Primary data
- Locations of the surf break(lat & long)
- Swell height
- Swell direction
- Swell period
- Wind Speed
- Wind direction
- Current tide
Secondary data
- Water temperature
- Air temperature
The secondary information was hidden. It can be accessed by tapping on the circle which cycles through the swell height, air and sea temp. Most surfers already know water and air temperature so hiding the info felt acceptable.
Designing the Data
The app itself aggregates all this data from thousands of buoys surrounding North America. I used this actual data to inform my design decisions. For instance, the swell direction is being measured in degrees where:
0° = North
90° = East
180° = South
270° = West
I used this as inspiration for designing certain elements of the data. It only seemed right to use a circle as the base of the design.
The circle around the the data also adjusts based on the wind speed. A low wind speed yields a smaller stroke. A stronger wind makes the stroke expand.
The next design element that was directly tied to the data was the tide. This was an obvious decision based off the crest of high tide and trough of low tide. The line down the middle shows the current tide. It lets you know if the tide is rising or falling without having to add any other elements.
Adding favorites
A shortcut to favorites allows quick access to the breaks you have added.
By pulling up on the screen it unfavorites the break and removes it from your favorites list. You can pull back up to favorite again.
One major discussion point was whether to automatically add locations to your favorites. The team went back and forth giving arguments for and against. If we did not add to favorites it would disappear from our cards when you check another location. The cards are based off the favorites list, so we decided to add it automatically.
Another reason we choose this is for Apple Watch users. Without locations added to the iPhone app the CRNT Watch app is rendered useless. This decision will be tested in the first version of the app.
Delight the user
I wanted to add a visual cue to the time of day so that the the app experience feels a bit different with each use. What we implemented was a different color hue background based off the time of day. These are inspired by the color of the sky at those times.
Unique experience
The design of the data allows for the information to be fluid and forever changing. Between the wind speed, direction, time of day and the tide graph, CRNT users will see a different screen almost every time they check the app.
Apple Watch
While we were still developing the iOS app, the Watch was announced. CRNT felt like a perfect fit for the Watch since the user would be able to check the surf at a glance. Read more on CRNT for Apple Watch.
The future of CRNT
What is the future of CRNT? There are no hard plans yet, except to iterate and make it better. There are improvements to make before we are ready to take a break. CRNT is free. We are most definitely not going to ruin the aesthetic by putting ads in it. Future iterations will all depend on the feedback we get and how we see users experiencing CRNT. For certain, we are hoping to expand to more places outside North America and Hawaii.
Most of all, we hope CRNT helps surfers score more waves and spend less time searching for the best spot to surf.
I oversee all creative work that Smashing Boxes produces. I was the product lead on CRNT and am a avid surfer. See more of my work on dribbble and my portfolio site.
