Point Break

Check surf conditions of multiple spots over time, in a single view

IxDA submission
Daniel Mahal, Pierluigi Dalla Rosa, Sara Salsinha
Wireframing, information design, presentation
Shortlisted for Interaction Awards 2014

Surfin' information

Most forecasting apps for surfers group the data by type, location or time, and place them in separate views. Even though this might make the data easy to organize, it is hard for users to make comparisons and decide on the best location. We believe data-driven mobile apps can deal more elegantly with large data sets, putting the user at the center of the application, not the data.

Designing the flow

Our initial interviews revealed that surfers want to use a mobile app to get an overview of the upcoming days. The five most important types of data to compare are: wave height and period, wind speed, and the direction of each compared to the coastline. Importantly, these types of data are best understood in relation to each other.

This is a small selection of my sketches from our interfaces study.

A single view

Point Break brings together the five most important forecast parameters of a location and combines these forecasts for multiple locations over multiple days — into a single view.

The vertical list of spots elegantly combines map and graph data. It shows each location’s wave height (the single most important data) in a chart over three days. Detailed information on wave direction and period plus wind direction and speed is shown for any one point in time. A horizontal slider at the bottom of the screen lets the user quickly skim through the detailed information over the next three days. Wave and wind direction are displayed on a map, making it easier to read by showing their spatial relationship to the coastline.

Parallel development

The interface was developed simultaneously through wireframes, high fidelity graphic design and interactive prototypes. This parallel process helped us reveal opportunities and limitations early on. What seemed like problems in the wireframe design could sometimes be resolved with well-tuned graphics; similarly, what seemed like effective interaction in the wireframes could be checked through small interactive prototypes.