Surfline: New Feature

Overview

Surfline is a forecasting application that provides surfers and other board sport enthusiasts with real time wave and weather data. Using surfline, surfers can always know where the best waves are breaking.

New Feature

The added feature, My Quiver, allows users to add and edit their personal boards to the app. Once a number of boards have been added to the quiver, Surfline can recommend the optimal board for each beach in your Favorites.

My Role

Sole UX Strategist and Designer.

Defining the Problem

As surfers progress they begin to build a quiver of surfboards of different sizes and shapes. Different surfboards excel in different wave conditions and allow for different surfing experiences. How often are surfers wishing they were riding a different board?

Before diving into formal user research I took a quick poll to ensure this problem is worth exploring. Over 75% of preliminary participants had experienced this problem so it was time to dive deeper into the problem and research.

Surfline allows surfers to see where the best waves are but how can Surfline also ensure its users are riding the optimal board for the conditions?

Research

Survey

In order to get some general quantitative data about people’s surfboards, routines, and experiences, I shared a survey throughout different surfing groups on Facebook and Reddit.

KEY FINDINGS

  • 13/22 participants own 3 or more boards

  • Everyone with multiple boards has different types (ex: shortboard, fish, longboard)

  • 10/22 people often/almost always find themselves deciding between multiple boards when going surfing

  • 16/22 surfers have paddled out to the surf and wished they brought a different board

    • 7 of those 16 have even left the beach to go home and switch boards

TAKEAWAY

Based on the survey data, surfers have numerous boards for different types of surf and choosing the right one is a choice they have to make constantly. The majority of them have made the mistake of choosing the wrong board and they even regret it enough to get out of the water and get the correct one.

User Interviews

Next I conducted interviews with 3 surfers ranging in skill level. They were all between 25 and 40 years of age.

“I really wish I had a shorter board that day”

KEY FINDINGS

  • Some surfers bring multiple boards to surf so they can choose which is the best once they get to the beach

  • Reading the current tides plays a big role in choosing a board

  • The highlight of one trip was having board rentals on the beach, ensuring that no matter the waves, they could pick the best board right there on the beach

  • “I really wish I had a shorter board that day”

  • If it will make or break the quality of the session, people don’t mind driving back home to swap out boards

  • Favorite surf trip was a chartered boat to a secluded break, in such a scenario, you are stuck with whichever board you chose for the day

User Persona

I compiled information from the research to create a user persona, Matt. With a family at home, surfing definitely takes a back seat. Since he has limited time to surf, he needs to make the best of every session he has.

Choosing the right board to ride is a step in the process that takes away from time in the water. By quickly choosing the best board for the day, Matt can maximize his time in the water and hopefully never regret paddling out on the wrong board.

Research Synthesis

Through analyzing the research it became even more apparent that board choice is a critical element in a surfer’s routine. People’s favorite and worst memories in surfing revolve around the board they’re riding, so why hasn’t Surfline already created a feature to improve their users’ experiences in the water? Surfers are already checking their surf forecasting app and reading the tide charts to decide which board to ride, why can’t Surfline take that work away from the rider? I began to brainstorm and ultimately decided to design a My Quiver feature that would allow users to add their personal surfboards to so Surfline could recommend which would be ideal for the given conditions.

User Flow

I outlined the My Quiver feature and made the decision to add a Recommended feature directly on the already existing Favorites page of the Surfline app. Since the Favorites page is the main focus of the application, the My Quiver page was added as a tab menu here. This allowed the new feature to get the most exposure without disrupting users’ existing flows.

Design

During the sketch and wireframe process I tried to maintain the minimal feel of the Surfline design system while also adding a lot of additional information in the form of recommendations and board information.

I knew the recommended feature couldn’t disrupt users’ current flow of getting prepared to surf so I ultimately decided it needed to be right on the favorites cards so the new feature was visible but not disruptive.

I also needed to design a whole new page that features the user’s quiver where they can add and edit their surfboards.

Sketches & Wireframes

High Fidelity

After making some key design decisions, I began to apply the Surfline UI kit to the wireframes. I avoided adding any new colors to the style in order to maintain the current design of Surfline. I also attempted to replicate small details such as drop shadows and spacing for new elements. This was key in respecting the sleek and minimal design of the current Surfline application.

(v1 Design)

I performed some preliminary testing on the general design before diving into full on usability testing. The key findings allowed me to make a second version before usability testing.

KEY FINDINGS

  • Drop down recommendations are an extra unnecessary step

  • Favorites / My Quiver tabs would be more intuitive than a dropdown

  • The green accents seem inconsistent with the rest of the feature

(v2 Design)

Test

Usability Testing

Next I put the prototype to the test! I recruited a handful of Surfline users and a participant who hadn’t used the app before to test the overall learnability. After testing, it became apparent the functions weren’t as intuitive as I had anticipated.

KEY FINDINGS

  • Drop-down recommendations added an extra step to the feature that could be missed

  • Drop-down menu for the Beaches / Quiver wasn’t very intuitive at first

  • The Add/Plus icon for the quiver was easily missed

  • The learnability for the Add/Plus icon could be improved, users expected a tab like interaction

  • Drag interaction on the quiver carousel wasn’t immediately used

  • How does the Last Used information get updated?

  • Edit/Delete options were overlooked

Iterate

Major Iterations

FAVORITES PAGE:

The original My Quiver dropdown proved to be confusing for the users and very easily overlooked. The recommended icons were also removed from behind any interactions and are directly visible on the favorite cards.

  • Updated dropdown menu to tabs

  • The recommended feature is now directly on the location card

MY QUIVER:

The original add icon wasn’t descriptive enough, many users had trouble with it. In addition, the original color hue was already used in the Surfline UI kit which felt redundant.

  • Changed the plus button to an Add New Board card

  • Darkened the blue used in the new elements

QUIVER DETAILS:

The same add icon was used in the Quiver Details so that caused users some issues as well. The general navigation throughout the the Quiver Details needed some refining with better buttons and more features like editing and deleting.

  • Adjusted spacing throughout the carousel

  • Removed the last used/location text

  • Changed plus button to Add Board button

  • Added an edit and delete board option

Final Designs

Reflection

The constraints of this project made this app feature quite challenging. Since I only had 80 hours to complete the feature it had to be concise while also solving a major problem users face.

Another major challenge was working within the Surfline design system. In order to avoid disrupting users’ current flows and respect the overall design of the app, I had to toe a fine line. I wanted the feature to be robust and truly help the users but it had to be very sleek and minimal in design in order to mirror the current system.

Although these constraints were challenging, getting to research such a niche subject brought a lot of excitement and character to the project. The participants were especially excited to share about their hobby. It was a joy seeing how helpful the new feature could be to users and hearing all of their feedback. This project really made me look forward to future feature projects I will get to work on.

Future Steps

Given the time constraints of this project, the following ideas and recommendations weren’t prioritized during the iterations:

  1. A picture upload instead of a generic board icon would allow users to add a personal touch to this new added feature and could also avoid mix ups with boards that may be similar in size and shape.

  2. Incorporating the recommended boards on the explore map and location pages would be a great consideration for future iterations as well.