Illinois Department of Innovation & Technology WebsiteWireframe Mock-Up
A conceptual wireframe demonstrating our approach to user experience design, information architecture, accessibility, and responsive design for a hypothetical State agency website. Prepared in response to RFP Section F.4.
Wireframing Methodology
Our wireframing process is grounded in evidence — not assumptions. Before a single wireframe element is placed, we conduct structured discovery to understand the users, their tasks, and the agency's mission objectives. This ensures every layout decision is traceable to a user need or a measurable outcome.
We follow a five-phase methodology: Discover → Define → Sketch → Validate → Refine. Each phase produces artifacts that feed directly into the next, creating a continuous feedback loop between research findings and design decisions.
Information Architecture
Our IA methodology begins with the user's mental model, not the agency's organizational chart. We use open card sorting to understand how users naturally group content, and closed card sorting to validate proposed navigation structures. Tree testing confirms that users can find critical tasks within 3 clicks or fewer.
Homepage Wireframe
The homepage wireframe demonstrates the full layout, primary navigation structure, content placement strategy, and calls to action. Numbered annotations explain each design decision. Hover or focus any annotation badge for details.
Interior Page Wireframe
View Full Interactive PageRepresentative interior page wireframe for a program/service page (Benefits & Assistance). Demonstrates breadcrumb navigation, content hierarchy, in-page navigation, sidebar layout, and contextual CTAs.
IA Consistency Across Pages
A clear and logical information architecture is reflected consistently across all wireframes. The following elements appear on every page, reinforcing wayfinding and user orientation.
- Identical across all pages
- Active state indicates current section
- Dropdown menus for sub-sections
- Search accessible from all pages
- Appears on all pages below level 1
- Reflects exact URL path structure
- Semantic nav landmark
- Current page marked aria-current
- H1 → H2 → H3 heading order
- One H1 per page only
- Section headings match nav labels
- In-page nav for long pages
- Consistent header/footer
- 2/3 + 1/3 content/sidebar split
- Sidebar content type consistent
- Footer identical on all pages
- Primary CTA above the fold
- Secondary CTA in sidebar
- Consistent button styles
- Action-oriented link text
- Translate link on all pages
- Accessibility tools persistent
- Emergency alert banner (when active)
- Language toggle consistent
Responsive & Mobile-First Design
Our wireframes are designed mobile-first: the smallest viewport is designed first, then progressively enhanced for larger screens. This ensures core content and tasks are accessible on all devices without degradation.
Accessibility Considerations
Accessibility is not an afterthought — it is a foundational design constraint. All wireframe decisions are evaluated against WCAG 2.1 Level AA and Section 508 standards from the first sketch. The following demonstrates key accessibility features incorporated throughout the wireframes.
Visible Focus Indicators
WCAG 2.4.7 — Focus Visible (Level AA)
Color Contrast Ratios
WCAG 1.4.3 — Contrast (Minimum) (Level AA)
Skip Navigation Link
WCAG 2.4.1 — Bypass Blocks (Level A)
Hidden until focused via keyboard. Appears at top-left of viewport on Tab press. Allows keyboard users to bypass repeated navigation.
ARIA Landmark Regions
WCAG 1.3.1 — Info and Relationships (Level A)
<header>Site header with logo and nav<nav>Primary navigation (aria-label)<main>Primary page content (id='main-content')<aside>Sidebar with related content<footer>Site footer with links- All interactive elements keyboard-accessible
- Logical tab order follows visual layout
- No keyboard traps
- Skip navigation link as first element
- Arrow key navigation for menus
- Semantic HTML5 landmark regions
- Descriptive alt text for all images
- Form labels associated with inputs
- Error messages linked to fields
- Live regions for dynamic content
- 4.5:1 minimum contrast for body text
- 3:1 minimum for large text and UI
- Color not sole indicator of meaning
- Text resizable to 200% without loss
- No content flashes more than 3/sec
Iteration, Review & Validation
Wireframes are living documents. Our process includes structured review cycles with both stakeholders and end users at each fidelity level. We do not present wireframes as finished artifacts — we present them as hypotheses to be tested and refined.
Each iteration cycle is time-boxed to prevent scope creep while ensuring meaningful feedback is incorporated. We track changes in a version-controlled annotation log, so every design decision is traceable to a specific feedback source.
Transition to Downstream Deliverables
Wireframes are not the end of the design process — they are the foundation. Our handoff process ensures that every wireframe decision translates cleanly into visual design, interactive prototypes, and production-ready development artifacts.
Wireframes are handed off to visual designers with full annotation documentation. The IA and layout decisions are locked; visual designers apply the agency brand system (color, typography, imagery) without restructuring the wireframe architecture.
- High-fidelity mockups
- Design system components
- Style guide documentation
- Asset specifications
Mid-fidelity wireframes are converted to clickable prototypes in Figma for usability testing. Prototypes cover the top 5 user journeys identified in discovery. Interaction states (hover, focus, error, loading) are documented.
- Clickable Figma prototype
- Interaction state library
- User testing scripts
- Prototype annotation guide
Final wireframes and visual designs are exported with developer-ready specifications: component names, spacing tokens, breakpoint behavior, ARIA attributes, and accessibility requirements. We use Figma Dev Mode for pixel-accurate handoff.
- Component specifications
- Spacing & token documentation
- Breakpoint behavior guide
- Accessibility requirements doc