Surfline Mobile App Find a Fin Tool
Role: UX Design
Overview
Surfline is a company and mobile app based in Huntington Beach, California that specializes in surf forecasting and surf reports, as well as editorial coverage for the sport of surfing.
My Role
UX designer on a team made up of project managers, UX producer and front-end developers working in Agile structured design sprints.
What I did:
Worked closely with stakeholders to review user requirements and communicate design direction.
Delivered user flows, wireframes, low-hi fidelity prototypes, and final designs for dev handoff.
Participated in weekly stand-ups, discussions and critique of work with stakeholders and team members.
Supported dev teams in weekly QA and grooming sessions to ensure designs met expectations.
PROBLEM
Among Surfline’s sources of revenue was sales of surf-related equipment through third-parties. One of the lowest selling items were surfboard fins. Surfline wanted to explore a solution to help increase fin sales, with the objective to not only increase revenue but to also to help improve a surfer’s skill through proper fin selection.
“How might we persuade users to purchase a surfboard fin in order to improve their surfing skills? ”
My Approach
DISCOVER
I entered this stage to learn more about what our users knew about surfing equipment, primarily fins. Additionally, I wanted to learn more about their behaviors when purchasing surfing equipment.
• User Research
• Interviews
DISCOVER
User Research
During research, I focused primarily on user interviews. I created a questionnaire in collaboration with my product manager with the intent of learning about user’s knowledge of surf fins and surfing overall.
Research Objectives
Understand what participants know about surfboard fins and their behaviors when purchasing surf-related equipment.
Method and Users
Remote interviews with 8 users from North America and Australia regions. Requirement: Beginner-Intermediate surfer with less than 5 years of experience.
DISCOVER
Primary Research Questions
Q1.
On a range of 1-10, what would you say your level of expertise is on surfboards fin? Please explain why?
On a range of 1-10, what would you say your level of expertise is on surfboards fin? Please explain why?
Q2.
How many surfboards do you own? Are you planning on purchasing any new boards soon?
How many surfboards do you own? Are you planning on purchasing any new boards soon?
Q3.
How would you go about choosing a new set of fins for your surfboard?
How would you go about choosing a new set of fins for your surfboard?
DISCOVER
User Research Insights
“I usually just use the fins that come with the board. They seem to work fine at the moment”
“I choose new fins more to experiment new things, not necessarily to get better at surfing ”
“I tend to do a lot of online research when I need to buy something I don’t really know about.
“To be honest, I have no idea how fins may change the surfing experience, but maybe I should”
DISCOVER
Affinity Map
With so many notes and observations during user interviews, I created an affinity map to organize my data. I use this as my preferred method not only for organization purposes, but to also find common themes among the data.
DISCOVER
Affinity Map Insights
DISCOVER
Key Findings
Let me think about it, dude.
Novice surfers seemed hesitant to purchase new equipment without knowing if it would actually improve their surfing or be a waste of money.
Gimme the deets
If novice surfers were to begin searching for new fins, they want to know how they would specifically change their surfing when using them of different board types, waves and other conditions.
Not catching your vibes
Overall, beginner surfers lack an understanding about the functions and purpose of surfboard fins.
IDEATION
The most common finding during interviews was that most novice surfers lacked knowledge about the use of fins. Secondly, they seemed hesitant on spending money for fins they weren’t sure would work for them. I wanted to explore solutions to give users confidence in knowing that they were going to purchase the correct fin for their specific needs and skill level.
• “How might we”
• User Stories
• Concept & Explorations
IDEATION
“How Might We” 🤷
• Help new surfers choose the correct fins based on specific conditions, board type and skill level?
• Educate novice surfers about the functionality of different fins?
• Facilitate users to buy fins they have never used before?
IDEATION
User Stories
Before designing, I like to establish design direction via user stories. I worked closely with my product manager to
help write some higher level stories to begin exploring concepts.
As a (user), I want to find the right fin so that I can improve my surfing skills.
As a (user), I want to learn more aboutfins so that I make the correct decisions when choosing surfing fins.
As a (user), I want to buy the best fins with confidence for my needs without wasting money.
IDEATION
Design Process
VALIDATE
Generating Ideas
Since I was starting from the ground up, I began exploring ideas through sketches. My initial approach was was to create a questionnaire for users to define their knowledge about fins. Sketching helped get rough ideas out in a visual manner.
Previous slide
Next slide
IDEATION
Concept 1
The first idea I went with was a simple set of questions for the user, in order to help them find an ideal fin. I
wanted to have the user answer simple questions about their specs, such as , height, board type, wave types,
etc. With these parameters I believed it was enough information to match a fin for their needs.
IDEATION
Rapid Prototyping
During design reviews with stakeholders, I shared prototypes ahead of time in order to get quick feedback. Prototyping provided an interactive set of designs that helped gather constructive feedback and suggestions while the concepts were in such early stages.
IDEATION
Feedback & Review Insights
Drop-downs need more information
With more than 5 different board styles (longboards,
shortboards, etc), it was received that just text may not be
enough to help users decide on which board they may be
using.
Single page approach is not scaleable
The questionnaire approach was well received, however not
knowing the exact set of questions, there was concern a single
page approach could be too lengthy, especially when moving
back and forth between questions.
IDEATION
Concept 2
After reviewing the first concept with the team, I felt confident moving forward with the questionnaire approach. I addressed the main insights by exploring a multi-page questionnaire along with ways to include visual components to the flow.
IDEATION
Usability Flows
As the second concept gained traction, I thought it would be best to map out flows in order to make sure I wasn’t missing details. The more I fine tuned the concept, the more complex the flows became and user flows helped with overall organization.
VALIDATE
After many rounds of review with stakeholders and team, we came to a solution that was worth user testing. I collaborated with a user researcher to A/B test and create prototypes. From these sessions we identified misunderstandings or incorrect assumptions we made during the design process — helping us make more informed iterations.
• Prototype
• Usability Testing
VALIDATE
Prototype
The first step in validating our concepts was to build a prototype for the proposed solution. We asked participants to complete different tasks and observed any pain points or frustrations when completing their goals.
VALIDATE
Usability Testing
We ran 2 remote moderated usability test sessions with 4-6 participants per round. Being remote we leveraged Miro as our tool of choice to take notes collaboratively.
VALIDATE
Usability Testing Insights
“Are all these steps a requirement or would I be able to skip them? If so, it would be nice to know.”
“What would happen if I didn’t know which type or kind of wave I surf?”
“It would be nice to be able to navigate via the progress bar. That way I don’t have to click back and forth so many times.”
“I would like for my top result to be more prominent. It feels like I have no real answer.”
VALIDATE
Usability Tests Key Findings
Simple and intuitive navigation is key
With multiple choices and pages in the questionnaire, participants clicked on different areas to navigate between the different questions. Users also seemed reluctant to lose progress while using the questionnaire.
Help users when they’re in doubt
Participants need descriptions of some of the multiple choices in the tool. Most participants weren’t sure what to answer because they were still in early stages of surfing to properly know the meaning of types of waves, boards, conditions, etc.
Saving results
While testing, I realized the results could vary from the different combination of answers. Adding a “save” feature to a user’s results could improve the tool’s user experience.
Final Solution
After multiple rounds of iteration and testing, along with enhanced designs, Surfline released and piloted the “Find a Fin” tool in the Australia region in June 2021. Upon release, the tool was used over 10,000 times in the first 2 weeks. The tool is planned for release in the U.S. North America region for summer 2023.
SOLUTION
Interactive Questionnaire
I followed Surfline’s brand guidelines and design system to leverage a clean and intuitive questionnaire. Additionally, I used iconography to to incorporate visual elements to selectable components to help identify waves, board types, etc.
SOLUTION
Results and Seamless Shop Experience
Upon matching users with their fins, we offered multiple results, in which a user could seamlessly select a fin to not only purchase the fin, but also learn how the fin matches a user’s needs.
SOLUTION
Intuitive Navigation
During usability testing, I observed participants having difficulty navigating throughout the questionnaire. I focused iterations to make navigation as intuitive and easy as possible for users to navigate back and forth between questions. While we had CTAs on the bottom of each question, I also made the progress bar navigable, which seemed to be the most intuitive component for navigation.
SOLUTION
Saving Fin Results
Another observation during iterations and testing was that a user could use the tool as many times as they wanted. Their results could vary depending on different answers. As an incentive to come back and possibly buy a fin, I wanted to give users the opportunity to save a fin in order to purchase the fin in another session.
SOLUTION
Reflections / Takeaways
Iteration, iteration and some more iteration
Throughout the end-to-end process, what I thought was a final solution, was not even close. I began to value the rounds of iteration with the team, because it removed my assumptions as a designer. Ultimately, I understood the importance of user feedback in order to perfect the experience towards the final solution.
Design is collaboration
I realized once again the importance of collaboration throughout the process. From end-to-end, I was exposed to so many different teams from management to dev. I used a wide vary of methods, like wire framing, prototyping, sketching and more to share designs in collaboration with the team. It was a team effort to build and ship a quality product.
