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.
We wanted to learn how they got into the hobby and what tools they use to make their day on the water easier.
We heard a myriad of responses, most hobbyists have to use more than one app at a time while sailing. 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 to provide a concise experience that doesn't require bouncing between multiple apps.
Laying out Solutions
After talking to a hobbyist, we downloaded some of the apps they mentioned such as Wavve Boating: Boat Navigation and MyRadar.
Using these two apps and a handful of similar ones, we collected a list of potential features and turned them into this first iteration of our Sitemap.
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.
After this first iteration, we had some of our issues (listed below) and made corresponding changes then crafted a second iteration.
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
Next, we decided to run a card sort to learn what users believed missing from the app or what parts of the app are confusing.
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.
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. This sitemap was reasonably slimmed down and maintained the minimum need to solve our initial problem.
Iteration 3
The changes brought these findings and we could see the improved cohesion in the updated chart below.
Designing and Testing
Using the newest iteration of our sitemap, we began to build the app. Starting with paper wireframes, we drafted a mobile and desktop mockup.
These sketches display the home screen dashboard and navigation into detailed information on points of interest found on the map.
These low-fidelity prototypes navigate from the home screen to various other pages.
After sketching a few iterations, the design progressed to digital (shown below).
- The first row shows how to navigate to the Point of Interest detail page.
- The second row shows how to navigate to the Social tab for showing featured popular locations near by.
- The third row shows how to configure notifications for weather alerts.
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. Listed from left to right in order of severity to usability. Issue 1 has the largest impact across the app but It was very helpful to identify issues like #2 to resolve our initial problem.
Issue 2: Confusion on the Safety Checklist
Resolving this issue is especially important as we want to minimize users' desire to turn to another application to find information as stated in our problem statement.
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.
Our original goal was to make an app that provided a concise experience that doesn't require bouncing between multiple apps.
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.
