Vela App

UX Case Study – weather app for sailors

Vela is a conceptual weather app designed specifically for beginner sailors, helping them navigate safely with easy-to-understand forecasts and educational features.

My Role

Solo student project for UX CareerFoundry bootcamp

Tools

Figma, Google forms, Optimal Sort, Adobe Photoshop

Several mobile phone screens displaying weather forecast, sailing app, location search, and login pages for a travel or weather application.

Duration

Jun 2022 - Jun 2023

Six circles with gradient shades from light to dark blue, connected by arrows pointing to the right.

The Process

Empathize

Problem Statement

Sailing beginners need a way to easily and intuitively take in the information about the weather according to their sailing preferences because they want to safely and successfully complete their journey. They also need to easily find information on the main sailing topics to keep up with their studies.

We will know this to be true when we see an increase in the number of users in our app.

Competitive Analysis

Two competitors were analysed, Windy.app and Windfinder. SWOT profiles were made of the two apps.

Windy.app

Strengths

has consolidated in the market as a competitive app
has a clean and modern design style
has received an award from a recognized institution as the best-specialized weather app in its category

Weaknesses

requires payment from users to access all the tools
not so friendly for users who are not so used to the meteorological vocabulary. It does not offer so many types of personification.

Opportunities

create a version of the app for people who are just starting to learn about water activities
find other forms of revenue to unlock as many free tools in the app as possible

Threats

Many users might prefer apps in which no payment is required.

Smartphone displaying a weather and tide app with the location set to Islamorada, Florida, showing tide charts, weather forecast, and moon phase for February 7, with tide levels and forecast details.

Windfinder

Strengths

has consolidated its space in the market
offers many of its tools for free on both the mobile and desktop platform

Weaknesses

requires payment for some of their tools in the app
presents some design problems in their interface

Opportunities

UX Design could be improved
price for the monthly or yearly contribution is not available unless the user goes through with the 7 days trial

Threats

Many users might prefer apps in which no payment is required and which present a better UX Design.

Weather forecast appears on a smartphone screen showing hourly data for Friday, Nov 27. The forecast includes wind speed, temperature, atmospheric pressure, and cloud cover predictions from midnight to 9 PM. Temperatures range from 7°C to 13°C, with varying wind speeds and cloud cover.

User Interviews | Guerrilla Interviews

Interview details

5 Participants
from 2 countries
from 23 to 57 years old
all had similar levels of sailing knowledge

Insights

participants didn’t use the map section of the app, they would prefer to see the forecast on the report tables.
many find it difficult to remember what everything means, there are many new terms
many find their current app too clustered with information
they feel often stressed when using their current apps, either because of sailing or because of their app

Collection of colorful notes with various comments about app usage and frustration, including statements about map difficulty, too much information, and personal preferences.

Affinity Mapping | Negative Feelings

The project was originally targeting experienced sailors. However, after the first round of User Interviews, many participants showed to be very satisfied with their current weather forecast apps. The insights from the interviews demonstrated that there were only small improvements that could be made to the already existent apps. Therefore, the target of the project was changed to sailing beginners. A second round of interviews, this time Guerrilla interviews, took place in sailing clubs along the body of water called Alster, in Hamburg, Germany. There, I found many people who were learning how to sail, they were each asked 15 questions.

First Challenge

“I'm pretty happy with my current app […] I wouldn't want to change it.”

- Sebastian, experienced sailor from the 1º round of interviews

Define

Personas

Personas were based on all the information that was gathered so far in the project, they were created to represent our potential users and to drive our efforts to better understand our users’ needs.

User Journeys

User Journeys are relevant to understand and analyse the scenario that the personas are in while they complete certain actions. Based in all the information gathered so far, it was then presumed how they could be feeling and thinking.

A detailed instructional chart comparing three phases of sailing learning: remembering basic information, getting ready for sailing, and reading wind forecast, with tasks, thoughts, emotions, and opportunities outlined for each phase. The chart includes example tasks, thoughts, and emotional states, and offers opportunities for further learning.

A detailed infographic discussing vacation planning for a person named Sandra, including her age, profession, location, and steps for choosing a destination, preparing for sailing, and planning a safe trip, with considerations of weather, emotional responses, and information resources.

User Flow & Task Analysis

In this part, we start to see how the personas would be interacting with Vela based on the Tasks that they would like to complete.

Flowchart for deciding travel destination based on weather and reports, with sections for existing and new users, showing steps like login, opening home screen, searching, selecting results, and accessing weather reports.

Insights

revising my interview notes and audio recordings was essential to create more realistic Personas and User Journeys
it is challenging to imagine how the personas could be feeling at every step of their task

Ideate

Sitemap

That is when the Vela app starts to take shape! Through Card Sorting and the Similarity Matrix, we could determine what would be the most intuitive way of grouping the sections of Vela to then develop the Sitemap.

A colorful word cloud with a flowchart-like structure, featuring various terms related to weather, wind, waves, algae, locations, and user settings, connected in a hierarchical layout.

Flowchart diagram illustrating website navigation structure with categories: Home, My Account, Map, Discover Locations, and Learn Topics. Subcategories include Help & Contact, Units Preferences, Account Settings, Search Locations, Favourite Locations, Location info and basic reports, and various report details.

Second Challenge

The dislike of the interview participants towards the map section of their applications was at first interpreted as if they just preferred the other functions of the app. Therefore, at this stage in the project, the other sections of the app were in focus and the map section had been discarded. However, to be sure of the intent of the participants, a survey was done and from this survey, 2 participants were further interviewed about their preferences for their apps. Below you’ll find the results of this research and some insights.

