Vela image

OVERVIEW

I designed Vela app as a project for a UX course at CareerFoundry. Vela provides wind, wave and weather report forecasts and statistics for sailors, surfers, divers and any other water sport lovers. The aim of this app is to help water sport lovers to plan their next adventure on the sea, stay safe and enjoy what they love to do most. It provides users with easy interface and an overview of the weather forecast for upcoming days. Also it suggests some safety tips on the sea. New locations can be searched related to each water sport or based on the location. Vela also provides a chat with other water sport lovers all over the world.

MY ROLE

The entire design process including research, creating Personas, user flows, wireframes, undertaking usability testing, UI design and building of a high fidelity prototype.

TOOLS

Sketch InDesign Illustrator Photoshop
Vela location screen
Vela problem statement and solution

STEP #1: RESEARCH

Based on competitive analysis and surveys and interviews I have found what is already available on the market as well as what the users specific needs are.

Vela Chart
Vela quotes Vela search

STEP #2: FINDINGS

All the gathered information from the research was used to create a primary persona.

Vela Persona1

STEP #3: SCENARIOS AND USER FLOWS

Sem is currently in a harbour with his boat. He is about to teach new sailors how to sail. He is planning which day in the upcoming week would be best to have this lesson. This mostly depends on the conditions of the weather. It is important for the beginner sailors to have a calm weather.

Vela User Flow
Vela User Flow 2

STEP #4: WIREFRAMES

Vela Wireframes
Vela Wireframes Mockup1
Vela Wireframes Mockup2

STEP #5: SITEMAP

Perfect Properties Home Screen

STEP #6: PROGRESSING TOWARDS HIGH FIDELITY WIREFRAMES

Usability testing provided information for further development of the app. Issues which were found during the testing have been fixed to achieve effective outcome of the app.

Vela issue 1 Vela issue 2 Vela issue 3 Vela various screens

STEP #7: UI ELEMENTS

Vela UI elements Vela tone of voice