SURFs UP
SURFs UP
SURFs UP
SURFs UP
A Surf weather forecast app: A mobile application helps all surfers from beginners to professionals read surf data and find ideal surf spots
Year
2022 (1 month)
Role
UX Research, Design System, UI Design, Ideation, Wireframing, Prototyping
Project Type
Mobile Device Design
Design Tool
Figma
Overview
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...
Problem
"Beginner surfers need to find the best wave to surf in real-time with the most easy-to-understand information."
Research
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
Beginner surfers:
not sure about how to read the surf data, surf beginners could easily feel overwhelmed.
Intermediate surfer:
need a general recommendations or rating features based on their personal preferences.
Advanced surfers:
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
Interactive
Connect your Interact to Compass
Customizable
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?
Ideation
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
Design Deliverables
Onboarding Questionnaire
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.
Forecast Preview
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
Surf Tips
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.
Live Data
Manage your saved surf spots and check on the live wave videos in real-time
Full-screen mode of live videos
Customizable preference
Conclusions
Key Takeways
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.
Appendix
