A coding and UX project designed to provide wave and weather forecasts for multiple US locations

Click here to visit live project

Users can select a location from the dropdown menu or visually search through the locations through the map

Once a location is selected, the corresponding forecast page shows a range of information, including the current forecast, weather alerts, 16 day forecast and wave height graph

The 16 day forecast is a scrollable table, allowing users to quickly find the relevant date

Multiple dates alongside each other provide an overview of how wave heights are progressing, while minimising vertical space on screen

The tide graph below follows a similar design approach

The mobile layout compresses the design into the smaller layout while keeping the focus on the most important information, the selected location and it's wave height.

The previously scrollable 16 day forecast table is now navigated with clickable arrows