Website Response · Round 1
March 31st, 2026
01 · Our Process
Wireframes first,
then visual design
We follow a wire-first process. Structure, hierarchy, and content logic are locked down before any brand expression is applied. This keeps review conversations focused - you're never asked to evaluate visual style and page structure at the same time.
UX Wireframes
Greyscale layouts defining page structure, content hierarchy, and module arrangement - independent of color, typography, or imagery. Every page is wireframed at desktop and mobile before visual design begins. This is what you review for layout and structure.
Module System
Rather than designing each page independently, we build a library of reusable content modules. Pages are assembled from these building blocks - making the site consistent, scalable, and easy to maintain.
Visual UI Design
The Great Plains brand is applied to approved wireframe structures. Prairie green, Harvest gold, RL Limo display type - all applied to produce production-ready visual designs. The designs in this document are at this stage.
Module library - 11 reusable components
02 · Accessibility & ADA Compliance
Designed to be used
by everyone
We are building the Great Plains website to meet WCAG 2.1 Level AA - the internationally recognized standard for web accessibility, and the benchmark required for ADA compliance in financial services. Accessibility is built into every design decision from the start.
Color Contrast
All text and interactive elements meet or exceed the 4.5:1 contrast ratio for standard text, and 3:1 for large text. The Great Plains palette has been selected and tested with this in mind.
Typography & Sizing
Body text is set at minimum 16px across all pages. Line height is maintained at 1.5 or above. Text can be scaled to 200% without loss of content or functionality.
Keyboard Navigation
Every interactive element - links, buttons, form fields, menus - is reachable and operable via keyboard alone. Focus indicators are clearly visible and styled to the brand palette.
Screen Reader Support
Semantic HTML structure, proper heading hierarchy, ARIA labels, and meaningful alt text ensure the site works correctly with JAWS, NVDA, and VoiceOver.
Forms & Inputs
All form fields have associated labels. Error messages are clearly associated with their fields. Required fields are identified. No instructions rely solely on color or shape.
Motion & Animation
Animation respects the user's OS preference for reduced motion. No content flashes more than three times per second.
Brand palette - contrast ratios
| Foreground | Background | Ratio | Level | Used for |
|---|---|---|---|---|
| Plains Black | Wheat Flour | 14.6:1 | AAA | Body text, headings |
| Prairie | Wheat Flour | 5.4:1 | AA | Headings, links, labels |
| White | Prairie | 6.2:1 | AA | Nav, dark section text |
| Plains Black | Harvest | 9.2:1 | AAA | Badges, CTAs on gold |
| Harvest | Prairie | 3.4:1 | AA Large | Eyebrows, decorative (large text only) |
04 · Priority 1 - Core Templates
Ten core pages,
fully designed
These ten pages form the essential core of the site. All have been wireframed and visually designed at both desktop and mobile breakpoints. Select a page below to explore it.
Each page defaults to the Wireframe view - the structural foundation before brand is applied. Toggle to Visual Design to see the full Great Plains treatment.
05 · Priority 2 - Supporting Templates
Supporting templates,
wireframed and designed
Eight further templates support the wider site structure - category landing pages, informational content, utility pages, and specialist sections. All have been wireframed and visually designed. Toggle between Wireframe and Visual Design to compare.
06 · Copy Overview
The words behind
the design
A copy deck has been developed covering all core and supporting pages. Below is a snapshot of headline, intro, and body copy for each major page.
Full copy deck at the next stage. The copy below gives a flavor of tone of voice and messaging. The full deck - including all module body copy, CTAs, FAQs, and metadata - is available as an editable Word document and will be shared at the next stage for review and refinement.
07 · Next Steps
Where we are,
and what comes next
Completed
- UX wireframes - all Priority 1 & 2 pages, desktop + mobile
- Visual UI design - all 10 Priority 1 pages, desktop + mobile
- Visual UI design - all Priority 2 supporting templates
- Module system - 8 core modules + 3 bespoke components
- Desktop fly-out mega menu designed and documented
- Mobile navigation (hamburger + open state) fully designed
- Brand applied consistently across all UI pages
- Copy deck - all core and supporting pages
Your input and next phase
- Review this presentation and share your feedback - what's working, what needs refinement
- Copy deck review - the full Word document will be shared for your input
- Progress the visual designs across the broader page library toward a complete template set
- Build toward an interactive prototype of key member journeys
- Photography and visual asset direction, once core designs are approved