Check out the Prototype!
Background
The discovery phase for Vela began in November 2021 with competitive research and user interviews.
I discovered that people had trouble getting reliable marine forecasts that’s easy for rookie surfers to understand. The resulting project is how I chose to solve the problem.
I discovered that people had trouble getting reliable marine forecasts that’s easy for rookie surfers to understand. The resulting project is how I chose to solve the problem.
Problem Statement
Surfers need a reliable way to check marine weather forecasts so that they can carefully plan their days out and minimize the risk of injury, or even death.
We will know this to be true when surfers are able to properly prepare for a day out at the sea.
We will know this to be true when surfers are able to properly prepare for a day out at the sea.
SECTION 1
User Research
Key Learnings
- Despite the popularity, Surfline is deemed unreliable.
- Windguru and Surf-forecast.com are deemed the most reliable apps.
- Community features will foster a user base, and increasing the reliability of the forecast.
- Surfers look to plan sessions up to 1.5 weeks in advance.
User Personas
Two personas were created to help Vela stay focused on what matters to the users. They were designed to be active, tech-literate adults who lie on the opposite sides of the surfing experience spectrum.
The Veteran
As a seasoned veteran of the sport, Emily wishes to have access to the most accurate marine forecast to plan out her trips to the shore.
The Rookie
As a newcomer to surfing, Harv needs an accurate assessment of whether it is safe for him to go int the waters or not.
User Flows
One thing I kept in mind while creating these user flows is how many times the user would need to tap on the screen to access the information they desired. Checking the weather for a session should not become a chore!
The user research also made it evident that users of different skill levels will interact with the app in differently, so some unique user flows had to be crafted for these personas.
The user research also made it evident that users of different skill levels will interact with the app in differently, so some unique user flows had to be crafted for these personas.
SECTION 2
Initial Designs
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 design process, 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 flows for Vela: The Explore Tab, the News Feed, and the Social Tab.
These wireframes focused on the fundamental flows for Vela: The Explore Tab, the News Feed, and the Social Tab.
Mid-Fidelity Wireframes
Here are select screens from the mid-fidelity prototype created for Vela, this time created in Figma. At this time, the whole project was shifted over to Figma from Adobe XD.
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.
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.
SECTION 3
Usability Testing
The main goal of this usability test was to evaluate the learnability of app from the perspective of new users. Since Vela is more feature-packed than an average forecast app, I wanted to ensure that users are able to navigate and understand the various facets of the app quickly.
6 remotely moderated usability tests were conducted, which were recorded with each participant's consent. All participants were able to successfully complete all 5 scenario tasks without major issues.
6 remotely moderated usability tests were conducted, which were recorded with each participant's consent. All participants were able to successfully complete all 5 scenario tasks without major issues.
Test Report
I sorted through the observations and errors discovered by the participants, ideating possible solutions & next steps for each item on the list.
Pain Points
Below are the two major pain points I learned throughout this process:
Forecast Screen
Changing the date should be separate from the forecast metric cards, as many participants were unable to find the function.
Swell Notifications
There was about a 50/50 split of whether the participants could find the notification settings or not. With this change, users are able to set the notifications on the location page instead of having to go into settings.
A/B Preference Testing
Some preference tests were conducted regarding variations of onboarding screens for the Vela mobile app.
A total of 12 participants were involved in this study. While none of the results were statistically significant, the follow up question about the reasoning behind their choices ensured that I learned valuable user insight.
A total of 12 participants were involved in this study. While none of the results were statistically significant, the follow up question about the reasoning behind their choices ensured that I learned valuable user insight.
Version B was thought to be more visually cohesive with the marine theme.
Some participants suggested that the bubbles be animated.
The results yielded an even 50/50 split.
SECTION 4
Refining the Design
Final Designs
This gallery displays select screens from the final Vela prototype.
Significant Changes
Numerous changes were made using feedback from the usability test, A/B preference testing, and peer reviews. Too many to list, so here are some highlights:
Color Palette
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. The strict use of flat tones was traded for liberal use of gradients across various hues of blue.
The main focus was the narrow down the tones to highlight the aquatic theme of Vela. This led to the removal of purple and the adjustments in other blue-hued accents. The new color palette was carefully measured to pass the WCAG color contrast check for accessibility requirements.
The main focus was the narrow down the tones to highlight the aquatic theme of Vela. This led to the removal of purple and the adjustments in other blue-hued accents. The new color palette was carefully measured to pass the WCAG color contrast check for accessibility requirements.
Typography
The typeface was changed from Neutraface to Sofia Pro. While Neutraface had the geometric feel I desired with Vela, many numbers descend below the base line. This made for an unpleasant reading experience in, a death sentence for such a number-heavy application. Sofia Pro possessed the modern feel I was looking for 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 the minimum font size was increased from 11px to 13px.
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 the minimum font size was increased from 11px to 13px.
Iconography
Icons were changed from an outline system to a silhouette system (with some exceptions). This made many of the icons more instantly recognizable and helped Vela keep a more consistent visual identity.
Borders
Borders for various UI elements were made more clear, exemplified by the change on the News Feed tab. Previously, there was no clear divide between posts, which made the users guess the touch area of said posts. Initially, this was remedied by adding a drop shadow to each post, which was then changed to be a solid light gray border.
Sitemap
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 information more quickly accessible from the moment the user opens the app.
SECTION 5
Visual Style Guide
Vela makes use of Material Design principles developed by Google, aiming for a modern and textured feel in the visuals.
Color Styles
UI Elements
Grids & Layouts
Typography
SECTION 6
Final Learnings
Retrospective
Vela was the first full UX project, and it came with some lessons for my UX career. Thanks to my experience in the graphic design industry, I was able to construct pleasing visuals in the latter stages of the project. The early stages however, was a trial of understanding the pros and cons of wireframing on paper vs. sticking to a more comfortable digital environment.
Interviewing users was a familiar experience from my undergraduate psychology classes. This process was vital in learning the ins and outs of the mind of an actual potential user as I have no experience surfing myself. This information proved useful for creating user personas, which would help me remember that I am not creating an app for 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.
I would like to take the mistakes I've made during the design process and use it to optimize my workflow. The major struggle for me in Vela was choosing the right typeface, as I failed to take into accessibility in terms of legibility.
Interviewing users was a familiar experience from my undergraduate psychology classes. This process was vital in learning the ins and outs of the mind of an actual potential user as I have no experience surfing myself. This information proved useful for creating user personas, which would help me remember that I am not creating an app for 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.
I would like to take the mistakes I've made during the design process and use it to optimize my workflow. The major struggle for me in Vela was choosing the right typeface, as I failed to take into accessibility in terms of legibility.
