Wood County Park District — Part Two: From Deep Navigation to Streamlined Pages, and Translating Figma into Flynt

When I first wrote about the Wood County Park District redesign, the project was still in motion. Today the site is live at wcparks.org, and this follow-up reflects on how the final product evolved—both visually and structurally—from the earliest design conversations to the finished build.

A lot changed along the way, especially as the design matured and the real content came into view. What began as a very deep, nested navigation concept eventually became a streamlined layout with longer, more content-rich pages. Not only did this simplify the user experience, it also aligned better with accessibility, mobile behavior, and how visitors actually browse parks and programs.

This post also covers the translation work: taking a Figma design and turning it into FlyntWP components, custom post types, and accessible, production-ready front-end code. The distance between design and implementation is always larger than it appears on paper—and this project is a great example of why.

⸻

A Shift in Structure: From Deep Architecture to Slick Navigation

The earliest design ideas explored a very deep page hierarchy. Parks → Trails → Features → Amenities → Activities → etc. In practice, this created two problems:

• Too many layers for users to click through, especially when someone just wants to know: “Where is this park?” or “Is this trail open today?”
• Accessibility and indexing challenges. Deep navigation makes it harder for screen readers to present context, and harder for visitors to return to previously visited park detail sections.

As we moved deeper into content planning, the team realized a simpler format worked better:

• Fewer levels of hierarchy

• Longer pages with richer sections

• Scroll-friendly layouts

• On-page navigation for context

• Repeatable blocks of structured content using custom post types

This cleaner approach delivered two major wins:

• Better mobile experience
• Scrolling beats tapping through multiple navigation levels—especially outdoors, on phones, where most visitors actually use the site.
• Clearer content relationships
• Users see the story of each park or program in one place rather than navigating endlessly through tiny subpages.

⸻

Collaborative Design: Working Directly With the Designer

One of the best parts of this project was working closely with the designer. Her work set the tone for the entire site—color, typography, illustration, and the subtle visual language of the parks district.

But translating a Figma file into a real WordPress system takes more than copying pixel-perfect visuals:

• White space behaves differently in a CMS
• Components must resize gracefully at every breakpoint
• Typography choices must meet WCAG contrast
• Button styles must remain consistent across dynamic content
• Interactive elements need recognizable patterns and focus states
• The design system must withstand real content, not placeholder text

There were many moments where we reviewed layouts together and adjusted spacing, hierarchy, or contrast. The Figma design was the foundation—but building a living, editable site requires flexibility on both the design and development side.

Translating Figma into FlyntWP: Component by Component

This was the first large-scale build where we used FlyntWP—a component-driven WordPress theme framework that uses:

• Timber/Twig templating
• Advanced Custom Fields (ACF)
• Modular components, one per “row”
• A design-system mindset
• Highly structured field groups to enforce consistency

Each Figma section became a Flynt component, and each component required careful implementation:

• responsive behavior
• accessible markup
• editable fields for the client
• appropriate constraints to keep things consistent
• performance considerations (lazy-loading, background images, SVGs)

Some components—like featured park rows, program spotlights, multi-column sections, hero banners, and tab systems—took significant time to get right. The design called for specific spacing, layering, illustrations, and animations that don’t exist “out of the box.”

Accessibility Adjustments Were Essential

To match the design while ensuring WCAG compliance, several things had to be adapted:

• Colors were adjusted to meet contrast ratios
• Typography hierarchy was re-evaluated for screen reader clarity
• Focus states were standardized
• Decorative illustrations had to be marked as aria-hidden
• Motion and animations needed fallbacks or reduced-motion alternatives
• Complex interactive elements were refactored with semantic roles
• Breadcrumbs and page-context cues were added for deeper pages

This is the part of the job that rarely shows up in Figma—but makes a huge difference for real users.

⸻

Custom Post Types: Making the Content Future-Proof

For searchability, consistency, and client editing, multiple custom post types were introduced, including:

• Parks
• Programs
• Events
• On-Demand Experiences (added later using your approved slug on_demand)
• Alerts / Notices
• Board / Staff

These structured post types allowed each component to pull consistent, predictable data—a major reason the site remains maintainable after launch.

In Flynt, CPTs pair naturally with components. Each row on a page can query from structured data, ensuring that future content fits within the existing design system without breaking layouts.

⸻

Creative Liberty: Animation, Artwork, and Personality

One of the enjoyable parts of the build was adding subtle enhancements that weren’t in the original design but helped bring the site to life:

• gentle scroll animations
• humorous artwork or playful illustrations
• micro-interactions for cards and filters
• dynamic park icons
• small touches that reinforce the personality of the park district

These enhancements were used sparingly to keep the site fast and accessible—but where appropriate, they gave the site warmth and movement.

⸻

Final Thoughts

The final wcparks.org site is the result of:

• a thoughtful content strategy shift
• collaborative design refinement
• a modular FlyntWP implementation
• attention to accessibility and performance
• creative flourishes added during build
• and a structure that the client can sustainably manage

Moving from a deep navigation plan to a flatter, component-driven layout created a better UX for park visitors, allowed for mobile-first behavior, and made the site easier to maintain long-term.

This project represents the best kind of collaboration: design and development working hand in hand to create a site that serves the community and stands up to real-world use.