Vela
A weather app designed for surfers
Specialised forecasts, essential guides and fun challenges for great surfing experiences.
Design brief
Design objective
Develop an app to provide water sports enthusiasts with beautiful and easy-to-use weather forecasts, prompting the best time on waves depending on their skills and location
Design criteria
Visually beautiful, data rich, easy to understand information
Technology criteria
A responsive web app (mobile-first approach)
Client
This design concept was created for study purposes and can be refreshed and tailored for an app per request.
Time
12 weeks (year 2019)
MY ROLE
Solo UX and UI designer from concept to high-fidelity prototypes
TOOLS
Sketch, Whimsical, Infogram, inVision, Principle, Lookback, Optimal Workshop, Miro
TECHNIQUES
Double Diamond strategy, user research, usability testing, wireframing, prototyping
UX design process
The design process was based on Design Thinking and lean UX principles, and guided by Double Diamond strategy.
Every experienced product manager and designer knows that no design or product can turn out great in a linear process. It is, however, important to have a structured approach while also being ready to go back to square one for a better outcome.
Source: Dan Nessler, Medium
Project by design stages
01 Discover | Research
This stage centres around understanding the problem. It begins with initial insights based on general assumptions, followed by in-depth research to validate and further explore the problem.
Competitive analysis - User research - Insights - Problem definition - Solution hypothesis
Competitive analysis
Looking at the market of similar apps, I realised that there are hundreds of apps in the market already, offering weather forecasts of high accuracy for water sports globally.
I performed a deeper competitive analysis of 3 apps selected for their market position, features and similar target audience: Windy, WeeSurf and Surfline.
To understand their business model and performance, I looked at their overall business strategy, market advantages and profile, target audience, and performed SWOT analysis and UX analysis.
Overall I realized the market is oversaturated and the app would need to offer some truly unique, unfulfilled needs. This is what I tried to find out in the next step of user research.
UX Analysis of Surfline app
User research
To set out to user research, I defined Vela’s target market as people who love to surf and are eager to improve their skills, but do not want to take unnecessary risks.
Core age group: 18 to 45 years old
Care for their well-being
Passionate, but in control of their actions
Love the sense of belonging to the “tribe”
Technology savvy
Having talked to real surfers and other board sports enthusiasts and analysed their answers through Affinity Mapping and had quite a eureka moment. Research gave me a much better idea of what is of real value to potential users
Insights
While weather forecasts are crucial, they're just part of the story.
Clarity what to expect
Surfers value detailed spot descriptions over visuals for planning, prioritizing practical information in their decision-making.
Community engagement
Research shows that community-focused features like forums and meet-up tools significantly enhance user experience and engagement for surfers.
Exploration and discovery
Adding travel itineraries could further motivate users, encouraging them to discover new surfing locations.
Competition and accomplishment
Integrating tracking features and challenges could actively engage users, promoting competition and a sense of achievement within the surfing community.
Problem statement
Research led to a revised problem statement as the initial hypothesis proved inaccurate. It was not about complexity and visuals. I finally understood, why every surfer I talk, uses Windguru as their guiding service, but also what this service lacks.
BEFORE RESEARCH
Watersport enthusiasts need a way to quickly check and easily interpret complex weather forecast so that they can pick the right time to enjoy watersports while feeling safe and confident.
AFTER RESEARCH
Watersports enthusiasts, who like to feel good and brag about the waves they've conquered, need a way to check trustworthy weather data and track their performance because they want to be proud while being safe.
02 Define | Synthesise
This stage synthesises acquired knowledge to develop user personas and journeys through task analysis and user flows.
User personas - User journey maps - Task analysis - User flows
User personas
Based on the gained insights, two main themes surfaced to address the key pain points.
Safety and enjoyment
Provide accurate weather forecast in combination with comprehensive information about the spots to provide outdoor enthusiasts with the essential knowledge they need to plan their activities effectively.
Lena, the planner
“I feel pretty confident, however, I want to be sure I am safe especially in unfamiliar spots while I do love to discover new places.”
Adventure and competition
Enable users to document, monitor, and exchange their pursuits within specific locations and weather circumstances. Additionally, the platform should support the generation of achievement rankings.
James, the adventurer
“I love to escape in the wild now and then. We are a group of friends from early days with who we still go to catch the waves together. We love to challenge each other.”
User journey maps and task analysis
Based on the user needs, I came up with possible scenarios and played them out with corresponding user personas.
WEEKEND SCENARIO
Lena had a tough week at work and hopes to clear her head surfing on the weekend. She wants to go to a new spot instead of her usual one and to ensure the weather conditions are on the level she can handle, and she has an appropriate equipment.
GOALS AND EXPECTATIONS
Have a great day out in the sea, surfing, while feeling confident about the level of challenge for herself and her friend.
Decide on a suitable equipment.
Lena: “I want to make sure I will be safe and enjoy the location”
Task analysis and user flows
Next I drew related task analysis to plan user flows
User's objective: Plan a safe surfing activity
Entry point: Map screen
Success criteria: All safety factors checked
Made with Whimsical
03 Develop | Ideate
This stage involves identifying user pain points and tasks, developing solutions through defining information architecture and a Minimum Viable Product, and conducting prototyping rounds.
Information architecture - Navigation and sitemap - Ideation - Wireframes and mockups
Information architecture
Validation of content structure
Built on the content plan, I devised a sitemap to depict the app structure. It seemed fairly straightforward however, I tested it against user perceptions through Card Sorting. It resulted in a few, but important updates such as incorporating standard expectations, such as Favourites.
The pattern acquired through standardization of cards was confirmed by the Best Merge method, which is also said to perform best with fewer participants. All the cards are suggested to be grouped in 4-5 sections.
Best Merge method
Sitemap
The sitemap continued to evolve through wireframing and prototyping stages, during which more and more clarity around the content structure was achieved.
Navigation
Navigation choices were guided by identified tasks to ensure smooth user flows and effective user journeys.
As Vela is planned as responsive web app I made the conceptual drafts also for desktop. The main focus was to make sure the user flows and experience would be consistent regardless of a device a user accesses the app.
Mobile
The navigation for small screens is planned to be placed at the bottom as a scroll-up bar: sticky when scrolling up and disappearing when scrolling down.
Desktop
For desktop the navigation is put on top in the same icon order as on small screens with both icons and labels. When resizing for smaller screen sizes such as for half a screen, only icons stay visible.
From paper sketches to high-fidelity
Paper sketches
First ideas sketched out for key functions
Low-fidelity wireframes
I continued working on core features in low-fidelity wireframes, designing the main screens of the relevant task flows.
Feature: Check weather conditions
User’s objective: Check if a weekend presents a good opportunity to go surfing.
Context: A user lives in the area or plans a trip to a spot in his free time.
Hi-fidelity wireframes
With another round of improvements, I brought the wireframes to a high-fidelity level and linked for a real experience using inVision. These were then put out to test.
04 Deliver | Implement
This stage focuses on evaluating designs through usability testing and refining and polishing UI.
Usability testing - Preference testing - Accessibility checks - Style guide creation - Prototype
Usability testing
It was time to ensure I had created the right solution to the problem
Goals
(1) Evaluate if the presented functionality allows users to achieve their goals and perform related tasks, such as checking weather forecast and finding a spot of their interest.
(2) Assess how easy it is to navigate through the app.
(3) Observe the first user reactions as regards the overall app design and value to assess the chances of the app to compete in the saturated marketplace.
Objectives
(1) Assess if participants find the weather forecast easy to understand and convenient to use
(2) See if participants find their way around the app easily
(3) Find out if the search functionality is understood, found useful and easy to use
(4) Evaluate if test participants see value in additional features apart from just getting the weather forecast, namely, spot guides with user reviews and rating as well as features not yet included in the prototype (performance tracking and challenges under Sessions as well as Tips)
Participants
I decided to test 2 user groups:
surfers as well as non-surfers to get more comprehensive insights on usability.
I made a thorough analysis of 6 participant testing. They represented people from 4 countries and had both male and female respondents in the age range from 26 to 42 years old.
Methodology and tools
In-person moderated study
Remote moderated study and self-tests to cover for geographical remoteness or time restrictions.
Tests were carried out through Lookback, which allowed a very natural way of testing with participants using their own devices with no additional wiring or equipment.
During the test, the recording of user behaviour on the screen as well as their audio and video recordings were made in a non-obrusive way through the participant’s device.
Analysis and test report
To document my observations and gather all reactions and quotes, I used Affinity Mapping, which I conducted on a Miro board.
For further analysis I summarised all of the findings in the Rainbow Spreadsheet (below)
Findings
All the participants were able to complete all the 3 tasks.
The tests revealed 11 error instances with 3 of high or major severity levels according to Jakob Nielsen’s scale; these were corrected in the next design rounds.
Participants expressed appreciation about the features and visuals of the app.
Rainbow Spreadsheet
Preference tests
During the usability testing, I came across a few issues that were not easy to resolve. To tackle them, I explored various design approaches and conducted preference testing. One of the cases that required attention was the Forecast Detail screen, which was not found to be optimal. Since there were multiple parameters to display, I needed to find a way that would make it easy for users to read and comprehend the information.
I submitted my revised version for a preference test on Usability Hub.
Users justified their choice by pointing out the advantages of visual grouping and the data looking more organised making it easier to scan and focus on the most relevant information.
Version A
Preferred by 23%
Version B
preferred by 77%
Design principles
During the design process, I explored established design principles, applying them to Vela prototype to achieve higher design effectiveness in usability and appeal.
Among the basics of Contrast, Balance, Emphasis, Proportion, and Hierarchy, and others I had a close look at Gestalt Principles such as Law of Proximity, Continuation, Pattern, Multi-Stability and others to boost the designs for better rhythm and flow.
Usability improvements
Accessibility
I reviewed my design following the four Accessibility Principles as defined by the World Content Accessibility Guidelines (WCAG) 2.1, as well as assessed which Conformance Level (A, AA or AAA) could be achieved by the improvements.
This resulted in higher contrasts in colours to achieve the minimum set level 4.5 ; 1 and multiple links leading to key functions.
Design evolution
A number of important design decisions have been made over several iterations with project stakeholders and potential users.
The images shown below illustrate only part of the iterations, which actually took place in between.
Every next design evolved in usability and visual clarity.
Style guide and pattern library
Colour palette
Typography
As there is a great deal of data and visual information in the app, I decided to use exclusively one typeface, Avenir sans serif font. Avenir's clean and minimalistic attributes make it ideal for presenting information clearly and unobtrusively.
Iconography
Interaction design
Prototype
Coast radar
Wind and wave direction on the real coastline
Weather forecast key details dynamically changing by time
Detailed forecast
Provides detailed weather forecast conditions in one view
Scrollable by timeline
Grouped by key parameters for a quick view
Colour codes for warnings
Emoji hints for a quick evaluation of the conditions
