"VELA" was a project during my 10-month Certified UX Designer course at CareerFoundry.
The initial brief was to design a mobile app for water sports enthusiasts who need easy-to-understand weather information to help them have an enjoyable and safe day on the water. Through generative research, the brief was further refined during the first part of the course.
Defining the problem space
Through a competitive analysis and SWOT analyses I defined some initial business requirements for the fictional start-up VELA.
A competitive analysis showed that weather apps for water sports aficionados are either aimed at surfers or professional mariners, but that there was a gap in the market for weather forecasting apps aimed at leisure sailors. The product should combine forecast accuracy, reliability and an experiential approach to sailing weather.
Affinity map with multicoloured post-it notes
Understanding the user
User surveys and interviews were the main generative research methods used to understand the needs of leisure sailors and what they expect from a weather forecasting app.
I used affinity mapping and clustering to identify pain points, user needs, goals, motivations and values.
The results showed that leisure sailors were very committed to sailing and the sea, and valued the immersive nature of the experience. Participants were already using mobile weather apps, but did not expect them to be entirely accurate. Their main frustration was the lack of tidal and sea state information.
Three personas were constructed from the results of the generative research, with "Alex" featured here as the primary persona. Alex has a busy social life and likes to go sailing as a way of connecting with other people. He values excitement, the outdoors and diverse experiences. 
For this persona, a mobile app needs to have easy-to-read, reliable weather information and a feature that allows him to experience coastal places to the full.
Secondary personas focus more on learning and planning trips, with additional features serving their needs.
User Journeys
Empathising with "Alex", I constructed a scenario in which this persona might find himself to explore the opportunities for additional features addressing Alex's needs:
As crew on someone else's boat, Alex has found out at short notice that the boat is not going out on an otherwise suitable day. Alex, now at a loose end, still wants to spend his day outdoors with friends.

Location-based weather forecasting.
Promoted activities and content.
Booking feature.
Social media sharing.
For VELA, I decided to include the promoted content and booking feature in addition to local weather forecasting, as it helps Alex to experience the coastal environment even when he can't go sailing.
Information Architecture
Card sorting gave useful insights into users' expectations regarding the structure of the app. Following the results helped improve the findability of the individual features, and made sure that the task flows made sense to users.
For example, users grouped items such as "set location, password and log-out" together, meaning that a "settings" or "profile" category would make sense to them. More unfamiliar content such as "see other suggested outdoor activities" were sidelined, and users could not agree where this item should be located.
This meant that the proposed trip planning and promoted content features needed more iteration than the more familiar features.
Low fidelity wireframes
The main challenges in wireframing VELA were the information architecture and high-level navigation, and the layout of the weather information. Using pen and paper and Balsamiq, the first prototypes concentrated on the primary featurs: Location-based weather forecast, onboarding, sign-in and settings.
Following the first round of mid-fidelity wireframes and initial guerilla testing, some issues with the high-level navigation emerged: The hamburger menu in particular was not successful, as it was hiding the secondary features, rather than organising them in one place as originally thought. Since users were already unfamiliar with these features, they needed to be able to see them at first glance.
The mockups below created in Adobe Illustrator now feature a bottom navigation bar instead of the menu.
This means that the information architecture of the app is now flatter, but the individual categories are deeper and more clearly defined. The bottom navigation bar means that users can navigate easily out of each category or even jump to another one if needed.
Usability testing and learnings
Using InVision, a clickable prototype was created from the medium-fidelity wireframes for user testing. In-person and remote moderated walk-throughs helped identify the main usability issues that were then addressed in the high-fidelity mockups:
- Legibility and contrast;
- Difficulty seeing and interpreting the weather graphics;
- Finding and booking promoted activities.
Having found the booking feature, test participants were surprisingly enthusiastic about the booking feature and loved the idea of exploring environmentally conscious activities by the sea.
Visual design, branding and preference tests
With the user flows tested, one more functional aspect of the apps was missing: The weather graphics. According to the business requirements and user needs, the graphics needed to be easy to understand and combine wind speed, sea state and tidal information - everything users need to know, at a glance.
Inspired by the learnings from the usability tests and Material Design, I developed an accessible, trustworthy looking style for VELA. A high-contrast colour scheme helps users read small text in an outdoor setting. Driven by illustrations and graphs, VELA aims to show what the weather information means for sailors, rather than overly relying on numbers.
Preference tests showed that users preferred a photographic style to flat graphics, as it showed "what the app is all about" and gives a "nice calm, serene feeling" - being informative while alluding to an experience of the sea.
Accessibility considerations
Finally, the app was reviewed against WCAG. The main considerations were contrast and font sizes, so that the user interface would be legible in an outdoor setting, and for users of diverse ages.
Back to Top