VELA
Mobile-first application
Overview
Vela is a mobile-first weather application meant for water sports aficionados - sailors, surfers, divers etc., who quickly need to check weather reports which are beautifully displayed and easy to understand.
The application displays complex weather data in an easy-to-comprehend manner. With included community and safety features it fulfills all the sport enthusiasts' main requirements for a fun and safe day out on the waters.
My role
UX Research
UI Elements
Brand Design
My Tasks
Market Research
User Interviews
Card Sorting & Sitemaps
User Flows & Journeys
Affinity maps
Usability Testing
A/B Testing
Visual Identity
Tools
Figma
Adobe Illustrator
Adobe Photoshop
Lyssna
Optimal Sort
Paper & Pencil
Process
Inspiration
Understand
Observe
01 - Defining a problem
02 - Market research & competitive analysis
Conceptualization
POV
Ideate
03 - Defining users needs and problems
04 - Building the IA (user
flows & journeys,
card sorting)
Iteration
Exposition
Prototype
Test
04 - Building the IA (Wireframes &
Prototypes)
05 - Usability Testing
Story
Telling
Present
06 - Designing a visual identity and the UI
07 - Final Design
Month 1
Month 2-4
Month 4-7
Month 7-8
01
Defining a Problem
Problem Statement
Water sports enthusiasts need a way to see the real-time weather data on the water and to do it in the safest possible way, because delayed or incomplete information about the weather conditions or overestimating one’s skills, might lead to poor or even dangerous experiences on the water.
We will know this to be true when users start to use community and safety features on an app to find a surfing buddy or contact sea rescue before their trip.
Possible solution
A weather app synced with real-time weather data which offers the possibility for users to connect with fellow water sports aficionados. An app also provides security with alerts when the weather changes and a possibility to mark their surfing location when going in the waters alone. Because of the community page water sports enthusiasts have also the possibility to find each other and to go to water together, which is especially helpful when one of the users is a traveller and new to certain locations.
02
Market Research & Competitive Analysis
Overview of the analysis
I started by analysing 3 competitive companies which were chosen by the various qualities and features they offer to their clients. During the analysis, I defined competitors overall strategy, market advantage, key objectives, greatest assets, marketing profile and SWOT. For the most downloaded app through Google Play and the greatest competitor in the market - Windy, I also conducted a thorough UX Analysis.
Windy's background
OVERALL STRATEGY
Windy alnalyses and processes weather data from dozens of weather models, to provide accurate weather data with detailed information about different water and weather conditions.
01
MARKET ADVANTAGE
Established user base among individuals and companies.
02
KEY OBJECTIVES
A professional weather app for wind and water sports enthusiasts but also for businesses to access the archives of weather data and to get current weather data in various formats and with variety of parameters.
03
GREATEST ASSET
A big geographical coverage with in-depth and excessive information about different weather conditions like wind, air and water temperature, clouds, precipitation, atmospheric pressure, water swells, tides and speed and light parameters. Being the market leader in providing weather data as a service.
04
Windy's marketing profile
Affirms its position in the market by claiming on its home page to be the best outdoor app for sports and outdoors by the World Meteorological Organization.
Next to a web app and a blog Windy uses various social media accounts like Facebook, Twitter and Instagram, where they regularly post updates about the various webinars, tips and tricks for users, app updates, windy community etc. So, each account serves a different purpose according to its means of communication.
Windy offers service through their web app, Android and IOs and their main target audience varies from amateurs to professional sportsmen and businesses.
Windy web application full page screen capture.
Windy's SWOT analysis
-
Wide geographical coverage in 243 countries.
-
Can sort weather data according to an individual’s interest in sports.
-
The main features are free to use. Longe weather predictions and history are accessible with a premium account.
-
Wide user and fan base - has created a separate platform for users to connect through stories, texts and images.
-
To a feature for users about safety in the waters. To add a possibility to mark their location when going on the water and let friends or family know about their position.
-
To add an alert feature when weather conditions change drastically and it is not safe to be on the water.
S
O
W
T
-
With a lot of possibilities, a user has to go through a thorough introduction of the pages and iconography to fully understand what are the possibilities provided by the Windy app.
-
Has a lot of community pages available but it is difficult to maintain all the features in a cohesive manner. Community feature has a lot of subpages which sometimes repeat themselves or haven't reached to their maximum potential.
-
Smaller companies with a personal approach where auser feels they are part of the community instead of a big generic business.
Windy UX Analysis
Click on the image to see a full analysis.
03
Defining users' needs and problems
User Interviews
To understand users' needs, goals and motivations, I conducted user interviews with potential users. All interviewees were related to various water sports on different skill levels - from beginner to expert. Because of their diverse demographics, I was able to identify several features they are missing in their experience right now.
Affinity Maps
After transcribing and analysing the interviews I was able to identify the keynotes on 3 different topics (weather, safety & and community) as the base for the affinity map.
User Insights
Users usually don't check the weather data over 2 days as it is unreliable, and can not be changed. The biggest emphasis must be put on a 2-day forecast - to get this as accurate as possible. This data should be free, otherwise, there is no advantage over the competitors.
01
Users use various pages to get information about the weather, their sports and to connect with fellow sportsmen. Therefore, novice sportsmen's enthusiasm might decline because of the time they need to put in to find relevant pages with correct weather information. For experts, it is a huge inconvenience to sync all their data between devices and pages. By the end of the research 3 key features - weather, safety and community, were identified, which users needed to have a positive experience on the waters. All of which are equally important to keep a users engaged and to have a advantage among the competitors.
02
Users need and seek a connection with other sportsmen through social media and local clubs. They want to hear other people's experiences around different obstacles and also to offer their knowledge based on their experience. Therefore they need a well-thought-through platform to connect, motivate and share information. This should involve the competitions, shared images, routes, gear and tips - as these are the most in-demand information when analysing user interviews.
03
When creating Free and PRO (paid) accounts there is no reason to make a user's PRO accounts reliable on the longer forecasts but to put the priority on the community page. With PRO accounts users can offer paid services, for example being guides and organizing tours and participating in these tours by paying for this service through an app. Due to safety reasons both of these accounts need to be verified, have a rating system by other users and be connected with a credit card or with a third application.
04
User Personas
User interviews gave great insight and a base to create profiles of three main personas of an app.
Firstly an avid professional paddler, Mateo, participates in competitions and events and organizes paddling courses for children. Then Ebba, who is a beginner surfer, and loves to seek out new opportunities, but lacks confidence and knowledge on how to do it safely. And finally, Matthijas, a professionally trained sailor, who has an educational background in the marine industry and knows exactly what kind of information he is looking for.
All of these personas' needs, goals and wants are based on real-life interviews with people with diverse demographical backgrounds.
Click on the image to see the full persona profile.
04
Building an IA
Overview
Based on the conducted research I was able to start building the IA of Vela, which included user journeys of the main features of an app, user flows, mobile-first design-build and wireframes for upcoming user tests.
Card Sorting & Sitemaps
User research gave a ground to build a sitemap, which was constructed with main features including weather, community and safety. Using the initial sitemap as a base I created a closed card sorting test through OptimalSort to find possible errors within the structure of an initial sitemap. While there were some smaller errors, all of the potential users understood the functions and possibilities of the main features.
User Flows & Journeys
Based on the sitemap I created user flows and journeys with all of the personas while taking into consideration their most used features and the pain points they might encounter. This helped to identify pain points, streamline processes, and enhance overall usability. Which eventually ensures a seamless and intuitive journey that aligns with user expectations and needs.
Wireframes
For the quick ideation with low-fidelity wireframes, I used a pen and tablet in Illustrator, to be able to copy and paste the main elements and solely focus on the flow itself. After which recreated mid- and high-fidelity wireframes in Adobe XD and Figma. These iterations helped to focus on the fundamental layout and interactions, and provided a visual blueprint, outlining the structure and functionality of Vela to finally create a prototype for user testing.
05
Usability Testing
Overview
During the testing phase, I conducted in-person and moderate usability tests with high-fidelity wireframes and homepage preference tests.
This study aimed to assess the learnability, efficiency and error rate while using the main features of an app as a first-time user. The test's main focus is to see how users navigate between the main features - map, community and safety and how easy it is for them to complete the basic functions of an app like login, and onboarding.
Also, a preference test was conducted on the home page to determine which layout design users prefer for the main feed.
Methodology
Test Type: Moderated in-person and remote
Tested version: Mobile
Participants: 6 potential users with diverse demographics
Evaluation metrics: Jakob Nielsen's error severity rating scale
Participants were allowed to take part in their choice of environment through mobile phones. To be able to evaluate the information later on the participant's actions were recorded through screen sharing. Throughout the test, participants were continuously interviewed about the task completion.
MAIN GOAL
The goal of this study is to assess the learnability, efficiency and error rate while using the main features of an app as a first-time user. The test's main focus is to see how users navigate between the main features - map, community and safety and how easy it is for them to complete the basic functions of an app like login, and onboarding.
01
KEY OBJECTIVES
-
Observe user's pathways while navigating between apps' main features.
-
Identify user's pain points.
-
Observe how users engage with the main navigation of an app.
-
Find out errors within an app and how a user can recover.
02
SCRIPT
-
Demographical questions
-
Open-ended questions
-
Tasks to follow
03
RESULTS
-
Affinity map was created based on the positive and negative comments, observations, and errors.
-
Rainbow Spreadsheet was created to assess all of the categories at the affinity map.
04
06
Designing visual identity and UI
Visual Identity
Velas´ identity is designed to be a harmonious combination of strength and fluidity of the natural forces. My goal was to take natural elements - the force of the waves, the colours of the sea and the unpredictability of the weather and use them as the base to translate them into Vela's brand visual components such as logos, colour schemes, typography, and imagery that collectively communicate the brand's personality and values. By this, I aimed to foster recognition and establish a memorable and meaningful connection with the audience.
Overview
Vela's vision is to make weather information an integral and seamless part of people's daily routines and to foster a greater understanding and appreciation for the dynamic nature of the world around us. Therefore my three keywords for creating a visual identity were - strength, fluidity and accentuation.
UI Elements
During the design process, I was keeping in mind the Web Content Accessibility Guidelines when it came to colour contrasts, typography, layouts and visual impairments. I also had several peer reviews to spot small problems and mistakes for future iterations.
Loading splash screen
07
Final Design
08
Conclusion
Key challenges
-
To design a product which differentiates from the current competitors.
-
To translate the ideas into the physical features and find the most suitable form to forward the information.
-
To build a logical interface and intuitive connections between different features.
-
To find a balance between the visuals and texts.
Key learnings
-
How to define the exact problem statement and continuously renew it throughout the process based on the user's behaviour.
-
How to build the Information Architecture based on the interviews, competitor analysis and business requirements.
-
How to isolate the relevant information from the usability test and how to rank this information based on its relevance.
-
How to integrate and benefit from rapid sketching and wireframing to minimize the possibility of any user flow errors with the smallest costs possible.
Summary
After the main framework of the design was set, the peer reviewing and usability tests were powerful tools - to look at the product through another set of eyes. Based on various feedback from mentors and peers, I was able to make changes in user flows, features and visuals to fix errors within the hierarchy of information.
The next step would be to find any user flow errors through another test usability test and polish UI design elements, spacing and visual identity, for the final hand-off.