A Surf weather forecast app: A mobile application helps all surfers from beginners to professionals read surf data and find ideal surf spots
2022 (1 month)
UX Research, Design System, UI Design, Ideation, Wireframing, Prototyping
Mobile Device Design
What is SURfs UP?
SURFs UP is a surf forecast mobile application helps all surfers from beginners to professionals read surf data and find ideal surf spots. The design aims to fit the beginner-friendly so they can navigate and understand the surf information they need. You can play the weather forecast data like a compass on your phone.
Beginner surfer find it difficult to read the surf weather forecast
As a beginner surfer myself with just a few lessons under my belt, I'm feeling a bit overwhelmed and frustrated by my inability to read waves to know if the conditions are safe - The ocean can sometimes be unpredictable and scary. We know how confusing the sight of a surf forecast can be as a beginner - with arrows here, there and everywhere...
"Beginner surfers need to find the best wave to surf in real-time with the most easy-to-understand information."
What makes surfing weather forecast hard to understand?
To understand why this confusion happens, I began seeking guidance from experienced surfers, online resources and conducted in-depth interviews with 3 surfers of varying experience levels. The purpose was to understand if they had encountered similar challenges when initially learning to read and understand weather forecasts, while also identifying potential problems they might have encountered.
* Key findings from the interviews
User Interview at a glance
not sure about how to read the surf data, surf beginners could easily feel overwhelmed.
need a general recommendations or rating features based on their personal preferences.
need to understand complex wind data, wave and other weather data in order to assess surf conditions.
How can we make SURFs UP stands out in the competitive app market?
Most surf forecast apps only provide data organized in tables and graphs that require this knowledge and provide no guidance to less experienced surfers on how to interpret the data. I’ve taken a look at many apps out there and compared top 2 surf forecast app in a SWOT anaysis.
What has been missing is an app that provides accurate, detailed data for experienced surfers, while also providing easy-to-understand forecasts and surfing tips for surfers who are unfamiliar with wind, weather data and customizable surf preferences.
Lacking in the UI
Visual could be improved a lot
More help and guide me features
Increase the information shown about the wave
The surf report wasn’t very precise
Tracks in limited metrics from surf forecast
Limited on building your own personal surf spot database
* SWOT Analysis of surf forecast app: 'magicseaweed' and 'surfline'
If we want the app to be helpful, it should be...
Intuitive and Informative
Let users better understand the surf weather forecast
Connect your Interact to Compass
Personalize surf preferences
Redefine HMW Statement
After conducting thorough research, it became clear that to distinguish SURFs Up, we must creatively rethink the surf weather forecast. User interviews revealed inconveniences across different surf levels accessing app information. As a result, I redefined the HMW statement to cater not just to beginner surfers but also to people in all levels.
How might we empower all-level surfers to be able to read surf forecasts and find their ideal surf spots?
Key features: How to read surf forecast like a pro surfer
I started to structure the core features based on the research insights and HMW statement:
1) Break down the surf forecast to know where, and when the waves will be firing
2) An idea of viewing wind direction like a compass
3) Keep it simple
4) How all the elements combine to make good waves - and what to look for
5) What to look for in a surf report: swell height, wave height, swell direction, swell period, wind direction, wind condition
Building a low-fi prototype for initial testing
I created a low/mid-fidelity prototype to build upon the information architecture. Since it was still rough, I sought professional help with a heuristic evaluation to ensure surf weather forecast data could be visualized and new designs could be easily understood. Based on the user feedback, I realized that the design still didn't stands out from the competitors. This prompted me to contemplate the idea: what if users could engage with the surf weather in a playful way?
*This image only displays the main forecast page.
Redesign the Key features: Read wind direction like a compass
An idea of a compass popped into my head, leading me to illustrate the method of using your phone like a compass to determine wind direction. This aids in providing users with a clearer understanding of how the wind approaches your surf location.
Arranging the information in an easily understandable way
To personalize surf preference, users can select and customize your own surf skills, location and surf preferences in order to sort the suitable surf spot and surf forecasts for you.
Find & Save Ideal Surf Spot
The rating scale is based on user's surf preference, the larger the dot, the better the waves that suit for your preferences.
*It might take some time to load the gif animation.
*It might take some time to load the gif animation.
Playful Surf Forecast: Wind Compass
What if users could play the surf weather like you play a game? Scrub through a day and experience the shifts in wind and swell conditions over the course of a day like a timelapse shot. It never makes your reading boring.
Moving your phone around to navigate in which direction the wind is coming towards you. It helps you get a better direction sense.
A preview of live time wind direction, swell direction and tide
Draggable Live Forecast
Drag the wave bar to preview the surf forecast at any time
Tap and hold the screen to unlock hidden surf tips
Extra notes on how to read surf data
All detailed weather forecasts in a daily view and surf tips on how to read professional data
Overview: A quick guide on how to read the swell data
Swell Period: Tips on what's a good swell period for surfing
Swell Direction: The swell arrow is show where the wind comes to you and how to read the sign
Wind Condition: A informative graphic helps you understand what is Onshore and offshore.
Tide: A highlight of monotonic graphic lines helps you understand and learn high/low tide patterns.
Manage your saved surf spots and check on the live wave videos in real-time
Full-screen mode of live videos
What I learned the most from this project is that I know how to read surf forecasts beyond the beginner level, and find an ideal surf spot by myself. It has been a big challenge for me as it was my first data visualization related UIUX design, but it has taught me a lot about what to do and what not to do in my next one. As well as it’s essential to conduct user tests during the design stages, not all the data can be visualized well and make user easy to read.
Next steps: Keep Testing and refine the design
After finalizing the high-fidelity wireframes, I conducted user testing with two beginner surfers. Gathering feedback from users and other designers were an integral aspect of my design process. The visual and UI enhancements proved highly successful, though there's a consideration that an excess of visuals could potentially influence conventional user perceptions.
Keep usability testing of the prototype and refine the design based on user's feedback.