Objective

Provide intuitively designed and easy to understand wind, wave, and weather reports, forecasts and statistics for surfers and any other water sport aficionado.


Context

This project was part of my Immersive UX Design course with CareerFoundry, for this project, we went trough all the steps of the design thinking process in order to finalize with an app-building project. Research, Competitive analysis, User persona, Usability test and best practices in UX design. The goal of this course demo project was to illustrate the UX design process from start to finish within the context of a real life situation.

Problem Statement

Our User need a way to quickly check and easily understand wind, waves, tides, weather reports and forecasts on any specific location. It can help them to avoid dangerous or stressful situations and be prepare for activities like surf, navigate or any water sport related.

We will know this to be true when we see how many water sport lovers are using our app to check weather conditions before they go to the water.


My Role

UX Design, UI Design, User Research

Competitive Analysis

To get a better understanding of the competitor landscape, I conducted analyses on two of the most popular surf forecast apps on the market, and found that while both provided a wealth of information for surfers to read through, there was some information overload. This could prove overwhelming for some users, especially those new to the sport.

Next is one of the analysis made as an example:

The Magicseaweed mobile app and responsive web, provides long range surf forecasts for thousands of spots around the globe. The forecast includes; surf height; swell height, period and direction; wind speed and direction; and air and water temperatures.

Strengths
  • Strong community build.

  • Complete information

  • Real time update

Weaknesses
  • The reviews for their app in google play are not as good as the IOS version. This could mean the app has not been optimized for Android.

  • There is no overview or tutorial that teach you how to read the charts, therefore if you have no experience or you are new in this world is almost impossible to understand.

Opportunities
  • Leaders in innovation, they have a strong community on their backs and a strong support to lead and generated new ideas and trends in the way information is display or generated, create a path for the other apps that follows.

Threats
  • Being the oldest or first, not necessarily is and advantage, specially if you are not going according to the new technology like mobile or other device. Therefore missing the new trend technology can make them “sink”.

USER RESEARCH

In addition to the competitor research, user survey and interview were carried out to get a better understanding of our potential users and to validate our initial problem statement.

Research Goals
  • To better understand users’ attitudes, motivations, and behaviors around surf.

  • Collecting data on the context in which users would use or if they are using a forecast weather app for surfing.

  • Documenting user pain points with existing or similar apps on the market.

  • To determine which task users would like to complete using a forecast weather app for surfing.

AFFINITY MAP

I created an affinity map to synthesize my research findings and help identify insights

motivation / emotion
  •  Enjoy the sea and the adrenaline of surfing.
  • The sun is not a factor to have a good wave.
  • Enjoys watching the live cams
  • Practicing and improving to become better.
  • All participants value accuracy in a weather app
  • under good weathers conditions they got the best
    experience doing this activity.
HABITS
  • Practice this activity at least once a week, if the
    conditions allows them.
  • Participants vary in skill level, from beginner to
    expert and also in time their practicing this sport.
  • All of them have in common the activity of
    checking weather conditions before each trip.
  • Currently use of different apps to get the best
    information regarding forecast weathers reports.
DESIRE
  • Basic data displayed in a simple way for weather, wind, waves, tide, swell.
  • Interactive Maps, showing current location of the
    user and weather and beaches of the zone.
  • Most participants believe that having some sort of
    method for learning data, how to read the charts
    and forecast would be useful.
  • Have a customized alert to indicate to the
    potential user if conditions are good to practice
    their activity.
OBSTACLE
  • Applications with limited features are always
    annoying.
  • Lack of updating and accuracy of forecast reports.
  • Learning to read the weather reports was a real
    headache.
  • Beaches with too many people can be problematic
    sometimes.
  • Not having enough information if you are traveling
    or in a new place.

Problem Statements

Our User need a way to quickly check and easily understand wind, waves, tides, weather reports and forecasts on any specific location. It can help them to avoid dangerous or stressful situations and be prepare for activities like surf, navigate or any water sport related.
We will know this to be true when we see how many water sport lovers are using our app to check weather conditions before they go to the water.

List of Possible problems
  • Reading and trying to understand weather conditions can be complex and confusing if you don’t have a minimum of knowledge on the subject.

  • Not everyone lives near the ocean, so they need to plan their trips to avoid bad weather and enjoy the day without stress.

  • Weather and swells can change from one moment to the next, so getting real time information is important.

Description of Potential solutions
  • An app or responsive Web which provide beautifully displayed and easy to understand wind, tides and weather reports, forecast and statistics for sailors, surfers.

  • Will features real-time animated maps with wind and wave information, as well as tide data.

  • The ability to connect to live reports from local observers, and live beach cams, can be and interesting feature to investigate.

Problem Statements

With all collected information from user research, I created a Proto Personas. This Personas will highlight users’ goals and behaviours.


Problem Statements

After created a User Persona, the next steps was to mapped my target users’ common emotions after completing a tasks, Thought this process I had a better understanding about emotions such as frustration could lead to decreased trust in the product or abandonment of a task altogether.

USER FLOW

By creating a Personas and providing scenarios, I could then start putting together a user flow for each scenario and start to structure the Information Architecture for my app.

User Persona, ETHAN
Objective

After a stressful shooting session, Ethan would like to relax and go for a casual surf session, he doesn’t have to much time to do a detailed planning and he would like to have an idea of how the conditions are.

Task Nº1
  • Launch App <<< Entry point

  • Splash Screen

  • New User/Existing user

  • Log In

  • Home Page Map

  • Location detail View

  • Weather Info Screen <<< Success Criteria

User Persona, Emiliano
Objective

Emiliano wants to read Information, reviews and comments about different surf spots near by his area where he’s never been with the goal of checking if it fits his skill level and to get tips from other surfers.

Task Nº2
  • Launch App <<< Entry point

  • Splash Screen

  • New User/Existing user

  • Create Account (if is a new user)

  • Create Profile (if is a new user)

  • Home Page Map

  • Discover

  • Search location

  • Read reviews

  • Save location in Favorite <<< Success Criteria


SITE MAP

After identifying potential solutions for target user tasks, it was time to plan. I started by focusing on the information architecture of the application and created a site map. To test my initial decisions around how to group and name information within the application, I completed an open card sort in which participants provided valuable feedback.

WIREFRAME

Low Fidelity Wireframes

Since simplicity and ease of use are one of the biggest aims of Vela, the number of screens were kept to a minimum and I wanted to focus on highlighting the core features. I started with pen and paper wireframes, and created multiple versions of each screen until I found a combination of features and elements that I thought matched the users needs and that would be as intuitive as much as possible.


Mid Fidelity Wireframes

The mid-fidelity was base on the hand draw wireframe. Nevertheless the user can get a feeling of how the app will look like and the main features, through a few screen created in Figma.

During this phase I focused on how my user would interact with each function and focused on the overall flow and multiple paths my user might take while completing a task.

USABILITY TEST

I tested my prototype with real users. The aim of this testing was to collect feedback and first impressions from users. Usability testing provided me with useful information.

in general all the participants were satisfied in general with the main ideas of the app. Overall there was more positive comments than negatives, nevertheless those negative point were reevaluate in terms of improvement for the final product.

Conclusion

This phase was the game changer – by conducting usability tests, I was able to refine what users were finding useful, and completely change up what they didn’t react well to.

The users were asked complete a few scenario-based tasks that would test the main features of the app, and were asked how they felt about the app in general. The results of the usability tests were recorded and analyzed using a rainbow spreadsheet system and generating an affinity map.

REFINE DESIGN

Once all the data, collected during the Usability test stage, was analyze. I addressed moderate and high priority usability issues, I refined the design further in preparation for hand-off.

A high-fidelity prototype was developed and submitted into my UX/UI network for feedback, which led to further iterations. Important revisions were made to improve accessibility specially by increasing the app’s text legibility/readability, and consistently applying placeholder text throughout the design.



DESIGN LANGUAGE SYSTEM

COLOR PALLETE
UI ELEMENTS
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google