Design review: clarify ratings and strengthen visual hierarchy

Summary

Review and address the design feedback collected from the replies to this X post.

The feedback points to several real issues, especially the presentation of ratings, page hierarchy, bottle imagery, and a few responsive/layout bugs. Some proposed solutions should be tested or adapted rather than implemented literally.

Product rules to preserve

• A tasting is one of five named bands. It is not a five-star rating.
• A review is an exact whole-number score from 0–100.
• Community aggregates must be clearly different from an individual's tasting or review.
• Peated should remain reference-first. Whisky data and bottle imagery should supply most of the character; decorative texture should not compete with the content.

See docs/architecture/ratings.md, DESIGN.md, and docs/features/bottle-presentation.md.

Priority 0: rating clarity

• Replace the five-cell tasting-band graphic. Selecting one of five cells reads as “3/5,” while filling the first three cells would read even more strongly as a five-point score.
• Present tasting bands by name, with the range available where it helps explain the system (for example, Very good · 85–89).
• Keep exact reviews explicitly formatted as /100.
• Make individual and community ratings unambiguous in labels and feed language.
• Update activity language to read as a person’s action, such as dcramer tasted … · Very good, while reserving “Bottle rating” for an aggregate.
• Confirm that the middle tasting band does not visually imply a neutral or merely “decent” result. The name Very good is intentional; the misleading ordinal graphic is the problem.

Priority 1: confirmed bugs and layout problems

• Scope loading skeletons to genuinely asynchronous content and keep known page chrome visible. The Activity loading state currently drops the known title, tabs, and rail.
• Remove duplicate and unnecessary dividers on tasting detail, including the two-divider state when there is no description. Prefer spacing and grouping.
• Fix the ultra-wide login layout. At 2560×1440 the intro and form are pushed apart by a large dead area. Constrain and center the overall composition or cap the intro column.

Priority 2: imagery and content hierarchy

• Make the bottle image a primary element on tasting detail rather than a thumbnail-sized supporting element.
• Rebalance bottle detail so the bottle is prominent without pushing it below the useful content or leaving the page visually empty.
• Increase activity-feed bottle images modestly and reduce the excessive left indentation of entry content.
• Keep catalog rows compact enough to scan. “Bigger everywhere” should not override catalog density.
• Put a tasting’s rating before its review text in activity and other repeated rows. Tasting detail already follows this order.
• Improve scanability through stronger grouping, type hierarchy, and spacing. Existing text contrast passes WCAG; the issue is hierarchy, not unreadable foreground colors.

Priority 3: navigation and search

• Simplify the relationship between global navigation, page title, and tabs. Activity and other task screens should use compact titles; bottle identity pages can retain a larger title.
• Use one stable global-header composition rather than changing the logo/navigation relationship between route types.
• Give the current navigation state a stronger cue using the existing amber accent and an indicator or underline, not weight and a small shade change alone.
• Give the logo and search field more space. Consider placing search toward the right side of the header where the viewport permits.
• Move the desktop bottle search above the results and make it the clear primary task. Mobile already does this well.
• Keep the existing Category and Age facets discoverable near search.
• Treat “single malts I have not tried” as a separate personalized discovery feature, not as a small search-layout adjustment.
• Anchor “What have you tried?” to the Activity header or align it more deliberately with the rail.

Priority 4: polish and experiments

• Move Toast closer to the tasting author/rating and make it easier to notice, while keeping it secondary to the content. Do not make it the page’s primary top-right action.
• Avoid a decorative hover-only glass-clink interaction unless it adds clear feedback and has an equivalent touch/keyboard state.
• Increase vertical spacing between rows on tasting tabs (roughly 16px to 24px is worth testing).
• Align the visual treatment of dropdowns and overflow menus. Dense-list kebabs should not use bright amber at rest.
• Surface the existing whisky-glass glyph, favicon, amber accent, bottle imagery, and typography more consistently. Identity is underexposed, not absent.
• Do not add a global old-label background texture. If texture is explored, keep it subtle and limited to brand or editorial moments so it does not reduce data clarity.
• Explore a secondary map view for distilleries, with clustered markers and a list fallback.
• Validate coordinate coverage and user value before building a bottler map; bottler location is less directly useful than distillery location.

Verification

• Review desktop, mobile, light, and dark themes for Activity, bottle catalog, tasting detail, bottle detail, and login.
• Verify loading states with throttled responses rather than static screenshots alone.
• Confirm ratings remain faithful to the domain rules and are understandable without prior knowledge.
• Run automated accessibility checks, then manually verify focus, selected navigation states, touch targets, and keyboard behavior.

Recommended implementation order

1. Rating language and removal of the five-cell graphic.
2. Tasting-detail imagery and divider cleanup.
3. Activity hierarchy, rating placement, indentation, and imagery.
4. Global header and current-navigation state.
5. Desktop bottle search and ultra-wide login.
6. Toast polish and the distillery-map experiment as separate follow-up work.

Start by reading docs/architecture/ratings.md, DESIGN.md, and docs/features/bottle-presentation.md to understand the product rules. Then review the Activity, bottle catalog, tasting detail, bottle detail, and login entry points, along with the remaining unchecked priorities. Done means the specified hierarchy, navigation, imagery, search, responsive behavior, and accessibility checks are validated across desktop, mobile, light, and dark themes.