top of page

VELA

OBJECTIVE

A beautifully designed ​app which provides ​wind, ​wave,​ ​and​ weather​ ​​forecasts​ in an easy-to-understand way for​ ​surfers at all levels, helping them to stay safe and have fun. 

VELA is a product that came to life through my UX Design certificate training program at CareerFoundry. 

This project allowed me to plan and direct each step of the human centered process as a UX design student with mobile and web UI design experience.

HIGH LEVEL TIMELINE

May 2018 - May 2020

TOOL KIT

I'm a paragraph. Click here to add your own text and edit me.

KEY GOAL

I'm a paragraph. Click here to add your own text and edit me.

THE PROBLEM

Existing weather apps aren’t meeting the goal of displaying complex weather data in an accessible, easy-to-comprehend way to people who regularly engage in watersports.

Days on the water are meant to be everything but stressful. To avoid these, it’s good practice to check the conditions of the wind, waves, and weather near the body of water where surfers will be having fun to avoid dangerous situations and better prepare for a day of surfing.

Possible problems

  • Existing ocean forecast apps don't display complex weather data in an accessible, easy-to-comprehend way to people who regularly engage in watersports.

  • Without much experience it is even more challenging to read these reports, although they are meant to help surfers to better prepare for a safe and enjoyable day outside in the water.

  • Also, these forecasts are usually meant for a wider group of ocean goers and are displaying data for different types of watersport activities, overwhelming surfers with unnecessary information.

Problem statement

Our surfers need an efficient way to check and collect information about their preferred coast, weather and waves conditions because they want to improve their surf experience.

Hypothesis statement

An app which provide each surfer with relevant information based on individual needs, in a clear and understandable way and that actually represents all conditions at the coast.

DESIGN CRITERIA

Explore ways to take weather report app to the next level through research, analysis, and best practices in UX design.

For this project, some of the exciting challenges to solve include designing easy-to-comprehend data displays, figuring out ways to encourage users to get in the habit of checking the app before heading out to the water, and making the UI attractive.

The project’s complexity required clear guidelines that should be kept in mind while solving the problem

Design for a Specific Circumstance

Helping users to feel confident about their ability to correctly interpret important weather conditions that can help them to stay safe.

Safety First

Design to encourage users to get in the habit of checking the forecast before heading out to the water and making well-informed decisions.

Make it Visual and Beautiful

Considering ways that simplify complex wind, waves, and weather forecast reports for users to glean all the important data they need.

COMPETITOR ANALYSIS

After taking a broader look at the actors on the market and their main characteristic and USP-s, I chose two competitors, built their marketing and SWOT profiles, and conducted a UX analysis of their products. The goal was to get an idea of what users might expect from my product, which of the competitors are doing a good job at solving user problems (and which aren’t), and opportunities to meet an unfulfilled user need.

I chose to examine Surfline as one of the most popular and well established company. It was exciting to observe how the oldest forecast provider is still on the top, furthermore it is a great challenge to improve discovered frictions of one of the market leaders. 


​Glassy Pro, in contrast, is a quite new player and a good example of company founding a niche in the market and providing a pleasant user interface & experience. They attempt to stand out from the competition helping surfers not only to improve their surfing performance but also their health and physical condition.

SWOT Profile.jpg

UNDERSTANDING THE USERS

Our target audience are surfers on all level, who are looking for information about wind, wave and weather conditions. My target age demographic is 15–60 since younger people are less likely going out to the water without parental supervision and older people may be more likely to be turned off by the technology.  

Initially, I was running a survey which helped me to get a deeper insight into the world of surfers, their attitudes and concerns. Based on the results, I could formulate more specific interview questions to find out more about my users' feelings, needs and desires. 

Organizing the interviews was the most challenging, reaching people from different time zones. Conducting them was the most exciting part: listening to surfers talking about their passion, desires and challenges helped me to understand their needs and goals and further refine the problem statement.

AFFINITY MAP

