Project Overview
Vela is a marine forecast application designed for surfers of all skill levels looking for reliable and personal forecasts. Vela fosters a community between like-minded surfers via user-generated content shared across a native social hub.
Timeline
November 2021 - April 2022 (6 mo.)
Project Type
Native Mobile Application
Role
UX/UI Designer
Tools
Figma, Adobe Illustrator
Background
The discovery phase for Vela began in November 2021 with competitive research and user interviews.
We discovered that people had trouble getting reliable marine forecasts that’s easy for beginner surfers to understand. The resulting prototype is an initial hypothesis on how we hope to solve the problem.
Problem Statement
Surfers need a way to check reliable real-time and future weather conditions at the sea so that they can carefully plan their days out and minimize the risk of injury or death.
We will know this to be true when surfers are able to properly prepare for a day out at the sea.
User Research
Prior to the development of Vela, I conducted a series of interviews to find out more about what potential users of Vela want from their weather-related applications. Below is a brief summary of the research results. To protect the information of the interview participants, the full details of the sessions will be undisclosed.
Statistics:
Number of Participants: 4
Average Age: 21.8
75% of the participants had some sort of water sports experience.
75% of the participants have joined online communities based on their hobbies.
Important Learnings:
- There is a stark difference between what a surfer looks for in a forecast (wind speed & direction), and what a non-surfer looks for (mainly precipitation).
- Despite the overwhelming popularity amongst surfers, Surfline is deemed unreliable as it frequently predicts swells and wind incorrectly. Even their 800+ live surf cameras are buggy; a paid but reliable alternative is available through Surferview.
- Windguru and Surf-forecast.com are deemed two of the most reliable sources of swell and marine forecast by experienced surfers.
- In addition to the planned community features like forums and comments, the ability for users to post pictures, videos, or updates of waves, wind, and other forecast metrics will foster a community while increasing the reliability of the forecast.
- Depending on the situation, it is possible to plan outings ahead up to 1.5 weeks in advance. Finalization of plans can take place anytime between 5 days prior to the trip to the day of the trip.
User Personas
Two personas were created to help Vela stay focused on what matters to the users.
User Flows
Three user flows were created to envision what a user might do with Vela. I sought to minimize the amount of clicks needed to access any screen so that the users can quickly access the information they desired.
Users like Emily already well-versed in the world of surfing. I looked to make bringing pre-existing habits, tribes, and surfing knowledge to Vela a frictionless and enjoyable process. Emily will immediately make comparisons between a marine forecast with which they are comfortable with and Vela, so a good first impression must be made.
Beginner surfers like Harv have more on their hands, as they are learning about the world of surfing and looking to make fulfilling connections with other surfers.
Sitemap
Here is the initial sitemap drawn up for the development of Vela. It should be noted that significant changes to the information architecture has been made throughout the development and the revised sitemap can be found in Section 4: Refining the Design.
Low-Fidelity Wireframes
Here are the low-fidelity wireframes for Vela, developed with Adobe XD.
These wireframes focused on the fundamental screens for Vela, ranging across the Explore Tab, the News Feed Tab, and the Social Tab.
Mid-Fidelity Wireframes
Here are select screens from the mid-fidelity prototype created for Vela, developed with Figma.
Most of the major features are implemented at this point. The visual identity of Vela began to take shape around this time, but has yet to be heavily refined.
This version of the app was used for the usability testing that will be covered in the next section.
Usability Test
The main goal of this usability test was to evaluate the learnability of app from the perspective of new users seeing Vela for the very first time. Because Vela is more than just a simple marine forecast app, I wanted to see if the users are able to navigate and understand the various facets of the app on their first use.
6 remote moderated usability tests were conducted via Discord, which were recorded with each participant's consent. All participants were able to successfully complete all 5 scenario tasks without major issues.
Scenario Tasks
1. You’re planning to go to any nearby shore on Thursday, 2/3. Using Vela, view the forecast to check how large the swell (wave height) will be on that day.
2. You’re curious to see how the waves look in person. Find the eye forecast to view a live feed of the waves at the location.
3. Seeing that the conditions look good, you decide to read up on reviews of the location. See what others have to say about the location you’re planning to go to.
4. Since you’re new to surfing, you’re curious to see what other surfers are up to. Using Vela, find some posts made by the community and see what the comments are saying.
5. You want to be notified of future instances in which the swell looks good for your bookmarked locations. Edit your notification settings to receive notifications for bookmarked swells.
1. You’re planning to go to any nearby shore on Thursday, 2/3. Using Vela, view the forecast to check how large the swell (wave height) will be on that day.
2. You’re curious to see how the waves look in person. Find the eye forecast to view a live feed of the waves at the location.
3. Seeing that the conditions look good, you decide to read up on reviews of the location. See what others have to say about the location you’re planning to go to.
4. Since you’re new to surfing, you’re curious to see what other surfers are up to. Using Vela, find some posts made by the community and see what the comments are saying.
5. You want to be notified of future instances in which the swell looks good for your bookmarked locations. Edit your notification settings to receive notifications for bookmarked swells.
Test Report
I used Jakob Nielsen’s four-step rating scale to sort the observations and errors discovered by the participants, with each being complemented by possible solutions & next steps. Here are some of the major points I learned through the usability testing:
Full list of feedback received during the usability test.
A/B Preference Testing
A/B preference tests were conducted from February 22, 2022 to February 23, 2022 regarding variations of onboarding screens for the Vela mobile app. A total of 12 participants (10 male, 2 female), were involved in this study.
Preference Test #1: Onboarding 1
The first preference test was created to see whether users prefer flat visuals or gradient. While not statistically significant, double the amount of participants preferred the gradient version. Some of the reasons cited are that the gradient version “looks cooler” or “more ocean-y,” fitting with the theme of Vela. Another reason in support for the gradient was the darker color scheme, which is easier on the eyes.
The first preference test was created to see whether users prefer flat visuals or gradient. While not statistically significant, double the amount of participants preferred the gradient version. Some of the reasons cited are that the gradient version “looks cooler” or “more ocean-y,” fitting with the theme of Vela. Another reason in support for the gradient was the darker color scheme, which is easier on the eyes.
However, some participants cited that the gradient is in fact harsher on their eyes, and preferred version A instead.
Preference Test #2: Onboarding 2
While similar to the first test, I wanted to see if the background should be more than a flat color or a gradient. The addition of translucent bubbles ties in with the aquatic theme of Vela, which some participants appreciated. Multiple participants suggested that the bubbles should also be animated, which was conceived but not implemented for the preference test. However, other participants felt that the bubbles were too distracting and took away from what the screen’s purpose is.
The results overall were not statistically significant, so careful balancing was required to ensure that the background animation was not too distracting for users getting accustomed to Vela.
Preference Test #3: Onboarding 3
The two variants of the sign-up screen mostly varied in the placement of the quick sign-up option. This test was inspired by the usability testing when one of the participants noted that they did not notice the quick sign-up option on their first run through the prototype.
The results yielded an even 50/50 split, with participants providing different reasons for preferring one over the other. Some people prefer to have the quick sign-up options near their thumb where it is easier to click, while others prefer to have it more visible at the top so they can find it faster.
High-Fidelity Prototype (Current State)
This gallery displays select screens from the Vela prototype as of the time of writing (April 15, 2022). As with the mid-fidelity wireframe and the mid-fidelity prototypes shown above, these screens were designed with the iPhone 8 Plus in mind (16:9 aspect ratio).
Style Guide
Here is an extensive style guide developed for Vela. This document goes over various UI elements found on the mobile version of Vela, detailing their use cases, rules to abide by, and special functions each element may serve.
Vela makes use of Material Design principles developed by Google, blending the modern feel of metro design and the instant recognizability of real world objects.
Significant Changes
Numerous changes were made using feedback from the usability test, A/B preference testing, and peer reviews. Issues with high severity were prioritized during the revision phase. I will highlight some key changes designed to improve usability and enhance the visual experience.
1. Typeface
The typeface was changed from Neutraface to Sofia Pro. The Neutraface typeface had the modern and sleek feel I desired with Vela, but numbers tended to descend below the base line. This made for an unpleasant reading experience, especially when it came to forecast graphs. Sofia Pro possessed the modern feel of Neutraface and worked with a more conventional system for its numerical values.
A common complaint throughout the testing process was that the smallest font size was difficult to read (Sofia Pro Medium 11px). This font size was primarily used as labels on the navbar, with some additional use cases. To reduce visual clutter and improve legibility, only the active tab has a label on the navbar, and other use cases of the 11px font size were changed to 13px.
2. Icon Styling
Icons were changed from an outline system to a silhouette system (with some exceptions). This made many of the icons more instantly recognizable to the users and helped Vela keep a more consistent visual identity.
Certain icons were changed in accordance to emotional design and Gestalt Psychology. One example can be seen below, where the bookmark icon for locations was changed to a heart. This change was also designed to help users tell the difference between on/off states.
3. Borders
Borders for various UI elements were made more clear. One example of this is on the News Feed tab. Previously, there was no clear divide between one post and another, which made the users guess where each one ended and could be interacted with. Initially, this was remedied by adding a drop shadow to each post, which was then changed to be a solid light gray (#F2F2F2) border.
4. Sitemap Evolution
Here is a comparison of the Vela sitemap in its current state against the initial concept sitemap. You may notice that the current sitemap is a lot simpler. This is because I sought to make all the information more quickly accessible from when a user opens the app.
5. Color Palette
You may notice that the strict use of flat tones was lifted and gradients across various hues of blue were introduced after the usability test. After seeing how much the participants put their emotional value on the visuals of the app, many careful considerations were made to revamp Vela's visual identity. One such instance was seen above, through the A/B preference testing.
The main focus was the narrow down the tones into blues instead of branching out too far from the aquatic theme of Vela. This led to the removal of purple (#5B00BE) and the adjustments in other blue-hued accents using Adobe Color. The new color palette was carefully measured to pass the WCAG color contrast check to ensure text using or around the accent colors would be legible.
Current State Prototype
Below is a working prototype of Vela in its current state (iPhone 8 Plus). Please feel free to mess around with it and see what you can do with it!
Vela was the first UX project I've tackled from scratch, and with it came lessons for the future of my UX career. Due to my experience in the graphic design industry I was able to get through the wireframing rather well. But only with first hand experience wireframing do I understand the appropriate times to work on paper and when to work digitally, each with its own benefits.
Interviewing users was a familiar experience from my time studying psychology in undergraduate. This process was vital in learning the ins and outs of the mind of an actual potential user, especially helpful for Vela (as I have no experience surfing myself). I learned that gathering valuable information from the user interviews is extremely important in creating personas for the project, which would help me remember that I am creating for others than myself.
Usability testing was a complex process in which I had to juggle feedback from various sources and rank the observations made by the participants in terms of severity. Peer reviews and preference tests were also important in shaping how Vela shaped out. I was limited to using remotely moderated tests for this project, but I would like to employ in-person tests whenever possible to see the benefits of either type of test.
In future projects, I would like to take the mistakes I've made during the development process and use it to iron out my workflow to become more efficient and effective. One big area I would like to improve on is how I lay out text and improve legibility. That is one area I am still not 100% satisfied with on Vela, as I feel that the margins for text can be improved in the future.
