Sports Weather  App

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

Role

Responsible for the full Ux-Ui design
of the final product

Timeline

Beginning 2021- End 2021

Introduction

Vela-thumbnail.jpg

Create a safe environment for the people who love the sea and adventurous sports.

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.

Problem Statement

Make users confident

on their weather predictions before going out in the sea

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.

-1Splash Screen-01.jpg

Design Process

User satisfaction went through five specific design steps

In order for the problem to be solved so that our users
are able to enjoy their time while sporting, specific steps must be taken. The design process followed 5 steps from thinking to refinement. This way it could be ensured that I was on the right path.

design process_design process.jpg

Creating the Personas

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 scenarios that

I think the user needs to go through in order to feel confident when going out in the sea.

persona_persona1.jpg
persona_persona2.jpg

Working on the flows

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.

flows_flows-15.jpg
flows_flows-14.jpg

User Research Analysis

Most of the participants were able to understand clearly how to fit each card with the category. 

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.

--17.jpg

Affinity Map

Creating an affinity map helped in visualising the users needs.

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.jpg

Wireframes

Aiming for a visual and contextual control

During the wireframes, I was guided by the research results towards a solution, where every user has the maximum, most contextual

control over the production process.

wireframes_wireframes.jpg

Visual Design Elements

Creating an affinity map helped in visualising

the users needs.

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.

icons_icons.jpg

Prototype and Implementation

After multiple iteration cycles, feedback sessions and – design – discussion, the visual design of the tool has been approved.

I transformed the visual design into a detailed prototype, with Figma.

screens-05.jpg
screens-04.jpg
screens-06.jpg
screens-07.jpg