Vela
“The best weather app for those who are into various water sports. A high-quality weather app that gives users specific information that is able to keep them safe while out on the water.”
Role
UX Researcher
Team
Solo
UI Designer
Tools
Figma
Lucid
UsabilityHub
20 Weeks
Team
Problems
Existing weather apps are not great for water enthusiasts.
Some apps do not offer complex weather systems that have the ability to track daily.
Users cannot find an easy way to comprehend said app.
Users are not currently in the habit of checking said weather app daily.
Challenge
Water Enthusiasts need a way to check weather daily because they can’t depend on the local news's incorrect statistics. We know this true as the local news only gives out the bare minimum weather states and Vela can give Water Enthusiasts a high-end weather statistics app.
With this information in hand, next I had to take into account who my competitors are and see what they offer that other weather apps do not.
Competitive Analysis
Predict Wind
Predict Wind is a top player in weather forecasting for marine safety, with a focus on Surfing & Sailing. They use social media and Google ads for marketing and appear on sailing blogs. They offer detailed wind maps and user-friendly tools, with room for growth in subscriptions and trip planning. Challenges include a complex tutorial and limited access without a subscription. To excel, they target boat lovers, aiming to enhance user experience with tutorial tweaks and website upgrades.
Overview
Windy
Overview
Windy.App offers personalized weather insights for different sports, but lacks a strong marketing strategy compared to competitors like PredictWind. They rely on social media only, missing out on Google ads and blogs. To boost visibility, they could use sponsored ads on platforms like Instagram to reach a younger audience, especially paragliders. The app is user-friendly and versatile for multiple sports, but faces issues like a dull homepage and expensive subscriptions. They have opportunities to provide customizable weather data, cheaper subscriptions, an interactive map, and daily forecasts. Windy.App aims to be an interactive app for various outdoor activities, catering to weather needs for all sports enthusiasts.
Now that I see what the threats and weaknesses are between the two competitors, I need to create some personas that tie well towards Vela.
User Personas
Cody
Age: 40
Education: Fine Arts Degree
Occupation: Graphic Design
Confidently go out on the water knowing I’ll will be safe from any storms.
Goals
Frustrations
I am tired of a weather app that constantly gives me inaccurate weather patterns.
Accurate weather statistics
Information on a single page
Ability to see a 10 Day forecast
Needs
“If it gets me out of the office or house, then you can find me out on the water having a good time.”
Bio
Will
Age: 26
Education: Business Degree
Occupation: Saleman
Like to go out and have a good time with friends on the water without having to worry about checking the weather app every hour or so.
Goals
Frustrations
Constantly worried or annoyed that I am not using the best weather app for boating.
Accurate wave statistics
Clean layout
Statistics are easy to understand
Needs
“I am known as the novice of the local boating community as I’ve recently just bought a boat last year.”
Bio
Gathering this information is valuable as it can help me understand how the user may feel when using the app.
User Journey Map
Cody
Age: 40
Education: Fine Arts Degree
Occupation: Graphic Design
Scenario: Being an avid kayaker, Cody needs to find an app that can give him accurate weather statistic before his three-day trip on the Chattahoochee River. He doesn’t want an unknow storm to ruin his trip, so he uses our app for statistics.
Task
Thoughts
Feelings
Opportunities
Task
Thoughts
Feelings
Opportunities
Open App
Sign In Sing Up
”I must find a local weather pattern in here”
Thinking
• Multiple Sign In options
Create a Profile
Create a personal account
“I hope I can get what I want out of this
Thinking
• Multiple Sign In options
Main Menu
Select Your Area
“I need to see what my area looks like”
Stressed
• Overlook the Weather Patterns
• See different options
Notifications
Sign Up for email & phone notifications
“Having this will clear my anxiousness rapidly”
Anxious
• Overlook the Weather Patterns
• See different options
Weather Patterns
Choose a Weather Forecast
“This is make or break here as I hope I am good for the weekend”
Tame
• Locate the Wind, Rainfall, and Temperature Areas
Scenario: As a novice boater, Will wants to see how strong the wind is and the level of algae before he goes out to on the water with some friends. With this app he will be able to get notifications on how the weather will look in the future.
Forecast
Select Wind & Algae section
“This section is a god send as I can see everything”
Amused
• Locate the Wind, Rainfall, and Temperature Areas
After seeing how the scenarios played out and seeing how the user has some frustrations in areas, I need to think of ways to have the user get to a certain page in a smooth fashion.
Customize
Add or Remove Weather Patterns from Main Menu
”I’m glad I found an app that gives me the ability to choose my weather patterns”
Happy
• Select any type of pattern
• A mass variety of options
Feedback
Tell us how we did
“This app is wonderful as it has given me what I wanted!!”
Joyful
• Select any type of pattern
• A mass variety of options
Will
Age: 26
Education: Business Degree
Occupation: Saleman
Task Flow
Cody
Age: 40
Education: Fine Arts Degree
Occupation: Graphic Design
Statement
“As a kayaker, I would like to be able to see what the wind directions are, so that I can tell if I will be struggling against or be going with the wind.”
Open app
Create Account
Login
Select Location
Select Wind Menu
Task Flow
Will
Age: 26
Education: Business Degree
Occupation: Saleman
“As an avid boater, I would like to receive notifications so that I can get constant readings on how the weather will play out on said day or the following days.”
Statement
Open app
Create Account
Login
Select Profile
Select Settings
Select Notifications
Turn On Notifications
Task Flow
Now that I have created a flow for the user and how they would go throw the app to get to a certain section of the app, I now have the ability to create a larger sitemap of the entire app.
Sitemap
First Sitemap
Card Sorting
Results
This was interesting research. Personally, I thought many people were going to choose the same cards and place them as I would have liked. Instead, it was completely different with certain participant’s where some chose the right ones to put in the categories, some completely missed the mark that I would have liked them to choose, and some thought some cards would be better in a completely different format. I truly enjoyed using the digital card sorting as I was able to send it out to each participant virtually with and it took them less than 15 minutes to complete.
Insight
New Sitemap
As the roadmap has been created, I must now create some ideas on the app will look like from the onboarding process to the homepage of the app.
Wire Frames
Wireframes are crucial part to this process and gave me the ability to go create the first version of how the app will look via mobile.
Mid-Fidelty Prototypes
With the first iteration of how the app will look via mobile, it starts to gain traction on the overall look of the app and how it should flow page after page. But before I could that, I need to do more user testing and see how what could be improved.
“I enjoyed the feel of the app as it reminded me about the Apple Weather App.”
“The overall color is not amusing. It feels bland.”
User Testing
Observations
“I just don’t feel comfortable giving out certain information.”
“It really is frustrating when I have to go through so many pages just to find information.”
Number of Participants
5 people from various occupations
Users are from different locations
Users had between low to high knowledge in water sports
Errors
“For some reason the next button was not working properly.”
“The icons were to small to click on.”
Negative Quotes
“I don’t even know who this app is for and would not recommend”
“I just don’t like how I have to go from one page to another page just to find information”
“Way too many pages to access certain information and was just confusing.”
“The color wording would get lost in the background.”
“The coloring is very tacky and needs to be changed as soon as possible”
“The section for abbreviation makes no sense. What is it for? Who is it for?”
What I Would Like to Learn
Understand how long it takes for the users to pass the onboarding section
See what sections need to excluded
Find better ways to make the flow thru the app smooth
Positive Quotes
“I truly enjoy the overall feel of the app as it feels comfortable.”
“Even with the multiple pages, it still has a great grasp on what a weather app is.”
The information gained from this user testing is helpful in many ways as it tells me on the true faults of the overall app, what pages need to be taken away, how to compress information into one page without it being cluttered, and understand how the layout should be played out.
“The images on the tab are nice touch and bring a real sense of space.”
“Even with some of the negative comments, I enjoy the look that it is heading towards.”
Goals
See how users felt about the current state of the app
Have a better understanding of where the app stands
See where there are major faults in the app
A/B Preference Testing
See which screens are more appealing to the participant’s
Gain a better understanding on our to improve the app
See what type of new ideas I can gather from what participants mention after the questionnaire
Goals
Screens Tested
Test 1
Option 1
Option 2
Test 2
Option 1
Option 2
Finding Points
Test 1
80% of the participant’s enjoyed Option 2.
They mentioned the neutral tone was much calmer on the eyes.
Had better contrast than Option 1.
Option 2 had a much cleaner look than Option 1.
Test 2
70% of the participant’s enjoyed Option 1.
They mentioned they enjoyed the blue tones more than the neutral tone.
Blue tone makes the objects pop more.
They mentioned the blue tone connected with weather.
Data points were easier to read.
Blue tone makes the page easier to read.
I must say this section was the most interesting to me in the whole process because of the results that were gathered. Learning on how the layout should look, what color the background is, and where to place specific information helps me understand how to evolve the app.
High-Fidelity Prototypes
Style Guide
Icons
Text
UI
Images
If you would like to view more of the style guide, please click the link below.
Recommendations for Future Design Efforts
-
![]()
“I found the logo was a bit to hard to read with the current background.”
Eve
-
![]()
“Change the tab name from Username to Email as it is know most people remember their email.”
Eve
-
![]()
“Consider adding a confirmation portion under the password section. That way users can identify if they put the correct password in.”
Nina
-
![]()
“During the onboarding portion, input a Skip button on the top right-hand corner, so users have the option to skip the process.”
Joanna
-
![]()
"The main temperature on the home page seems a bit large and feels like it is over taking the home page more than it should."
Eve
-
![]()
"Do some research on how to activate a scroll down option for the homepage instead of using a button, it will seem lazy to users."
Nina
-
![]()
"For the Main Menu, consider placing an overlay of some sort to the rest of the page so users can concentrate on the menu options."
Joanna
-
![]()
"The search section has the right idea, but i would have liked to see an interactive map instead of just words in a drop down."
Nina
-
![]()
"I must be honest, I do not understand the reasoning behind the Instrument Page as it feels like it plays no part in this app."
Joanna
