Gale is a navigation app that helps hobbyists who are new to sailing access learning resources and real-time weather conditions, which is crucial for ensuring safety during ocean activities.
Outlining the Challenge
With millions taking to the water, why are boating resources still so hard to access?
Learning can be cumbersome, intimidating, and time-consuming but novice hobbyists just want to dive in and try something new.
Talking to Hobbyist
I posted a short survey to niche communities on Facebook and Reddit. Some of the commenters were even nice enough to speak with me over the phone to talk about their hobbies.
Our most important finding was that most hobbyists (especially sailors) have to use more than one app. One for weather forecast and one for navigation. Meaning that they have to juggle several apps while also worrying about sailing and other water hazards.
So to best serve these users we need to repackage the most useful features from weather and navigation apps into a streamlined experience.
Laying out Solutions
Reviewing a handful of weather and navigation apps we came away with features and ideas. We laid these ideas out in an initial sitemap to get a full scope of our app.
The goal is to craft a presentable outline that details all features so that we can show it to potential end users and receive feedback.
The first iteration included many features commonly seen in navigation, weather, and social media apps. Outlining them highlighted some of our concerns about clarity
Iteration 1
Problems
- Labels are not very clear. Such as “Timeline Filter”
- Unnecessary features like Skill Level Selector
- "Filters" & "Selectors" are confusing words in this context.
Changes
- Renamed “Timeline Filter” to “Time Range” and emphasized that it is a feature tied to the Dashboard page.
- Added “Favorites”, where users will be able to find Points of Interest.
- Removed terms like Filters and Selectors due to vagueness.
Iteration 2
Learning through mistakes
As mentioned before we want to present the features to our end users to see what was missing from their perspective.
We invited 3 participants to complete a Card Sort using our Features as Cards and our Pages as categories. We also asked participants to add any cards or categories that they feel are missing or make more sense.
This way we can learn how users would organize our features and find what parts of the app are confusing.
Problems
We spoke to participants after the tests and they expressed some confusion/frustration with 4 specific cards:
- Safety Resources
- Historical Nautical Maps
- Interactive Map
- Map Time Range
We could see a trend where no user agreed on the placement of these cards.
The below chart is meant to highlight where participants agreed each feature belonged.
So for example, 100% of participants agreed that Personal Information belonged under the profile page.
After rewording these cards and changing the “Overview” category to “Dashboard”, we brought in 5 more participants to run the card sort again.
Findings
- After the changes, there was more cohesion among participants.
- We learned that the “Historical Nautical Weather Map” will need to be removed
- We learned participants largely didn't believe we needed additional pages to categorize the cards into.
- Learned that participants preferred the dashboard remain decluttered and most other features can be put under other menuing.
With our new findings, we implemented them into a new sitemap iteration.
Iteration 4
The changes brought these findings and we could see the improved cohesion in the updated chart below.
Designing and Testing
With an initial sitemap defined we built up the design. Starting with paper wireframes and progressing up to a digital low-fidelity prototype.
Using this low-fidelity design, we can put our navigable experience into users' hands and receive more detailed feedback.
We outlined a usability test plan and then sat down with 6 participants individually to have them complete some tasks based on example scenarios.
Scenario Task 1
Imagine you are about to head down to your local marina and you want to find out parking information around a Resort. Show me how you could find this information.
Scenario Task 2
Imagine you're sailing and you see rain clouds far off in the distance. Using the app what would you do to see if that weather was heading towards you?
Along with scenario tasks, we also conducted unmoderated A/B testing with the participants. This way we can identify preferable layouts, color schemes, and branding.
Applying Changes
Through these moderated in-person usability test sessions, users identified a few issues:
Issue 1
The text on all UI elements is too small
Issue 2
Confusion on the Safety Checklist
Issue 3
Confusion on the Weather Alerts menu
Issue 4
The checkmark tutorial lacked clarity and most participants mentioned they normally skip it.
Issue 5
Confusion on the Weather Alerts menu
Evidence
50% of participants directly stated that they were having issues reading the screen.
Evidence
Participants stated not realizing that they were unaware that they could customize the Safety checklist.
Evidence
Users needed to reread this menu a few times and ask several clarifying questions before fully understanding its function.
Evidence
Most users stated being confused or asked clarifying questions on one of the six tutorial checkmarks.
Evidence
Participants asked clarifying questions on this tab and most weren't sure how it was different from the other tabs present in that section
Change 1
Increase Font size and research accessibility guidelines from sites such as W3C.
Change 2
Make a better distinction between the USCG-required safety items and the user's custom list.
Change 3
Reduce the use of repetitive words such as "warn me when". Include more images and descriptors .
Change 4
Clarify and re-word each checkmark.
Change 5
Remove it and its contents will be integrated under the other tabs.
We started implementing our solutions including increasing legibility through font size and reducing repetitive terminology. We also included the decisions made during the A/B testing.
Afterward, we are left with a high-fidelity app that can still use some polishing.
Peer Reviews
To get some feedback from fellow designers, I reached out to the CareerFoundry team. Using our Slack channel I found some fellow students and asked for their feedback. They helped us fine-tone our design through small calibrations.
They pointed out many of the small inconsistencies in our design and helped us better adhere to Web Content Accessibility Guidelines (WCAG). We updated things like text line height, contrast, and spacing to improve the overall experience.
Latest Iteration
Gale's design has been fluid and constantly evolving through each iterative cycle. Thanks to user testing and consistently getting valuable feedback.
From paper prototypes to high-fidelity mock-ups, improvements were made in UI clarity, functionality, and consistency.
Through user testing, we learned what users needed, what features to prioritize, and which design decisions were valid.
For example, adjustments in terminology and information layout were made based on user feedback to enhance usability.
Additionally, feature prioritization was refined to focus on essential functionalities like real-time weather updates, aligning with user preferences.
Overall, the iterative process ensured a more user-friendly, functional, and cohesive design.
🏁What's the Next Step?
Next, we’ll be gathering more feedback from users. We want to continue to refine the app and work our way up to the first Beta prototype that can be tested by users as they sail.
