UI/UX for Weather App

“Keep things simple"
— Clarence Leonard “Kelly” Johnson,

Problem Statement

Our users need a way to be able to easily read and understand the data given in the program because this will allow to them to be  able to be confident and predict the weather during the time they would like to participate in water sports. ​


We will know this to be true when we see that users are able to use the information given in the app to help them decide on if there is or is not good enough weather to do their water activity.

vela logo

The Vela App

Being a sea sports lover myself,II was assigned with the challengeto create a weather app for watersport lovers (surfers, windsurfer etc)


The goal was to create a system that will leave the user with the feeling of safety for going out on the water.


Vela is a “plug and play” wind, wave, and weather report application for many different water sport lovers.


User Personas

After going over the business required documents and understanding what features are necessary in order to design the app, I had to create user stories. For this reason Yannis and Dionisis were created as examples of users that would benefit from Vela and different features that they would be interested in using before they go out in the sea for their activity.

user profile.png

User Flows

Base on the user personas, I had to create a scenario for these personas of how to achieve a goal while using the app. I created 3 scenarios that I think the user needs to go through in order to feel confident when going out in the sea.


User Research Analysis


During my research, I looked for common trends were communication, planning, charts, certain features, and a notification idea. The people I interviewed seemed to think that a community feature could make the use of the app more fun. Planning around the conditions is also vital to know when it is safe to go out while feeling confident in what to expect for the day. This is why having certain features are important, including easy to read charts, and an ideal condition notification feature.  I also conducted a closed card sorting based on the results, I was able to get some accurate data.

Most of the participants were able to understand clearly how to fit each card with the category. Based on the data most of the participants categorised the graphs in the forecast section. Also almost all of them have categorised the same cards in the account category. After this i also added a chat and message feature as all of them, seems they would like to have”social media” section.


Usability Test Results

I conducted five usability tests using as tester from people of my personal network. Half were conducted remotely and the other half were conducted in person. I conducted the interviews via google hangouts and presented my prototype through Figma. The users where presented with the mobile version of the design. All participants had to complete

the same tasks this will provide consistency throughout my testing.

affinity map-01.png

For a bigger prototype view click here