Nicolas Mansfield's profile

Offshore - Mobile Surfing App

My favorite project of my college career came in my last three months of school.

It was to create a new design for a surf forecasting app. Having all my family being huge surfers, I was stoked to start the project. I partnered up with my friend Joyce Voraphongphibul to change the world of surfing apps.

The Brief.

Offshore is a optimize surf forecasting app that informs, notifies, and updates surfers about weather and tidal conditions through a minimal, functional, and effective interface that is easy to use and customizable for all types of surfers of varying levels and experience.

Problem.

Through our observation of existing surf apps, we noticed a couple of key features to take note on, and quite a few problems. The majority of the apps would have a vast display of information but is poorly designed with difficulty accessing and pinpointing relevant information quickly. The lack of assistance for surfers on tips for ideal surf breaks and weather conditions suitable for their levels express safety concerns. And the absence of outreach to notified users of optimal surf condition results in missed opportunities to surf.

Solution.

With this app, we wanted to address all the problems we observed. Gearing our objectives to create a product with minimal, user-friendly interface that formulate concise information quickly on multiple surf breaks appropriate for the user’s level and sending out instant notifications on favorable weather and tidal conditions to encourage getting out and surfing.
Brainstorming.

To start our path in creating this app, we started out by making assumptions about surf-apps and surfers to get to know what is already perceived in their minds. From there we went on to doing contextual research to prove or debunk our assumptions. Learning and submerging ourselves to find out more about surfing, the community, weather reports, surfing groups, surf forums, existing forecasting sites and their apps. With Nic having experiences surfing and Joyce having no experience, the insights from both perspective serves to further the exploration of the products in terms of what is effective and what is excessive.

Research.

To help us gain more insights within the surfing community, we conducted interviews, posted out surveys, mapped out user-journeys, reviewed competitor benchmarks, and created scenarios. Here is what we found.

We reached out to our friends and family on the web in attempt to understand the current routine and situations surfers would go through in order to plan a surf trip, in the form of a survey. The results were interesting as majority would spend less time planning for a trip and opt to just check the weather app for information about their surf break.  What we also found was that a majority of the surfing community would all use different apps. We originally assumed that they would all gravitate towards one app, but we found over 6 different apps that they would use.  We took this as a sign that there is no real leader in this corner of the market, and that no surfer was completely satisfied with their app’s service towards them.

In attempt to dwell deeper into the lives of surfers, I interviewed some of his friends to talk about their everyday routine and surf life. One of the main results shed light on the important factor of surfing with friends and having a mean to communicate with them. Through this, we decided that it was important to integrate a messaging function within the app. Through this messaging function, we added the ability to send an area’s forecast as well. Another result of the interview was finding that many of the consistent surfers were often leaving a ways away from their frequent beaches. This meant that they would need to have the ability to plan further ahead than just the day of. What we did to address this problem was adding an extended forecast that is accessible through each location’s forecast.

Target Audience.

We made it our goal to cater this app to all types of surfers whether they’re a beginner, intermediate, or advanced. We wanted this product to be inclusive for anyone in the surfing community and for those who express interests in surfing. As surfing is a sport for all-ages, we try to conceptualize our interface and design to be neutral and transparent through all demographics.

Concept Evolution.

Starting off with our name, we chose to use Offshore because of offshore winds being a main concept for ideal surfing.

Initial Concept.

At first we just wanted this app to be informative, without any sign-up or login so the users wouldn’t have to interact with a lot of interface beside the bare necessity of getting the information. But with the results of the interviews, we felt that is was an important feature to add a chat option to our product, because being able to communicate, share and plan surf trips with friends is also part of the surfing experience.


First Mock-up.

During our first mock-up, we applied little instructions on how to operate the app, basing on our assumption that the users would automatically recognize the purpose of the standard navigation icons. But as we move forward with changes, we felt that although the icons were standardized, we didn’t want to exclusive anyone out especially since this app is catered for all-ages. So we added quick explanation of each home screen button and icons that appears when the user first uses the app.

Established Features.

We knew going into this project, we wanted specific information to be displayed within the app. Features like tidal and weather condition, future forecast, water temperature, wind direction, swell heights, ratings, automatic notification system, and settings were essential information that we feel are most important in looking at surf forecast.

Generated Recommendations.

Another feature we wanted to implicate into our app was our generated recommendation on surf breaks based on the user’s level and location. Imagining ourselves as a beginner surfer, learning all the tricks and tips on where to go and want to do could be worrisome and possible dangerous as well. We wanted this app to address this problem by welcoming the user into the surf community. Our goal was to make the user feel relaxed when using our product while creating a sense of trust. Letting the user input necessary information when they first use the app lets us do the rest of the work from notifying optimal conditions to recommending new areas to surf.
Visual Design.

Ever since the beginning of the project, we wanted to design an interface that was as simple and minimal as the information we would be displaying. We started out by doing quick exercised sketches of our home page, each variation either an extension from the previous or a completely different approach in design. We explored different platform of design, from using shapes like circles or square, animation to static screens, or using real pictures versus vector images.

We would later present our own concept for the brand identity during the first visual critique, with the final decision to pursue my ideation because it fit better with our minimal approach and structure of our app.

Between the first mockup and the finalize designs, many element were changed. More visuals were added into the home interface, a structure layout was created. The bright, active colors was replaced for a deeper, calmer color palette. The language and tone of the app were flushed out and appropriate for the audience.  

Development.

With the refinement of our designs finalized, we placed the app into Invision where we created our final prototype. A video was made alongside to explore and express the different capabilities and ranges of the product that we couldn’t showcase in the prototype. The reality of seeing the product used in a video serves to further convince, communicate, and reach out to audiences and potential users about our message and intention.
Challenges.

The challenges we faced while creating this app included choosing how to display a large amount of forecast information into quick and easy contexts. Creating a design and brand that would be fresh to the surfing community and clear to operate for all ages. Challenging ourselves out of our comfort zones through uses of new software, exploring and applying new methods and techniques in order to create new content, do research, and gain more insights.

Reflection.

Although the process was lengthy, we really enjoyed this project. It serves as a reminder that the steps we take and the things we do are in the hope of creating something that would better the lives of people. It challenges us to work together as a team, to push ourselves harder for something we care about and to see it all come together is something we can both look back on and take pride in.
Offshore - Mobile Surfing App
Published:

Offshore - Mobile Surfing App

A simple yet beautiful solution to checking the tides.

Published: