VELA

Check forecast and surf reports of your favorite spots.

Objective

We offer intuitive wind, wave, and weather reports for surfers and water sports enthusiasts. Our product provides accurate information in a user-friendly format, including comprehensive forecasts, statistics, and up-to-date data such as wind direction, wave height, and temperature. Our priority is to help our users to make informed decisions and stay safe on the water, providing all-inclusive and straightforward reports and forecasts.

CONTEXT

As part of my Immersive UX Design course with CareerFoundry, I completed a comprehensive app-building project. The project followed the design thinking process, which included research, competitive analysis, user persona development, usability testing, and best practices in UX design. The primary objective of this course demo project was to demonstrate the entire UX design process from start to finish in a real-life context. Through this project, I gained valuable experience in the UX design process and was able to apply the skills I learned to create a functional and user-friendly app.

PROBLEM STATEMENT

Our app provides a convenient solution for water sport enthusiasts to access weather reports and forecasts for any specific location, including wind, waves, tides, and other crucial data. With this information readily available, users can avoid dangerous or stressful situations and adequately prepare for activities such as surfing or navigating. We aim to see high usage rates of our app among water sport lovers, indicating that it’s a helpful tool for them to check weather conditions before heading out into the water.

MY ROLE

UX Design, UI Design, User Research

DESIGN THINKING

EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TEST
ITERATE
Conclusion

EMPATHIZE_01

Competitive Analysis

To gain insight into the competitive landscape, I analyzed two of the top surf forecast apps available. I discovered that both offered a wealth of information for surfers to review, but there was a risk of information overload. This could be daunting, particularly for those new to the sport.

Next is one of the analysis made as an example:

Magicseaweed’s mobile app and responsive web service offers surfers a comprehensive long-range surf forecast covering thousands of spots worldwide. The app provides a range of data, including surf height, swell height, period and direction, wind speed and direction, and air and water temperatures. This extensive forecast empowers surfers to make informed decisions, plan ahead, and stay safe while catching the waves.

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 conducting competitor research, we also conducted user surveys and interviews to better understand our potential users and validate our initial problem statement. These efforts provided valuable insights into the needs and preferences of our target audience, helping us refine our service and ensure it meets their expectations. By taking a user-centered approach, we aim to provide a solution that truly addresses the challenges our users face and exceeds their expectations.

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.

DEFINE_02

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.

USER PERSONA

After gathering all the necessary information from our user research, I created Proto Personas to highlight our users’ goals and behaviors. These personas serve as a valuable tool to better understand our target audience and their needs. By visualizing the user’s journey and identifying pain points, we can tailor our service to provide a seamless experience that meets their expectations. The Proto Personas help us stay user-centered and keep our users’ needs at the forefront of our service.

JOURNEY MAP

Developing a user journey map was a crucial step in creating a user-centered design. By mapping out the user’s experience and emotions throughout their interaction with the product, we were able to identify pain points and opportunities for improvement. This process provided a comprehensive view of the user’s journey, allowing us to optimize each touchpoint and create a seamless and positive user experience. Ultimately, a well-crafted user journey map helps ensure that the design meets the user’s needs and expectations, leading to increased satisfaction and loyalty.

IDEATE_03

User Flow

After creating Personas and providing scenarios, I began putting together user flows for each scenario and structuring the Information Architecture for my app. This approach allowed me to design a seamless user experience that meets the needs and preferences of my target audience, making it easier for users to navigate and achieve their goals. By taking a user-centered approach to app design, I aim to create a product that delivers real value to users and encourages long-term engagement.

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

Following the identification of potential solutions for target user tasks, I began the planning phase. Initially, I focused on the information architecture of the application and developed a site map. To validate my initial decisions around how to group and label information within the application, I conducted an open card sort. Through this process, participants provided valuable feedback that helped refine the application’s information architecture, enhancing its overall usability and user experience.

PROTOTYPE_04

Wireframe

LOW FIDELITY WIREFRAMES

At Vela, our primary focus is simplicity and ease of use. To achieve this, we kept the number of screens to a minimum, focusing only on the core features that matter most to our users. I began the design process with pen and paper wireframes, creating multiple versions of each screen to ensure that I found the perfect combination of features and elements that would be intuitive and fulfill our users’ needs. By streamlining the user interface and making it easy to use, we aim to enhance the user experience and provide a seamless platform that users can trust and rely on.

MID FIDELITY WIREFRAMES

For the mid-fidelity stage, I based my design on a hand-drawn wireframe. Despite its simplicity, users can get a sense of the app’s appearance and key features through a few screens created in Figma. During this phase, I paid close attention to how users interact with each function and focused on optimizing the overall flow while considering multiple paths a user might take while completing a task. By taking a user-centric approach, I aim to create a design that is both intuitive and engaging for my target audience.

TEST_05

Usability Test

I conducted usability testing with real users to collect feedback and first impressions of my prototype. Overall, the participants were satisfied with the main ideas of the app, with more positive comments than negative. However, I carefully evaluated the negative feedback for areas of improvement in the final product. This testing provided valuable insights, allowing me to refine and enhance the user experience and ensure the final product meets the needs and preferences of my target audience.

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.

ITERATE_06

Refine Design

Once all the data collected during the Usability test stage was analyzed, I focused on addressing the moderate and high priority usability issues before refining the design further in preparation for hand-off. To gather feedback, I developed a high-fidelity prototype and submitted it to my UX/UI network. This led to additional iterations, and important revisions were made to improve accessibility, particularly by enhancing the app’s text legibility and readability. Additionally, I ensured consistency in the use of placeholder text throughout the design. By prioritizing these improvements, I aimed to create a user-friendly and accessible design that meets the needs of my target audience.

Design Language System

COLOR PALETTE
MAIN COLOR
SECONDARY COLOURS
GRADIENT COLOURS
UI ELEMENTS
BUTTONS
ICONOGRAPHY
SLIDER
SEARCHFIELD
NAVIGATION MENU
TEXT STYLE

Feel free to interact with the prototype

 

CONCLUSION_07

Next Steps

In this project, I focused on creating an app that provides accurate and comprehensive weather forecasts for water sport aficionados, especially surfers. However, the next logical step would be to further improve the app by gathering feedback from our target users and incorporating their needs and preferences into our design. This includes conducting proper user research and usability tests specifically targeted at surfers and other water sports enthusiasts, to ensure that our app provides the features and functionalities that meet their expectations. By taking a user-centered approach, we can continue to enhance our app and provide the best possible experience for our users.

Final Thoughts

VELA was my first major UX design challenge, taking over four months to complete and encompassing the full design process – from ideation to realization. Throughout the process, I gained valuable insights into user-centered design methodologies and used major industry-recognized tools, thanks to my CareerFoundry course. Putting everything I learned into practice, I aimed to create an app that delivers accurate and intuitive weather reports for water sports enthusiasts, with a particular focus on surfers. By prioritizing the user’s needs and preferences, I aim to create a user-friendly and effective solution that meets their expectations.

Copyright @ Patricio Toro Salinas 2023. All Rights Reserved
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
Save
We use cookies to enhance your experience while using our website. To learn more about the cookies we use and the data we collect, please check our Privacy Settings.
I Accept