Vela
Vela: A wind, wave & weather app for water sports aficionados
Career Foundry UXD Project
Project Details
Project
Responsive App Design for Career Foundry UXD Program
Duration
7 Months
Role
Solo Project: User Researcher & Designer
What is Vela?
Vela is an all-in-one forecast and planner app for sea lovers. It encourages users to explore, showing detailed and relevant weather information up to 10 days ahead, and share what they find in app or via social media. Using the calendar function users can schedule water sports into their week, with the option to open their calendar to friends (who can sync and join their trips) or hide it and keep the excursion solo. Every trip comes with safety advice and tips for getting the most out of the experience.
Project Goal
To design an intuitive app where users can search for new areas, see relevant forecasts, plan a trip into their calendars and share and sync with friends.
Design Thinking Process
1. Empathise
The Problem
Planning a day at sea requires careful consideration: Where to go, when, with who and what safety concerns there are. It takes many different apps to answer these questions, meaning users have to juggle plenty to plan their trip. I wanted to streamline this process, enabling users to do it all, in one place. This meant first working out what ‘doing it all’ entailed. To do this methodically, I’ve employed the design thinking process. I defined a problem statement based on the brief above and have come back to this regularly to sense check my progression:
Problem Statement
"Vela users need:
A way to engage safely in their chosen sport or activity with reliable data presented in a clear, understandable format
Because:
In order to enjoy their chosen sport (surfing, sailing, kayaking, etc), knowing the key weather factors and how it relates specifically to the sea (and how this can change quickly) is key.
We will know this to be true when:
40% of users return to the site/app within the first month, users satisfaction scores are 80%+ and the app rates highly in app stores."
Born from compelling competitor research, which offered a wealth of wind, wave and weather forecasting apps for surfers, sailors and other extreme water sports enthusiasts but offered little to no explanation for novice users, I moved forward with the idea that this app would be accessible, understandable and useful for all.
Hypothesis Statement
"We believe that:
By offering users a succinct app interface that presents relevant, timely and understandable weather forecasts, with the ability to search for, share and sync locations with an in-app calendar, users will no longer have to juggle multiple apps to plan their trips.
This will save time and cognitive load for novices and professionals alike, enabling an enjoyable planning experience and encouraging them to confidently and safely go to sea."
Research
Getting to know real users and hearing, in their own words, what their needs, goals, behaviours and motivations are is essential in HCD (Human Centred Design). Employing surveys and in-person interviews was my first step towards defining these. My main goal was to discover if a diverse range of users' has converging needs, and if so, plan for how I can meet them.
Using the survey insights, I revised the areas I wanted to focus on for the interviews. Interviews were held with three users with diverse age-range and backgrounds to mimic the target app audience. The results offered the following key insight: whether swimming, surfing, paddle boarding or sailing the most common response for a user's top need was, unsurprisingly, accurate weather information. This becomes more individual, however, when you consider what sport they are doing: surfers - swell and wave information, sailors - wind direction, depth, swimmers - tides, currents temperatures and so on.
Interesting Insight
Users suggested they were less likely to go to sea if going alone
Design Thinking Process
2. Define
Defining my users
With the research analysis to hand I set out to define who the users of Vela would be, what their needs, goals, behaviours and motivations would be, what limitations they might face, and how they might successfully use Vela. Meet my user personas:
Design Thinking Process
3. Ideate
Information Architecture
Bringing all I had learned up to this point together, I began by playing around with the potential hierarchy of the app, carefully constructing the information architecture with a sitemap. This initial sitemap was tested in a card sorting exercise, using Optimal Workshop, and updated accordingly.
The results of the card sorting exercise validated my groupings, though offered clearer category titles. It enabled me to streamline the sub-pages, minimising confusion for users.
Sketching
Using pen and paper I began translating the sitemap into the pages of an app. I worked through the navigational elements of each page, keeping in mind the task flows for my users, and slowly but surely worked out the low-fidelity wireframes. Though basic they show an undistracted example of the users' experience.
I delight in reshaping, reconfiguring or sometimes simply scrapping, pieces of the 'jigsaw' to find the most seamless approach
These sketches were then built into a basic mid-fidelity prototype using Figma and put forward for the first round of user testing.
Testing
Test Objectives
Observe how quickly users can navigate the app and find key information, for example, the weather forecast for a specific location, or browse new locations.
Determine whether users see this responsive app's value and how quickly they understand its benefits.
Expectations
As I had lined up a diverse mix of testers, spanning ages and sports preferences, I had expected that some areas of the prototype would be more useful to some than to others. I had expected some inevitable but minor navigation issues with users noting things I may have overlooked.
Overview
The interviews were conducted over 10 days in December 2022. Challenges included last-minute test participant drop-outs and technical problems. Whilst I had expected to encounter some navigational issues, participants noted more than anticipated. The results were collated first into an affinity map and then a rainbow spreadsheet. Through these methods, key problem areas were identified in the participant's journeys and I used Jakob Nielsen’s Error Severity Scale to rate these issues to help me prioritise improvements.
Design Thinking Process
4. Prototype
Design
Once improvements and solutions were ready to be implemented, I turned my attention to the visual nature of the design, focusing on defining the design language system and style guide to ensure design consistency, efficiency and scalability.
Colour Palette
Colour use plays an important part in user enjoyment: we all like beautiful things. Colour can all be used to lift moods and encourage subconscious emotional reactions. With this in mind, the colour palette used takes inspiration from blues, greens and gold, the colours I associate with the sea and fair weather days. These colours also connect to nature, detox, calmness and connection.
Typography
Carefully chosen to be fluid and accessible, Mulish is used for the bulk of our copy. It is legible, projecting reliability and building trust.
For all headlines and titles the letter spacing should be 35%, and all body text should have 5% letter spacing.
All button text, including text buttons, should have a weight of 1000 and be capitalised.
UI Elements
Accessibility played a big part in the design of the UI elements, buttons and icons in particular.
Language & Tone of Voice
I returned to my personas to carefully consider how each might interpret and be affected by the use of language. With such a diverse target audience I opted to keep things simple, clear and motivational, without the use of flowery language or exclamatory punctuation.
"Vela users should feel motivated and engaged with our product and its features. They should feel inspired and ready to go. To that end, the tone of voice should reflect an engaging, uplifting and motivating feel. Each sentence should be a call to action: Discover. Share. Save.
We want to engage the community too with our app, encouraging each user to respect the water, reach out with care and knowledge and leave nothing behind and take only incredible experiences.
The language used should remain clear and concise. No frills and no exclamation marks.
Direct. Uplifting. Engaging. Keep it simple."
Design Thinking Process
5. Test
HIGH-FIDELITY CLICKABLE PROTOTYPE
With the DLS in place, solutions were implemented and the prototype was offered up for peer feedback. The results were incredibly insightful and gave me a lot to consider. Some areas were rethought entirely, with conceptual updates changing large parts of the forecasting layouts. Some opinions were interesting but need more testing, in the form of A/B or preference tests, to determine if the app will benefit from the update. Changes were made with significant impact, the combination of which you can find here, in the clickable prototype below:
RETROSPECTIVE
WHATS NEXT?
Continue to refine mobile designs and further develop the desktop version.
Design onboarding screens and multiple forecast elements.
Assess the success of the app using the metrics laid out in the Business Requirements Document and Problem Statement.
KEY LEARNINGS
To borrow from the sentiment “It takes a village to raise a child”, I’ve learned that it is impossible to design in isolation. From the very beginning of this process, the user research and usability testing, to team collaboration and peer feedback, to the wealth of guidance and inspiration from designers on social media and the web, ‘it takes a village’ to take a brief and create a workable, useful, beautiful application.
If I were to take Vela back to the start there a few things I would consider doing differently. Firstly, I would spend more time working with the user flows, pencilling out more variations and leaving these malleable. Secondly, I would attempt to set the Design Language System and Style Guidelines out earlier in the process. Finally, as the idea progressed it became clear that the goal of combining several water sports needs, for a diverse range of app users, was ambitious. The research had shown me a gap in the market, namely an app that covered everything, in one place, which I endeavoured to fill. With hindsight, the gap is there for a reason. With that in mind, I would take Vela in a more specific direction and look at developing an application for outdoor swimmers, and those who enjoy the more gentle sports such as paddle-boarding, kayaking and so on. This would give more direction and allow for a stronger branding presence.
I look forward to continuing the development of Vela.