Maritime Community Feed
The UI effectively uses clear icons and distinct sections to provide a well-organized and engaging user experience tailored to maritime professionals. However, it could improve the readability of certain text elements and the discoverability of interactive features to enhance overall usability.
Public
Design Score
Polish Opportunities
Design Perspectives
0To Review
Recommended Fixes by Impact
0Total
Fixes by Category
3
Color & Contrast1
Content Readability & Clarity3
Visual Consistency, Imagery & Media2
Navigation & Structure2
Conversion & Actions2
Tone, Friendliness & Delight3
Accessibility & Input Ergonomics2
Efficiency & Cognitive Load2
Flow & States Completeness3
Strategic DesignRecommended Fixes by Impact
0Critical
1Major
19Moderate
5Minor
Unclear reference for 'Week 24' date label
Major
Ambiguous Date/Time/Timezone
The Problem
The label 'Week 24' in the bulletin title does not clarify which calendar system or starting point it refers to (e.g., ISO week number, company fiscal week). The exact date is only partly revealed faintly beneath as 'Sunday, 14 June 2026', but this is not prominent or explicitly linked.
Why it Matters
Users may be unsure about the timeline relevance of the update, especially if they rely on exact dates or week numbering conventions for scheduling or understanding the content.
How to Fix
Clarify the date format and relationship of 'Week 24' to the actual date, or show a more prominent clear date next to the week label with timezone if relevant.
Issue Highlights
Low contrast for 'Events' tab text
Moderate
Color & Contrast
The Problem
'Events' tab text uses a light grey color on a medium grey background, likely below WCAG AA contrast ratio of 4.5:1 for normal text.
Why it Matters
Users with visual impairments or in bright environments may have difficulty distinguishing this tab label.
How to Fix
Increase the contrast by using a darker text color or a lighter background for the 'Events' tab to meet at least 4.5:1 contrast ratio.
Issue Highlights
Low contrast for bulletin update description text
Moderate
Color & Contrast
The Problem
The bulletin description text uses a medium grey color against a dark green and dark blue background, likely failing WCAG AA 4.5:1 contrast ratio for normal text.
Why it Matters
This low contrast can make the bulletin content difficult to read for users with moderate visual impairments or under poor lighting conditions.
How to Fix
Use a lighter or whiter text color for the bulletin description or darken the background behind the text so that the contrast ratio improves to at least 4.5:1.
Issue Highlights
Low contrast for 'Read more' button text
Moderate
Color & Contrast
The Problem
'Read more' button text uses light text on a dark button background but the button background is semi-transparent over a busy gradient. This reduces effective contrast below WCAG AA 4.5:1.
Why it Matters
Users may struggle to read the button label, especially users with low vision or color blindness.
How to Fix
Use a solid button background with enough contrast against the text, or increase text boldness or size, or add a strong contrast outline or shadow to ensure readability.
Issue Highlights
Mixed font weights and styles in Bulletin card labels
Moderate
Visual Consistency, Imagery & Media
The Problem
The labels 'NEW', 'QUIZ', and '+40 Coins' on the Bulletin card use different font weights, colors, and background styles, creating inconsistent visual hierarchy within the same component.
Why it Matters
Users may find the labeling confusing or visually cluttered, reducing clarity about which labels are most important or related.
How to Fix
Standardize label styles to use consistent font weights, background shapes, and colors across all labels within the Bulletin card.
Issue Highlights
Unlabeled icons in header and bottom navigation
Moderate
Visual Consistency, Imagery & Media
The Problem
Several icons such as the coin icon with '0', search, bell notification, and profile avatar at the top, as well as icons like the heart-plus and lifebuoy in the bottom nav, lack explicit labels or tooltips visible in the screenshot, potentially making their purpose ambiguous.
Why it Matters
Users unfamiliar with icon meanings may hesitate or make errors, increasing cognitive load and reducing usability.
How to Fix
Add visible text labels or accessible tooltips to all icons, ensuring they clearly communicate their function.
Issue Highlights
Overloaded top-right action icons
Moderate
Navigation & Structure
The Problem
The notification bell, coin counter, search icon, and profile icon are placed closely together in the top-right corner, creating many small clickable elements competing for attention and touch space.
Why it Matters
Close proximity of multiple interactive elements can cause users to mistakenly tap the wrong icon, leading to frustration and inefficiency.
How to Fix
Increase spacing between these icons or group them logically under a single expandable menu to reduce clutter and improve touch accuracy.
Issue Highlights
Vague CTA text 'Read more' on Bulletin item
Moderate
Conversion & Actions
The Problem
The primary call to action on the Bulletin card uses the text 'Read more', which is vague and does not clearly specify what the user will get or what content will be accessed.
Why it Matters
A vague CTA can reduce user motivation to click as the benefit or next step is unclear, lowering conversion or engagement rates.
How to Fix
Use more descriptive and specific CTA text that clearly conveys the value, such as 'Read full update' or 'Get detailed news'.
Issue Highlights
Small filter button tap targets
Moderate
Accessibility & Input Ergonomics
The Problem
The 'Date', 'Vessel', and 'Designation' filter buttons appear small and tightly packed, likely smaller than the recommended minimum touch target size.
Why it Matters
Small buttons can make it hard for users to tap accurately, causing frustration and errors.
How to Fix
Increase the padding around these buttons, ensuring each tap target is at least 44x44 pixels, and add more spacing between them.
Issue Highlights
Notification and profile icons are close horizontally
Moderate
Accessibility & Input Ergonomics
The Problem
The search, notification bell, and profile icon in the top right corner have little horizontal spacing and may cause accidental taps on adjacent icons.
Why it Matters
Targets placed too closely cause user frustration from tapping the wrong element and increase error rates.
How to Fix
Increase horizontal spacing and padding around these icons to separate their tap areas by at least 8-10 pixels.
Issue Highlights
Multiple Filters and Toggle Options Increase Interaction Steps
Moderate
Efficiency & Cognitive Load
The Problem
The screen offers multiple filter buttons (Date, Vessel, Designation) plus a segmented toggle for Feed and Events, requiring several micro-clicks before the user reaches desired content.
Why it Matters
Users have to make multiple selections before viewing relevant content, increasing cognitive load and potentially frustrating users seeking quick information.
How to Fix
Consider consolidating filter options or allowing default views that intelligently surface relevant content without user filtering; reduce the need for toggling between Feed and Events initially.
Issue Highlights
Unclear Purpose of AI Query Box
Moderate
Flow & States Completeness
The Problem
The input box with placeholder 'Ask about company SMS procedures...' and 'AI' button is visible but no instructions or next steps are shown for after submitting a query.
Why it Matters
Users might be unsure how to interact with the AI feature or what to expect after submitting their input, reducing usage or causing confusion.
How to Fix
Add clear instructions or reactive UI next steps to indicate what happens after asking a question, such as showing a loading state or response area.
Issue Highlights
Insufficient visual hierarchy between bulletin title and summary
Moderate
Content Readability & Clarity
The Problem
The bulletin heading 'Seafarers Sunday Update - Week 24' and the summary text below it have similar weight and size, making it challenging to quickly distinguish the title from the supporting content.
Why it Matters
Users may struggle to quickly identify the main topic or headline, which can reduce engagement and ease of scanning.
How to Fix
Increase font size, weight, or color contrast for the bulletin title relative to the summary text to create a stronger hierarchy.
Issue Highlights
Lack of clear user role or environment indicator
Moderate
Orientation Missing (Environment/Role/Location)
The Problem
There is no visible indication of the current user role or environment context on this screen, apart from small profile and vessel designations. The app lacks a clear header or breadcrumb to show where the user is within the app hierarchy or their user role.
Why it Matters
Without clear contextual orientation, users may be uncertain about their current location or role, reducing confidence and increasing chance of navigation errors.
How to Fix
Add a prominent title or breadcrumb trail that clearly states the current section or user role context (e.g., dashboard > feed, or user role), ideally near the top header area.
Issue Highlights
No visible active state for top tab navigation
Moderate
Navigation & Structure
The Problem
While the Feed and Events tabs are visible, the Events tab has a muted greyed appearance, which might be confused as disabled rather than inactive. The active state for the Feed tab uses a bright green background but lacks additional cues like an underline or bold text to reinforce which tab is active.
Why it Matters
Unclear active states on navigation tabs can confuse users about which content they are viewing, increasing cognitive load and reducing user confidence.
How to Fix
Enhance the active tab style with stronger visual distinction such as underlines or bolder typography while ensuring inactive tabs do not appear disabled but just unselected.
Issue Highlights
AI input bar lacks privacy or security reassurance
Moderate
Tone, Friendliness & Delight
The Problem
The AI input bar invites the user to ask about 'company SMS procedures' but does not include any trust signal about how the data will be used or protected, which is sensitive given potential company policy-related queries.
Why it Matters
Users may hesitate to input potentially sensitive or confidential information without reassurance about data privacy and security, reducing engagement.
How to Fix
Add a subtle trust message near the AI input bar indicating data privacy and confidentiality, such as 'Your queries are private and secure' or a link to a privacy statement.
Issue Highlights
Small navigation tab toggle targets
Moderate
Accessibility & Input Ergonomics
The Problem
The 'Feed' and 'Events' tab toggle buttons appear quite narrow horizontally and may be smaller than recommended touch target sizes (minimum 44x44 pixels).
Why it Matters
Smaller tap targets can cause difficulty for users with limited dexterity or on smaller screens, increasing the risk of input errors.
How to Fix
Increase the tap target size for these toggle buttons by adding padding around the text to ensure a minimum target size of 44x44 pixels.
Issue Highlights
Filter Buttons Lack Clear Priority or Default
Moderate
Efficiency & Cognitive Load
The Problem
The filter buttons Date, Vessel, and Designation appear equally weighted without indication of priority or a default that could simplify user choice.
Why it Matters
Users must decide among multiple filter dimensions simultaneously, which can slow down decision-making and add confusion.
How to Fix
Prioritize a default filter or pre-selected option based on user behavior or context, or provide contextual guidance to reduce decision points.
Issue Highlights
Unclear Instruction After Reading Bulletin
Moderate
Flow & States Completeness
The Problem
The bulletin item shows a 'Read more' button but does not clearly indicate what happens after reading or how to navigate back or further.
Why it Matters
Users may be uncertain about how to proceed after reading the bulletin, leading to confusion or stopping engagement.
How to Fix
Provide clearer follow-up options or indications of next steps after interacting with the bulletin content, such as a back button or suggested further reading.
Issue Highlights
Unread notifications icon lacks clear wording or tooltip
Moderate
Strategic Design
The Problem
The bell icon shows a red badge with '9+' but lacks an accessible label or tooltip visible on the screen for users to understand what the notifications relate to.
Why it Matters
Users may struggle to identify the purpose or source of notifications just from the icon, reducing clarity on what actions are needed.
How to Fix
Add an accessible label or tooltip that briefly describes what the notifications pertain to, helping users know what to expect on tap.
Issue Highlights
Feed and Events tabs visually blend, reducing immediate clarity
Minor
Strategic Design
The Problem
The segmented control uses a subtle gray background and the unselected 'Events' tab is a muted gray with similar contrast. This makes the tab selection less visually distinct at first glance.
Why it Matters
Users scanning for tabs may find it harder to immediately confirm which tab is active, slowing navigation and causing subtle confusion.
How to Fix
Increase contrast between the active and inactive tabs, for example using a brighter background or color for the active tab and a lighter background for the inactive tab.
Issue Highlights
Toggle buttons and filter tags misaligned vertically
Minor
Visual Consistency, Imagery & Media
The Problem
The rectangular toggle for 'Feed' and 'Events' is horizontally centered, but the filter tags below it ('Date', 'Vessel', 'Designation') appear visually off-grid and do not align neatly with the toggle's edges or each other.
Why it Matters
Misalignment creates a less polished and less professional appearance, which can distract users and reduce trust in the UI.
How to Fix
Adjust horizontal spacing and alignment of the filter tags to line up consistently with the toggle button and each other.
Issue Highlights
Vague CTA text 'See how to earn' on Rewards banner
Minor
Conversion & Actions
The Problem
The CTA on the rewards banner uses 'See how to earn' which is somewhat vague and does not explicitly indicate the action or benefit of clicking.
Why it Matters
Vague CTAs can lead to uncertainty, reducing clicks and engagement with rewards content.
How to Fix
Use action-oriented and clear text like 'Learn to Earn Rewards' or 'Start Earning Coins Today' to clarify the value.
Issue Highlights
Reward banner color scheme lacks inviting warmth
Minor
Tone, Friendliness & Delight
The Problem
The 'Engage. Earn. Get rewarded.' banner uses dark green and brownish tones with an image of coins and treasure chest, which may not convey the warm, encouraging, and friendly tone typical for rewards messaging.
Why it Matters
The visual tone can affect user motivation and emotional engagement; a colder or too muted palette might reduce enthusiasm to participate in rewards activities.
How to Fix
Consider using brighter and warmer colors (like gold, yellow, or orange highlights) and more uplifting imagery to evoke delight and excitement.
Issue Highlights
Search icon placed close to coin balance but with unclear interaction affordance
Minor
Strategic Design
The Problem
The search icon is visually small and placed adjacent to the coin balance and profile icons but does not visually differentiate itself as a tappable search field or button.
Why it Matters
Users may overlook or miss that this icon is interactive and for searching, potentially reducing discoverability of search functionality.
How to Fix
Increase size or add visual affordance like a text input or labeled button style to highlight the search action clearly.
Issue Highlights