“I never use the map here (app), it’s so confusing…”

- Michael, sailing beginner from the Guerrilla Interviews

Pie chart showing responses to the question about using maps in weather apps for sailing, with three segments labeled Yes, No, and The app does not provide a map.

A bar chart showing responses to the most important weather reports and forecasts, including air temperature, water temperature, precipitation, clouds, humidity, wind speed, direction, gusts, wave size, period, and algae amount, with the number of responses for each category.

Insights

2 of the 3 Survey participants that answer no to using the weather map were interviewed. The main goal of the interview was to better understand the reason why they did not use the map.

the colors and amount of information on the map have a big impact on how the users react to this feature.
they often do not know what the icons mean.
they would use the map only for a couple of reports; therefore, they do not need much information.

Prototype

Wireframing

After the Sitemap, many sketches were created, and finally, the first low-fidelity prototype was made with a pen and paper. At this point in the project, the research about the map was still in progress so the map section was not a part of the application at this point. The flow below shows the task of accessing the Location Reports through searching a location on the location page.

Sketches of a weather app with four screens showing homepage, location page, search results, and location reports, including icons, maps, weather data, and navigation elements.

Lo-fi Prototype

Screenshots of a weather app interface showing location details, weather forecast, and alerts for Hamburg, Bremen, and Malmö with temperature, wind, and weather condition icons.

Mid-fi Prototype

Test

Usability Testing

It was finally time to see how potential users would interact with Vela. Tests took place both in person and online, its results were analysed through Affinity Mapping and Rainbow Spreadsheet.

Test details

6 Participants
from 2 countries
5 online tests and 1 in-person
from 23 to 54 years old
5 participants are sailing beginners and 1 is interested in weather reports because of another hobby

Rainbow Spreadsheet

A detailed table displaying a user testing analysis, including error ratings, scores, possible solutions, and observations on user reactions and experiences.

Affinity Map

A visual chart comparing positive and negative experiences, observations, and errors with different colored post-it notes arranged in sections and categories.

Test Objectives

Determine possible points of friction on the navigation of the app
Observe and analyze how users interpret the visual cues and text in Vela
Understand how the users feel while they complete the tasks

Key Findings

participants had trouble understanding whether to find the locations on the Map or the Locations page
some were unsure about the purpose of the Topics page (Learn page)
3 of them had problems understanding the buttons/functions of the Map page
some seem confused by the Locations page and the Topics page looking so similar

Design Iterations

Many iterations were made after the Usability Testing. After that, a Preference Test was also conducted to test different versions of a solution for the same problem, there were 9 participants. Iterations were also made based on Gestalt Principles, accessibility guidelines, and on feedback received by peers from the course.

Map Page

Usability Testing participants seemed confused when using the map and its filters, they didn’t like the fact that the wind speed scale was always present and that it would disappear once the Map Filter was selected.

After many iterations, the latest version was created, which allows users to have full visibility of the map when wanted.

A diagram with overlapping speech bubbles. The bubbles contains statements about a map and a screen, including the map looking strange and the screen being incomplete, with comments on understanding map functions and the search bar, and a wish to close the small screen due to wind strength.

Quotes from Usability Tests

Screenshots of a map app displaying weather data for Hamburg. Shows different map views with filters for wind speed, wind direction, and temperature. The last two images display a map with wind speed indicated by colors and a filter menu.

Implement

Design Language System

The Design language System was then created, maintaining consistency throughout the app.

Color Palette

Buttons

UI Elements

Screenshot of a weather report panel showing wind and temperature data for Hamburg Alster on Monday, December 5th. The wind speed ranges from 7.0 to 8.0 knots and the temperature from 8°C to 10°C, with wind direction indicated by arrows. The panel also displays a map filter and date & time pickers.

Logo

Image Button

Wind info display showing size 110 by 110 and corner radius 5.

Grid

Chart with specifications: 4 center type gutters, 16 gutter measurement, 60 width, and red vertical stripes.

Typography

Table showing font styles with headers and body labels, including font size and weight, along with a large gray letter 'A' and lowercase 'a' to the right.

Final Version

The Vela App provides sailing beginners with precise weather forecast reports and allows them to study the main sailing topics. Users get notifications when the weather is adequate for sailing beginners or when it is becoming more dangerous. With the application, they can easily analyse wind maps and start their journey into the sailing world!

You can access my latest prototype here.

Screenshot of a weather and sailing app displaying a map, forecast information for Hamburg, Germany, with navigation icons at the bottom labeled Home, Loc, Learn, and Map.

Conclusion

Developing a weather forecast app was very challenging for someone who does not have contact with the hobby of sailing. Nevertheless, after much research and iteration, I believe to have created value design solutions that will provide the user with a positive experience. This project taught me to research more in-depth to understand and empathize with what the users are going through. I also learned to let go of ideas and concepts that are not leading to an effective solution and to be open to new paths that my projects may take at times. The Guerrilla Interviews and Usability Tests brought many perspectives about the user experience and it lead me to a creative process to develop Vela. I would love to continue testing the application to bring as many improvements as possible. The final result, however, allows users to not only easily access their weather information but also to study this new hobby.

Working on this project was an enriching opportunity that brought me even closer to my desire of being a UX Designer, I am truthfully thankful to my Mentor and Tutor in this project as they had helped so much every step of the way.