End-to-End Research & Design for a Mobile Surf Application

My Role: Research & Design (solo)

Methods: SWOT Analysis, Surveys, Interviews, Affinity Mapping, Card Sort, Data Analysis, Wireframing, Prototyping, Usability Testing, Branding

Tools: Survey Monkey, Optimal Workshop, Balsamiq, Illustrator, Photoshop, Adobe XD

Timeline: 8 months

Overview:

As a project for a UX Design course (CareerFoundry), I created Vela: a mobile application that provides weather and surf forecasts for surf spots all around the globe. Vela caters to beginners through inclusion of an overall rating and explanation that summarizes the forecast. Vela caters to intermediate and advanced surfers by providing descriptions of ideal conditions for each spot. And finally, Vela caters to all surfers with the ability to set alerts for ideal conditions at a particular spot.

INITIAL ANALYSIS

Surfers currently check multiple applications to make sure the forecasts are accurate.
Some surfers have difficulty analyzing the data because it can be too complicated.
Most apps charge to view the livestream.
Some surf spots are in remote locations and are unable to view the surf report with no cell reception.

PROBLEM STATEMENT

Surfers need a free, simple and accurate way to determine surf conditions at specific surf locations because they want to have a worth-while surfing experience with waves that correspond to their level. We will know this to be true when we see how many users there are on our app and how many positive ratings the app receives.

METHODOLOGY

DISCOVER: User Surveys

Using Survey Monkey, I reached out to 5 surfers to gain initial insights such as existing positive features, pain points and user needs. The graphic to the right clarifies the participant’s desires for features. Other insights include the following:

User needs: search, webcams, rating scale, safety alerts
Pain points: accurate, detailed up-to-date, specific information, having to pay for livestream or a breakdown of the stats

DISCOVER: Competitive Analysis

Through User Surveys, I identified Surfline and Magic Seaweed as the two most-used forecasting apps for surfers. I performed a SWOT analysis, Competitor Profiles, and UX Analysis for each app. See a summary of the SWOT analyses below. My findings included the following: Surfline is known for its extreme accuracy but the free account offers limited features. Magic Seaweed offers a great deal for free, yet the forecast is not as reliable, since its data-driven. Magic Seaweed is also limited in the number of surf spots in comparison to Surfline. Both applications could improve the ease of sharing forecasting data. Vela can fill a gap by simplifying the forecast and offering accurate forecasts for free.

DISCOVER: User Interviews

I interviewed 5 surfers of varying levels, ages, and locations, including Bali, Australia, and California.

RESEARCH FINDINGS

Surfers have different needs depending how well they already know the spot (travelers vs. locals)
- For example: Webcams are more useful for locals who know the beaches well. Otherwise they just use the webcams to see if people are in the water, which would imply good surf conditions.
Input from locals is extremely important: A local forecaster can give a much more accurate weather report than a machine generated report (like Magic Seaweed). And locals know the best surf conditions at their spot. An ideal condition at Spot A won’t necessarily be ideal at Spot B.
Matching feature would be useful!

RESEARCH GOALS

Understand user attitude toward existing weather forecasting apps
What kind of data/stats do users want to see?
Distinguish between user needs and nice-to-haves
Identify pain points in existing competitor apps
Would a “matching” feature be useful? (Input skill level, output surf spot)

“If you’re looking at a new place, you have to Google the best conditions. That would be heaven if you could know the ideal swell direction [at a surf spot]!”

— Interviewee

EMPATHIZE: Research Analysis & Affinity Mapping

After going through the User Interviews, I wrote each participant’s responses on post-it notes and grouped them into 4 categories:

needs & goals
behaviors & attitudes
frustrations
quotes

Then I re-grouped the post-it notes into new categories:

data included in a surf report
other desirable features
app usage
webcam thoughts
local components
surfer mindset

I viewed the surfer mindset one of my biggest challenges. If everyone knew the ideal conditions at a spot, it would be too crowded and thus not an ideal surfing experience. There is a territorial component among surfers in which the locals don’t want others to know ideal conditions.

