Surf up is a concept application that I worked on during the previous semester as part of the UX case study project.
I sought to explore how I can help people find and check surfing spots more easily. By focusing on how users determine where they surf, I used the human-centered design process to create design solutions that could enhance a beginner surfer’s surfing experience of finding and getting information easily.
Throughout my time in California I have noticed many people are interested in surfing but also concerned about how novice surfers are often lacking critical information to start their journey. I designed Surf up by providing essential surfing information for beginner surfers to assist in providing critical information on deciding where and when to surf.
Throughout these 15-weeks, I divided my design process into six categories
Learning Goals
Public ESM Data
User Interview
Literature Review
Low-Fidelity Sketch
Mid-Fidelity Wireframe
V1 High-Fidelity Design
User Testing
V2 High-Fidelity Design
Design Micro-interactions
In order to understand people's current behavior in checking and searching surfing spots, I gathered information related to surfing and collected responses from over 11 surfers, 7 non-surfers. My research method ranged from behavior tracking to in-person interviews and surveys.
After conducting surveys with learning goals and user interviews, I’ve learned that the majority of people had a difficult time searching for surfing spots, and sometimes they had no idea how to read the weather information such as wind speed, tide, etc. They wanted an easier way to find an adequate place for surfing and to be recommended which places are good for surfing.
From the quantitative research, I found that 19% of surfers were mostly beginner surfers. Also, from the literature data, a key insight was the significance of convenience. Another valuable insight was that there was a high psychological barrier to entry for beginner surfers to start surfing. With these findings, I began listing out useful app features that could address each category of concern.
By gathering data, I conducted an affinity diagramming exercise to examine user patterns, groupings of scenarios, and activities related to finding a surfing spot. Based on the affinity diagrams and my previous research insights, I found that determining surfing spots differentiated by surfing skills. I clustered them into the following three different user scenarios.
I visualized these three user scenarios below. As this flow shows, there are two types of users; beginner and intermediate level. I created features based on those types of users and put additional useful information related to surfing such as videos and live cam so that they can decide what they are going to do before surfing.
The primary features I decided to design for include:
01 / Weather forecast (temperature, wind, tide)
02 / Beach information
03 / Surfing videos
04 / Live beach camera
Over the next few days, I conducted user testing on 12 individuals using my Figma prototype. I collected feedback in various ways including asking them to engage in timed tasks, exploring the app, and asking what they enjoyed and what was uncomfortable using the app. Below are the three main problems I gathered from user testing.
There was a big weather card at the center of the main page. Users were relatively unaware that there was another weather card on both sides.
It was hard to find the most important 'Add Spot' CTA button using this app. Users were confused that the CTA button and non-CTA button are the same shapes.
Most of the texts used in this app were the same size and font. The visual hierarchy was relatively unclear.
The star icon was placed in the upper right corner to set the save favorite spot. However, after user testing, many users skipped this without noticing it.
In the next version, the 'Add spot' was placed under the recommendation. However, since the color of the recommendation looked like a CTA, it was difficult for the user to recognize it at a glance.
After A/B testing, I created the final version. In the add favorite spot step, I removed recommendations so that user recognize it as a CTA button.
1. Added List view button and Add spot button on top of the main page
2. Expose slots on both sides so that the user can swipe and check other screens.
1. Place Home icon on the center of the bottom bar
2. Change bottom indicator from bar to circle
Since this app targets beginner surfers, saving a favorite surfing spot should be the first user action. The ‘Add Spot’ button is the most important Call-to-action in this process, and I was wondering how to design this button to induce user actions. Rather than star and heart icons, I decided to follow the shape of the app button to keep design consistency.
I placed swiping cards style design on the main page to check the weather summary easily. I spent the most time designing this page as this will be the main feature of the app. Another obstacle that I discovered after user testing was how to make the swiping function feel more intuitive yet still maintain its design. I wanted to make users use this feature easily without skipping it.
I placed swiping cards on the center to check the weather summary. I spent the most time designing this page as this will be the main feature of the app. Another tricky obstacle that I discovered after user testing was how to make the swiping function feel more intuitive yet still maintain its design. Again, I really wanted to make users use this feature easily without skipping it.
The primary function of this app is setting a favorite spot and seeing the forecast including swell, wind, and the tide chart related to surfing. I included a short recommendation sentence such as ‘Good for surfing’, so those beginner surfers could easily understand no matter their knowledge level of surfing. After the user testing, users are able to check the weather easily and decide on surfing spots nearby.
One of the biggest ideas I found among surfers was a live cam feature and surfer reviews of the beach. Introducing a beach information page and live beach camera page addresses these concerns and creates a more efficient, and stress-free experience for surfers.
Another idea II learned through user interviews was a section for videos related to surfing. By categorizing videos with the type of surfing board, and surfing level, users can select the video easily which fits their needs.
Obviously, the unit is highly dependent on countries and individual preferences. Because of that, I put additional features into the setting page.
My ultimate intention for this surfing app was to help beginner surfers by not only providing information but also helping them build a more positive surfing experience. Throughout the 12 - weeks case study, I was able to experience everything from app ideas to feature development, research, and testing. I also tested my surfer friends as well, and gained valuable ideas and feedback. I will working on my designs to develop better.