With the results of my survey and interview research analysis, I synthesized the data collected through the creation of an affinity map. This process is a great way to group up facts, observations, findings, in order to gain insights and come up with solutions, product ideas.

Affinity Map - User Research.jpg

KEY TAKEAWAYS

First I summarized the gained findings and insights, then I turned them into solutions, product ideas.

Forecast reports displaying complex weather data are overwhelming for novicers but even more   experienced and advanced surfers might get confused occesionally as well

Surfers usually use different sources on different devices (mobile & computer/app & website) to find all the information they need

•Competitors often don’t provide information on conditions at the beaches like on safety or difficulty of the spot (for beginners vs. more advanced).

Surfers often search separately for webcams to see the actual waves and conditions on the beach

Google will be used to find new spots / find information to less known spots / find & check out webcam

• Competitors don't introduce less popular - less known beaches

• Ability to set up a log of surf sessions does not seem to be priority

TURNING FINDINGS INTO ACTIONABLE INSIGHTS

Lot of unnecessary information for surfers

Forecast reports often overwhelm surfers with a lot of unnecessary information, making it hard to interpret correctly, so focusing only on the data surfers need, displayed in a clear and straightforward way helps them to get the necessary information quickly and easily.

Understand the conditions quickly

Surfers want to understand quickly if surf conditions are good or bad, so different surf conditions should be summarized/highlighted/rated with different colors/icons.

Showing more then weather conditions only

Besides of weather forecast, surfers need to know other kind of information about conditions on the beach to stay safe and have a great surf experience, (e.g. difficulties, rocks in water) this information could be included about each spot in a short review.

Information to real-time conditions to surf spots

Predicted data in the reports don't always match real conditions on the beaches, real-time information in form of comments, pictures uploaded by users or access to webcams could help surfers to see actual conditions on the surf spots.

Less known, less popular spots

Not well-known spots and information about them are usually missing, the option to add new spots to the list with admin’s permission and to share information about them by users. 

Image by Miguel A. Amutio

TITLE OF THE CALLOUT BLOCK

USER PERSONAS

Based on the generative user research I conducted, I created user personas that capture the essence of my target group. Marco and Andres helped me to always keep the needs and goals of my users in sight. 

Andres represent the group of users

  • living next to the ocean

  • as a surfing teacher surfing is his everyday activity 

  • needs accurate and actual information about the coast, waves and weather to be prepared for his student's safety

Marco represents the group of users

  • who are land-locked

  • surfing only when travelling a few times a year

  • needs to be uptodate to use well his limited time 

User Personas_2.jpg

EMPATHIZING WITH THE USER

To understand better the challenges surfer are facing in different situations, based on the needs and goals of my personas, I created Mental Models and User Journey Maps. 

By creating mental models and user journey maps I aimed to demonstrate the process of how Marco and Andres behave, feel and what they think while accomplishing their goals, I wanted to detect pain points or moments of delight while engaging with our product.

User Journey Map

Mental Models

Mental Models & User Journey Map.jpg

USER STORIES AND USER FLOWS

Mental Models and User Journey Maps helped me to detect user needs and type of actions they would take to accomplish their goals. At this point the project slowely shifted from the Empathizing phase towards Ideation. 

The user stories capture feelings, needs and expectations of potential users toward diverse features

User Stories.jpg

After getting an idea about users' action they would take and understanding better how users might feel about certain features, I started to write out task analysis and draw user flows, illustarting users' journey and expectations while engaging with features, visiting pages and taking actions to accomplish their goals

User Flow.jpg

SITEMAP

Reviewing my personas and user journeys and having certain features in mind, I started to think about the structure of the app. 

I had a rough idea of keeping the structure simple with co-existing hierarchies, since there is a great deal of overlapping information and wanted my users to have easy access from one page to the other.

Sitemap.jpg

WIREFRAMING

After that I started creating wireframes with pen and paper. 

I had a rough idea of keeping the structure simple with co-existing hierarchies, since there is a great deal of overlapping information and wanted my users to have easy access from one page to the other.

Wireframing.jpg

Like what you see?

Let's chat.

bottom of page