EMPATHIZE: User Personas

Based on all prior research, I created 4 user personas.

Jason, the Die-Hard Local, is an advanced surfer who is a creature of habit. He surfs on what he refers to as his turf.
Tina, the Beginner, is an athlete who wants to try surfing just as she wants to try all outdoor activities.
Danny, the Hippy Vagabond, is an advanced surfer who travels frequently.
Ally, the Working Local, is an intermediate surfer. She works a 9-5 job, M-F and loves surfing in her free time, typically on the same beach.

IDEATE: Journey Maps & User Flows

After deliberation, I decided to build Vela catering to only 3 of the 4 user personas: Tina, Danny and Ally. To make sure Vela meets their goals, I created journey maps to describe their thoughts and emotions as they complete tasks. I then created user flows as if going through a likely scenario. See Journey Maps and User Flows here.

IDEATE: Information Architecture & Sitemap

Performing an Open Card Sort (via OptimalSort) confirmed my theory that each spot should include 3 sections:

Current Surf Report
Detailed Surf Report
Local Info/Additional info

The card sort also helped me refine the Site Map.

PROTOTYPE: Wireframing

After solid research, it was time to put pen to paper. I began with Low Fidelity wireframes which you can view here. I refined these to mid fidelity wireframes using Balsamiq, which I then assembled into a prototype using InVision.

TESTING: Usability Testing

With a mid-fidelity, greyscale prototype, I began Usability testing. I conducted 6 tests, 3 of which were moderated and in person, the other 3 were remote and unmoderated. To measure learnability, I calculated the success rate of each participant completing 3 tasks. The goal was to assess the learnability and errors. I wanted to know if users could locate the surf report of a specific spot. Could they access Favorites and set custom Alerts? A secondary goal was to test satisfaction. To measure errors, I used Jakob Nielsen’s rating scale of 0-4. To measure satisfaction, I surveyed the participants after the usability test.

I analyzed the findings through affinity diagrams grouped into Observations (Thinking, Feeling, Doing), Positive Quotes, Negative Quotes, Errors, Suggestions. Then I sorted them into a Rainbow spreadsheet and determined severity making it very clear to see Vela’s top 5 most pressing issues:

Most participants tried to set an alert within the Spot page, not in the Profile.
Most participants mentioned the recording of the tide would be most helpful if depicted as graph.
Wave height was missing!
Alert for Surf level was confusing. At the end of the day, a wave is either a good quality wave or a bad quality wave.
An overall rating system would be useful for beginners who are simply trying to determine if the surf is good or not.

REFINE: Visual Design & Feedback

With a solid understanding of the functionality of Vela, I added color to the prototypes. I took into account Visual Design principles from Gestalt Theory, Emotional Design, Grids, and Accessibility Guidelines.

At this point I sent my high fidelity prototype around to other students for some feedback. I found the feedback extremely valuable, including the overwhelming sentiment that the background was taking away from the app. I tried a background of bright yellow (see below) but ultimately decided to keep it simple.

As mentioned above, I decided to simplify the visual design.

I welcome you to view the most polished prototype for Vela at this time. Click through on your own or watch the video while I narrate through one of Vela’s features: the ability to set an alert.

Music: Ferus Gallery by Allah-Las

Reflections

If this were to become an app, I understand the importance of making business decisions. For example, it would be difficult to offer extremely accurate forecasts and live cameras at multiple spots for free.

A challenge for me was understanding everything that goes into a surf report, as I am not a surfer myself. But it was fun and interesting to learn the intricacies of it all.

One of my favorite parts of building Vela was creating the affinity maps after user interviews and performing usability testing.

Another one of my favorite parts was getting feedback from other students in the course. I find collaboration is an integral part of the design process and was wishing I had that opportunity throughout other times during the project.

Next Steps

Continue building out Vela:

Forecast tab
Local Info tab
Explanation of Rating
Profile screen

Improve the illustrations in onboarding and add some animation to the flow