# Give me feedback on my whole website: https://playflyway.com/ [Open the live Fudge conversation](https://design.withfudge.com/share/0ovxu006vj/give_me_feedback_on_my_whole_website_https_playflyway_com/) Last updated: 2026-08-01 # Flyway website feedback Flyway is a **product-specific field-learning site**, not a generic marketing template. Its strongest choice is the clear learning model—**PRIME → SHAPE → MOVE → MARK → COMMIT**—which gives the product a memorable point of view. ![Flyway homepage — desktop full-page review](https://api.withfudge.com/v1/shares/1b04b526-808f-4fb5-8db3-e52bb28c85c4/attachments/18903ffc3b8fefa5e215f27a/1.jpg) ![Flyway bird quizzes — mobile full-page review](https://api.withfudge.com/v1/shares/1b04b526-808f-4fb5-8db3-e52bb28c85c4/attachments/18903ffc3b8fefa5e215f27a/2.jpg) The homepage and field-skills captures stop slightly before the full document height, so I’m treating their lowest sections cautiously. The bird-quizzes page was captured completely on desktop and mobile. ## What is working - **The product has a real point of view.** The method vocabulary feels authored for birders rather than borrowed from a generic productivity app. - **The visual language is coherent.** Deep forest green, pale green surfaces, restrained borders, and small uppercase labels create a recognizable field-guide atmosphere. - **The bird-quizzes page explains the product well.** It moves from the purpose of practice, to quiz types, to the identification loop, then to questions and navigation. - **The information is unusually specific.** Regional quizzes, hotspot quizzes, bird-call practice, and “toughest birds” give visitors concrete entry points instead of vague promises. ## Captured pages [![Curated Supply](https://pin.fontofweb.com/4064?format=jpg)](https://design.withfudge.com/share/pin-4064) [Curated Supply](https://design.withfudge.com/share/pin-4064) [![COLLINS | COLLINS](https://pin.fontofweb.com/4736?format=jpg)](https://design.withfudge.com/share/pin-4736) [COLLINS | COLLINS](https://design.withfudge.com/share/pin-4736) [![Sublime — A second brain with a soul](https://pin.fontofweb.com/4950?format=jpg)](https://design.withfudge.com/share/pin-4950) [Sublime — A second brain with a soul](https://design.withfudge.com/share/pin-4950) ## Priority improvements ### 1. First change: fix the mobile bottom navigation overlap In the supplied bird-quizzes screenshot, the fixed bottom navigation sits over the first “The Compass” card. That makes the page look unfinished and hides content while scrolling. Add enough bottom scroll space for the navigation height plus the device safe area, or make the bottom navigation non-overlaying on public explanatory pages. The app-style navigation makes sense for an operating surface, but it should never cover the content it is meant to help users reach. ### 2. Give every major page one unmistakable starting action The bird-quizzes page presents: - “Start a regional bird quiz” - “Explore the Method” - four quiz types - another “Start practicing” CTA - “See Field Intelligence” The content is useful, but the visitor has to decide among too many valid next steps. Make one action dominant: - **Primary:** “Start a regional bird quiz” - **Secondary:** “See how the method works” - Move the other quiz types below as alternatives for people who already know their goal. This is the main lesson to borrow from **Sublime**: preserve the depth, but make the first move obvious. ### 3. Separate the public website navigation from the product navigation The desktop layout uses a substantial left rail, while mobile uses a persistent bottom navigation with Home, Learn, Practice, Explore, and Progress. That is appropriate for an app, but the public website is also trying to introduce the product, explain the method, publish guides, answer questions, and expose destinations. For the public-facing layer, reduce the top-level choices to something like: - How Flyway works - Practice - Field guides - Explore - About Then reserve the denser app navigation for logged-in or task-focused screens. This will reduce the feeling that every page is an application dashboard. ### 4. Reduce the repeated card pattern The site relies heavily on rounded bordered cards: - quiz types - method steps - navigation groups - FAQ rows - destination pills The individual cards are clean, but when everything is boxed, the page loses hierarchy. The four quiz options especially read as equal-weight modules even though “Regional Bird Quiz” is the most natural starting point. Use stronger variation: - Feature one starting quiz with a larger visual treatment. - Group the remaining options under “Other ways to practice.” - Present the PRIME–COMMIT sequence as a connected process rather than five independent cards. - Use plain text sections where a card adds no interaction value. This is where **Curated Supply** is a useful reference: not every item needs the same container treatment. ### 5. Add more purposeful birding media The current experience is predominantly text, cards, icons, and gradients. That makes the product clear, but it undersells the sensory nature of birding. Add one meaningful media moment per major page: - a real bird photograph paired with identification reasoning - a sound waveform or short audio interaction on call-related pages - a field-map fragment for regional quizzes - a silhouette comparison for shape-based learning - a marked-up observation showing what detail changed the identification Avoid decorative stock photography. The media should demonstrate the reasoning Flyway teaches. ### 6. Make the typography hierarchy less dependent on repeated labels The rendered site uses a system sans stack, with a strong desktop scale: approximately **60px H1**, **40px H2**, and **17px body text**. The scale is confident and readable. The weaker point is repetition: many sections use small green uppercase eyebrows such as “PRACTICE WITH A PURPOSE” and “BIRD QUIZ QUESTIONS.” They help orientation once or twice, but across the site they begin to feel like a design system ornament rather than meaningful navigation. Keep the labels for: - major changes in subject - method stages - product categories Remove them from sections where the heading already explains the context. ## Colors - `#ffffff` - `#15231c` - `#17603a` - `#586b61` - `#1f7a46` - `#e0e6e0` - `#cfe6d7` The current rendered details show a strong foundation: white canvas, very dark green ink, saturated green links, muted sage secondary text, and pale green structural accents. I would keep this palette and improve hierarchy before changing the colors. ```fudge-values {"title":"Rendered design anchors","values":[{"category":"Layout","label":"Desktop navigation rail","value":"248px"},{"category":"Layout","label":"Header padding","value":"9px 24px"},{"category":"Typography","label":"Body text","value":"17px / 27.2px"},{"category":"Typography","label":"Desktop H1","value":"60px / 61.8px / 700"},{"category":"Typography","label":"Desktop H2","value":"40px / 44.8px / 700"},{"category":"Shape","label":"Header control radius","value":"8px"},{"category":"Shape","label":"Button radius","value":"11px"},{"category":"Shape","label":"Navigation pill radius","value":"999px"}]} ``` ## Mobile-specific review The mobile version is generally well structured: content stacks naturally, buttons are easy to find, and the quiz cards remain readable. The main issue is the persistent navigation layer covering content. The mobile footer is also very long. It contains many useful links, but it becomes a second navigation system after the page has already provided a header and bottom bar. Prioritize: 1. The method 2. Practice 3. Learn 4. Explore 5. Help and legal information Move destination chips and popular searches below that core structure, or collapse them into a smaller discovery module. ## Contrast check The page’s current inspection exposed exact color values, but not a usable retained contrast observation for deterministic ratio calculation. I therefore have not substituted a ratio from unrelated colors. | Element | Foreground | Background | Size / weight | WCAG | AA | AAA | APCA | |---|---|---|---|---|---|---|---| | Body text — desktop | `#15231c` | `#ffffff` | 17px / 400 | Unresolved — contrast observation unavailable | Unresolved | Unresolved | Unresolved | | Body text — mobile | `#15231c` | `#ffffff` | 17px / 400 | Unresolved — contrast observation unavailable | Unresolved | Unresolved | Unresolved | | Header and navigation text | `#15231c` | `#ffffff` | 13–14px / 600–700 | Unresolved — contrast observation unavailable | Unresolved | Unresolved | Unresolved | | Muted supporting text | `#586b61` | `#ffffff` | 12.5–17px / 400 | Unresolved — contrast observation unavailable | Unresolved | Unresolved | Unresolved | ## Vibe-coded appearance check **Overall visible-design verdict: product-specific.** | Visible occurrence | Judgment | Consequence | |---|---|---| | PRIME → SHAPE → MOVE → MARK → COMMIT method | **Earned** | Gives Flyway a distinct mental model and makes the product easier to remember. | | Regional, hotspot, call-and-song, and toughest-birds quiz types | **Earned** | These options reflect real birding tasks rather than generic feature categories. | | Repeated uppercase green eyebrow labels | **Neutral → slightly generic** | They create rhythm, but frequent use makes the system feel more templated than necessary. | | Repeated rounded cards for every section | **Mixed** | Cards help scanning, but equal containers flatten importance and make the page longer. | | Emoji-style quiz icons | **Neutral** | They communicate quickly, but a consistent bird-specific icon or illustration system would feel more intentional. | | Destination pills in the footer | **Earned** | They work as compact discovery links because the destinations are genuinely useful. | | Persistent mobile bottom navigation | **Earned for the app, problematic on this page** | It supports operating the product, but covering the first card harms the public explanatory journey. | | Gradients and soft shadows | **Neutral** | They are restrained enough not to dominate, but they should remain secondary to bird imagery and learning interactions. | The highest-impact sequence is: 1. Fix the mobile navigation overlap. 2. Choose one primary starting action per page. 3. Simplify the public navigation. 4. Reduce card uniformity. 5. Add real birding media that demonstrates the method. --- Yes—Flyway has enough identity to move toward a much more **editorial, naturalist, field-journal experience** without becoming a generic “nature website.” These are the strongest directions I’d explore. ## Captured pages [![The Naturalist’s Library](https://pin.fontofweb.com/10173?format=jpg)](https://design.withfudge.com/share/pin-10173) [The Naturalist’s Library](https://design.withfudge.com/share/pin-10173) [![AfterQuery](https://pin.fontofweb.com/3986?format=jpg)](https://design.withfudge.com/share/pin-3986) [AfterQuery](https://design.withfudge.com/share/pin-3986) [![Smithsonian Magazine: Explore History, Science, Arts & Culture](https://pin.fontofweb.com/9547?format=jpg)](https://design.withfudge.com/share/pin-9547) [Smithsonian Magazine: Explore History, Science, Arts & Culture](https://design.withfudge.com/share/pin-9547) [![Bruket Fjellhamar - Fonts In Use](https://pin.fontofweb.com/6843?format=jpg)](https://design.withfudge.com/share/pin-6843) [Bruket Fjellhamar - Fonts In Use](https://design.withfudge.com/share/pin-6843) [![Fix Studio | Home](https://pin.fontofweb.com/357?format=jpg)](https://design.withfudge.com/share/pin-357) [Fix Studio | Home](https://design.withfudge.com/share/pin-357) ## 1. Naturalist archive **Best for:** the homepage and About page. Borrow the feeling of **The Naturalist’s Library**: - Deep green or parchment-like sections - Large bird plates, silhouettes, or engraved-style illustrations - Faint habitat drawings as background texture - A bold, slightly unusual display face for major headings - Small annotations that feel like specimen notes For Flyway, the hero could become: > **Learn to notice birds differently.** with one large bird illustration or field photograph on the right, rather than a mostly abstract interface preview. Turn the five-part method into a sequence of illustrated “plates” instead of five similar cards. Each stage could have: - one visual mark - one short explanation - one field example - one link to practice it This would make the method feel like a body of knowledge, not just a navigation system. ## 2. Editorial birding magazine **Best for:** bird quizzes, guides, and discovery pages. The Smithsonian-style reference suggests treating Flyway’s content as an editorial publication rather than a collection of app modules. Instead of presenting every quiz as an equal card, use: - One large featured quiz - Two or three smaller supporting stories - Region, habitat, skill, and difficulty as metadata - Editorial headlines rather than generic feature names - A clear “start here” story at the top For example, the quiz index could have: - **Featured:** a large regional quiz with a bird photograph - **Practice by skill:** call, shape, movement, habitat - **Explore by place:** region and hotspot links - **For returning birders:** difficult or specialized quizzes This gives the page a stronger reading order and makes the content feel richer without adding more content. ## 3. One dramatic specimen per page **Best for:** the homepage hero and each method page. The AfterQuery reference uses a very simple composition: quiet copy on one side, one oversized natural-history image on the other. Flyway could use that pattern for the five method pages: - **PRIME:** a bird barely visible in foliage - **SHAPE:** a silhouette or side profile - **MOVE:** a blurred flight image - **MARK:** a close crop of plumage detail - **COMMIT:** a complete bird portrait or field-note image The important idea is not the exact art style. It is the **single visual subject with one clear lesson**. That would give each method page its own memory and reduce reliance on repeated rounded panels. ## 4. Field-guide index **Best for:** Guides, FAQs, releases, and search. Use the Bruket-style index as inspiration for utility-heavy areas: - More whitespace - Fewer bordered cards - Strong alphabetical or categorical grouping - Compact metadata - Large, clear section titles - A narrow reading column for explanations This would create a useful contrast with the more atmospheric homepage. The site could feel like: - **Homepage:** immersive field journal - **Practice pages:** focused learning tool - **Guides:** precise reference library - **Releases:** compact chronological log Not every page needs the same visual density. ## 5. Art-directed field stories **Best for:** About, releases, and advanced learning content. The Fix Studio reference suggests using large visual panels and asymmetry rather than a conventional centered page. For Flyway, this could become a “field story” format: 1. Large photograph or illustration 2. Short observation 3. What to notice 4. The mistaken assumption 5. The identification decision 6. Link to practice that skill This format would show the value of Flyway’s method instead of only explaining it. A visitor should be able to see the process happening on a real bird. ## A stronger visual system for Flyway I’d combine the directions like this: ## Colors - `#18352a` - `#f4f0e5` - `#d97832` - `#e3eadf` - `#1f7a46` - `#171b18` **Proposed palette direction:** keep the existing forest-green foundation, add a warm paper tone for editorial sections, and use one warm orange accent sparingly for important actions or field annotations. ### Recommended page roles | Page | Visual direction | |---|---| | Homepage | Naturalist archive | | Bird quizzes | Editorial magazine | | Method pages | One dramatic specimen | | Guides | Field-guide index | | About | Art-directed field story | | Releases | Typographic chronological log | ## The most promising redesign concept If I were choosing one direction, I’d use: > **“A living field guide, not an app landing page.”** That means: - Real bird imagery before interface decoration - The method shown through examples, not only labels - Editorial layouts for content discovery - A single primary action per page - Cards reserved for genuinely selectable things - A calmer, more typographic structure for reference content ## Vibe-coded appearance check **Overall visible-design verdict: product-specific.** The strongest inspiration is not to add more fashionable effects. It is to make Flyway’s existing specificity more visible: - The method is **earned** and should become the central visual story. - The birding categories are **earned** and should become editorial entry points. - The repeated card treatment is **neutral but overused** and should be replaced with image-led and index-led layouts. - The green palette is **earned**; it needs richer imagery and stronger composition more than a new color system. - The app-like navigation is **earned for practice screens**, but should be quieter on public storytelling pages.