VELA, for fun,
safe trips out
on the water
Brief
When planning a day out to surf, sail, swim, or whatever water sport you’re into, you can’t beat eyes on the water.
Existing weather apps aren’t meeting the goal of displaying complex weather data in an accessible, easy-to-comprehend way to people who regularly engage in water sports which can lead to dangerous situations and miserable trips out on the water.
Web responsive app VELA solves these problems by providing beautifully displayed and easy to understand wind, wave and weather reports, forecasts, and statistics for sailors, surfers, divers, and any other water sports aficionado.
Client
CareerFoundry | Speculative
Timeframe
January – August 2021
My Role
Sole UX Designer
Tools
Figma | Usability Hub | Optimal Workshop
Problem Statement
VELA app users need a reliable, quick way to access easy-to-read weather data and reports because they want to enjoy water sports safely. We will know this to be true when users repeatedly use the app before going out on the water.
Design Thinking Process
Discover
To define the problems that VELA could solve, research was conducted including a competitor analysis to understand the current market and the gaps that exist. User interviews were also conducted to gather key information about potential users, their needs, motivations, and behaviours.
Competitive Analysis
A competitive and UX analysis of Windy.app and Windfinder was conducted, questioning what they do, how they do it, what works well, and what could be improved by covering:
Key objectives
Overall strategies
Market advantages
UX design
SWOT analysis
Key Takeaways
Risks
Building reliable infrastructure for real-time weather data
Establishing trust in data and reporting
Competing with established players in the market
Opportunities
Fill a gap in the market to cater to less knowledgeable water-sport audience
Present a product that addresses the pitfalls of apps currently on the market including interface design
Tapping into current trends including greater interest in health and fitness, and activities such as wild swimming for wellness
Develop relationships with water safety bodies and meteorologist organisations to promote credibility
Interviews
Understanding potential users of VELA including their motivations and behaviour was key to the discovery phase of this project. Before jumping into interviews, the interview goals were established, the methodology was confirmed, and the interview script was prepared to allow for consistent data to be gathered.
Goals
To better understand user behaviour around doing water sports and planning days on the water
To better understand the context in which people would use VELA
To determine what tasks users would like to complete with a weather and conditions reporting app
Document both positive experiences and pain points with apps currently on the market
Process
Insights
Following the interviews, affinity mapping was conducted to determine patterns in the participant’s views, behaviours, motivations, and comments. Through this process five common threads emerged:
1-How users interpret weather and conditions data
People who engage in water sports check weather and conditions information a lot, often daily
Participants use two to three apps and cross-reference data because they aren't getting all they need from one source
Accuracy and trust in data is important
2-Essentials for a water sport app
Participants get out on the water as much as they can, what holds them back is the right conditions and having the time
Key things participants need to know are: wind direction | wind speed | tide reports | swell | period between waves
3-Impact of user ability level
Safety is particularly important for beginners, but also for experienced people
Data in current apps/ websites is not presented in a way that is easy for beginners to understand
There is more information in the world of water sports such as etiquette which isn't currently covered on platforms
4-Importance of community
There is a sense of community around water sports like surfing
Participants go out on the water with other people for both safety and social reasons
Participants rely on local data points like webcams for information
There is sometimes secrecy around sharing spots
5-Location as a factor
Participants tend to check local spots regularly
Currently, they are restricted to local spots because of COVID, but normally they do stay relatively local
They often go on water sports holidays and check out spots abroad
Define
Following user research, it was important to bring all the findings together to humansie the potential user of the app. Personas and user journeys were developed to guide the next stages of the process.
Personas
With discovery and user interviews completed, two personas were created to develop empathy with VELA users and to make informed design decisions.
User Journeys
To visualise the journey that the personas would go through to reach their goals, user journeys were created. By mapping the tasks required to reach a goal as well as the context and emotional experience, a more tangible empathy with the user was developed.
Ideate
With research conducted, the information architecture and the sitemap were developed before wireframing. At this stage, ideas were sketched out by rapid prototyping so that solutions could be progressed or discarded quickly.
Sitemap
A sitemap was created to organise the page hierarchy for VELA. To test whether the information was organised into a coherent structure, a card sorting exercise was conducted with five participants via Optimal Sort.
Card Sorting
The results of the card sorting exercise provided interesting insights, particularly when it came to the backbone of the app which is the weather and condition reports. The key things to address were:
Revise category headings. Stories, in particular, appears to be a bit ambiguous
Reconsider positioning of weather and condition reports
Search and Menu can remain mostly as they were in the first iteration
Revised Sitemap
Wireframing
Putting pen to paper, initial wireframes were sketched out. Creating initial designs this way meant ideas could be quickly sketched to start to figure out how key features would function on VELA, all the while keeping the problem statement and personas at the heart of the process.
Low Fidelity Wireframes
Happy Path for searching for a spot:
Mid Fidelity Wireframes
After getting initial ideas on paper, mid-fidelity prototypes were created with Figma. Key functions of the app were developed with various iterations to improve on flow, navigation, layout, and style.
Rapid Prototyping
To develop more key user flows, rapid prototyping was done allowing for further iteration of mid-fidelity prototypes. At this stage, onboarding was also considered. An initial click-through onboarding to gather user info was settled on followed by progressive onboarding in-app.
Test
To measure and improve usability of the app, it was time to test the mid-fidelity prototypes by conducting usability tests. The goal of the usability test was to assess the learnability and efficiency of VELA for new users on a mobile device. It was also an opportunity to observe and measure if users understood the app, its value, and how to complete basic functions.
Usability Testing
Test Objectives
Determine if users can quickly and easily understand the purpose and value of the app
Determine if key features including searching for spots and creating an alerts are easily found and executed
Establish any pain points or friction in the above actions to inform the next iteration of the app
Participants
There were six participants for this usability test, four of whom frequently undertake their preferred water sports including surfing, sailing, windsurfing, and swimming, and two people new to water sports.
Methodology
The test was conducted moderated in-person and moderated remote. A short briefing was provided to participants followed by task performance of VELA on a mobile app, and a debriefing.
Schedule
Usability tests took place between 26 and 28 May 2021, with five tests taking place online and one in-person.
Results
Following the usability tests, affinity mapping was utilised to establish patterns and to determine what pain points users experienced. The issues encountered were categorised and prioritised before updates were made to the designs.
Categories
Observations
Errors
Negative quotes
Positive quotes
Investigation
Rainbow sheet created
Errors ranked according to Jakob Nielsen's Five Components of Usability
Redesigns
Taking the highest priority issues into account, solutions were implemented across various journeys and screens.
Preference Testing
To refine the design further and to make decisions informed by the user, a preference test of the login screen was conducted via UsabilityHub with 12 participants.
Iterate
Applying a cohesive user interface design to VELA was the next step to develop high fidelity wireframes. The colour palette and overall visual inspiration for the app was inspired by natural colours of the sea, while spacing and hierarchy was informed by the context in which the app would be used.
Design Language System
To ensure visual and tone consistency across the app, a design language system was created for VELA. Covering colour palette, typography, UI elements, and copy, this document acts as an important reference point for designers and developers.
High Fidelity Mockups
With a consistent user interface design applied, wireframes were reviewed to ensure that accessibility standards were being met. Designs were also shared with colleagues for a peer review, with recommendations taken on board. After several iterations, the final high fidelity mockups of VELA were created.
Prototype
Using Figma a clickable prototype of VELA was created to demonstrate the key user journeys and interactions. Experience VELA below by clicking through the prototype.
Learnings & Next Steps
VELA was a fascinating case study as the content for a weather-related app is complex, and when it comes to water sports safety is key. This meant that rigorous research and a clear understanding of the user were key to creating an app that was useful, trustworthy, and clear in its presentation of data.
For this particular project, working with developers early on in the process would be really important to make sure that the live data required such as weather and wind reports would be possible in the relevant format. It would also be relevant to work with meteorology bodies to make sure the information on the app is correct and concise.
To progress the app, a priority would be to conduct a contextual inquiry to test VELA with users when they are out and about to understand how it works in context, and even with wet fingers! It would also be interesting to explore the community aspect of water sports further and how that could be incorporated into the app in a useful way for users to share information on conditions and to connect with like-minded people.