Diving into weather apps and their
multiple layers of complexity.

Diving into weather apps and their multiple layers of complexity.

Project Overview

Project Overview

What's the problem?


Weather apps often provide abundant information but fail to

deliver the specific details that water sports enthusiasts—such

as surfers, kitesurfers or windsurfers —need in various contexts.


How did we solve it?


We developed a weather app that allows users to filter

forecast data based on their interests, enabling them to quickly select and compare the specific information they need at any given time.

What's the problem?


Weather apps often provide abundant information but fail to

deliver the specific details that water sports enthusiasts—such

as surfers, kitesurfers or windsurfers —need in various contexts.


How did we solve it?


We developed a weather app that allows users to filter

forecast data based on their interests, enabling them to quickly select and compare the specific information they need at any given time.

My Role:


As a UX/UI Designer I planned and conducted user interviews and usability testing and designed the final mobile protoype.

Deliverables:


High-fidelity mobile and web mockups Figma File

High-fidelity mobile and web mockups Figma File

High-fidelity mobile and web mockups Figma File

The Team:


I have worked with 2 stakeholders and 1 developer

Timeline:


6 months (year 2024)

What's the problem?


Weather apps often provide abundant information but fail to

deliver the specific details that water sports enthusiasts—such

as surfers, kitesurfers or windsurfers —need in various contexts.


How did we solve it?


We developed a weather app that allows users to filter

forecast data based on their interests, enabling them to quickly select and compare the specific information they need at any given time.

How it started

The main research goal was to understand better our user’s motivations, beliefs, desires, and expectations surrounding the use of weather apps. We also aimed to understand the minimal amount of information users needed to make weather-based decisions, so we created a 5Ws framework to gather all the information we had in a clear and concise manner.

download iconView Full Size Image

1-on-1 User Interviews and Surveys

We began conducting user interviews on Zoom to understand user’s learning experience with weather apps. We also wanted to know about their goals and frustrations with weather platforms. After the first round of card sorting users’ responses, we translated them into categories that outline user preferences and restrictions and this resulted in our first insights.

src
src
src
src

1-on-1 User Interviews and Surveys

We began conducting user interviews on Zoom to understand user’s learning experience with weather apps. We also wanted to know about their goals and frustrations with weather platforms. After the first round of card sorting users’ responses, we translated them into categories that outline user preferences and restrictions and this resulted in our first insights.

src
download iconView Full Size Image

1-on-1 User Interviews and Surveys

We began conducting user interviews on Zoom to understand user’s learning experience with weather apps. We also wanted to know about their goals and frustrations with weather platforms. After the first round of card sorting users’ responses, we translated them into categories that outline user preferences and restrictions and this resulted in our first insights.

Competitor Analysis

We analyzed both weather and fitness apps to gain insights into their content presentation methods. Specifically, we examined examples of progressive disclosure in Weather Apps taking inspiration from the thumb-accessibility of “Windfinder” for instance. We also took inspiration from the “AllTrails” app, which enables users to create lists with their saved locations. Lastly, we looked at how apps like "Met Office" use color to provide more information on the map layers.

Analyzing Weather and Fitness Applications

Windfinder's Map Page

Progressive Disclosure

Progressive Disclosure

Progressive Disclosure

Saved Items

Saved Items

Saved Items

Map Layers' Legend

Takeaways to Competitor Analysis

1

Generic vs specific

Some Weather apps target
users worldwide, others specific
countries. Some are targeted to
1 water sport, others too all.

Some Weather apps target
users worldwide, others specific countries. Some are targeted to 1 water sport, others too all.

2

Complex Jargon

Weather-related jargon can

be confusing for users who

are not familiar with

meteorological terms.

3

Information Overload

Many weather apps have
legibility issues due to presenting
too much info without

considering the user’s context.

Many weather apps have
legibility issues due to presenting too much info without considering the user’s context.

Usability Testing our First Mid-fi Iteration

We conducted 6 usability tests with users of different ages, from different parts of the world to understand how they look for a specific location, the key information they need to make decisions based on the weather, and the ease of use of the map layers.

First Iteration Results

First Iteration Results

Usability Testing our First Mid-fi Iteration

We conducted 6 usability tests with users of different ages, from different parts of the world to understand how they look for a specific location, the key information they need to make decisions based on the weather, and the ease of use of the map layers.

First Iteration Results

Usability Testing our First Mid-fi Iteration

We conducted 6 usability tests with users of different ages, from different parts of the world to understand how they look for a specific location, the key information they need to make decisions based on the weather, and the ease of use of the map layers.

Ideating the "Maps Page"

Sketch

Ideation 1

Ideation 1

Ideation 1

Iteration 1

Iteration 2

  1. We designed the initial screen to display a default map view. When users entered a location in the search bar,
    it appears as the 'Default Location Name'.

  2. To avoid information overload, we added a navigation bar for separate access to settings and other features.

  3. Testing showed that 4 out of 6 users panned the map instead of using the search bar, so we separated the 'Search' feature to test how dependent users are from this feature. We also replaced the cloud icon with a map layers icon for more intuitiveness.

Ideating the "Search Page"

Sketch

Iteration 1

Iteration 2

  1. In the first sketches the search bar was part of the map and when the user searched for a location it would appear instead of the “Default Location” description.

  2. In the second wireframes session, the user is able to see his "Home Spot" locations and "Saved" locations.

  3. Testing showed that 4 out of 6 users panned the map instead of using the search bar, so we separated the 'Search' feature to test how dependent users are from this feature. We also replaced the cloud icon with a map layers icon for more intuitiveness.

Final Product

Next Steps and Reflections

  1. Gain a deeper understanding of how people who engage in water sports use weather apps in offline or less-than-ideal conditions.

  2. Understand what weather parameters are important to users when making weather-based decisions.

  3. Perform a second round of usability tests to understand users' preference around looking for a location.

  4. Test a feature that enables users to stay safe, as indicated in the business requirements.

Next Steps and Reflections

  1. Gain a deeper understanding of how people who engage in water sports use weather apps in offline or less-than-ideal conditions.

  2. Understand what weather parameters are important to users when making weather-based decisions.

  3. Perform a second round of usability tests to understand users' preference around looking for a location.

  4. Test a feature that enables users to stay safe, as indicated in the business requirements.

Back to top

Back to top

Next

Next

Create a free website with Framer, the website builder loved by startups, designers and agencies.