Embedded Files
City of Geneva, Alabama
Case Study:
Case Study:
Project Overview:
Project Overview:
Project Type: eGov · Municipal Website · Citizen Services Portal
Client / Brand: City of Geneva, Alabama
Role: Solo Designer & Developer — UX strategy, visual design, proposal writing, WordPress FSE implementation planning
Work Type: Prospective / Concept
Status: Prospective — proposal submitted, full deliverables produced speculatively
The City of Geneva, Alabama — a small municipality of approximately 4,500 residents at the confluence of the Choctawhatchee and Pea Rivers — maintains a legacy website that has not kept pace with resident expectations for modern municipal services. The existing site presents several compounding problems: a centered, fixed-width layout with no mobile responsiveness; a flat navigation structured around city departments rather than resident tasks; payment portal links buried at the bottom of a busy homepage; no news or announcements section; and no accessibility accommodations. For residents accessing the site from mobile devices — which constitute the majority of internet traffic in communities of this size — the experience is effectively broken.
This project was initiated speculatively to demonstrate what a modern, citizen-first eGov presence could look like for Geneva, and to serve as a concrete proposal for the city's leadership.
Prospective Homepage for City of Geneva, AL
Style Guide / Look & Feel
Style Guide / Look & Feel
Design Strategy & Execution:
Design Strategy & Execution:
Design a polished, conversion-focused desktop homepage for a photography e-commerce brand featuring:
Key Design Elements:
Create a clean, modern e-commerce experience tailored to photography enthusiasts
Emphasize conversion through strategic CTAs and visual hierarchy
Implement a structured mega-menu for deep product navigation
Design an SEO-conscious content section without compromising aesthetics
Build reusable components for scalable WordPress/Elementor handoff
Reflect a professional, credible brand tone
The design needed to balance aesthetics, usability, scalability, and SEO-conscious layout thinking.
Visual Assets:
Visual Assets:
All assets were selected and placed to simulate a production-ready e-commerce environment.
High-resolution photography-themed imagery
Product thumbnails
Iconography via FontAwesome glyphs
Structured grid-based layout
Card-based UI modules
Color Palette
Color Palette
Civic Navy: (#1B3A6B) Primary — header, nav, hero background, CTAs, footer
Civic Gold: (#C8960C) Accent — active states, gold bars, ACE badge, card links, section dividers
Warm Cream: (#F7F4EF) Page background — avoids clinical white, adds warmth
ACE Tan: (#EDE7D9) Payments strip background — warm neutral between navy and cream
Dark Footer: (#0D1C38) Footer — deeper navy for contrast and visual weight
Body Text: (#2D2D2D) Off-black — easier on screen than pure black
Typography
Typography
Display / H1–H2: Playfair Display 700, 900 | Civic gravitas; used for hero headline, section headers, footer headings
Body / UI: Source Sans 3 400, 500, 600, 700 | Humanist sans; excellent screen legibility, generous x-height
Metadata / Badges: DM Mono 500 | News dates, tag labels, URL bar — adds technical precision
Visual Tone
Visual Tone
Trustworthy, not corporate. Institutional credibility through consistent navy/gold without feeling bureaucratic or cold.
Task-first, not content-first. Every section above the fold either routes a user to a task or communicates pride in Geneva's civic identity.
Earned warmth. Cream backgrounds, Playfair headings, and the ACE designation give the site a "well-run small city" feeling — not a generic government portal.
Mobile-native. Hamburger menu, stacked layouts, full-width payment pills on mobile — designed to feel intentional on a phone, not accommodated as an afterthought.
Component Inventory
Component Inventory
All components were built using Figma auto-layout and structured for scalable WordPress or Elementor implementation.
Goals & Intent:
Goals & Intent:
The primary goal was to redesign Geneva's digital presence around what residents actually need to do rather than how city hall is organizationally structured. Key objectives:
Elevate five critical payment portals (Water/Garbage, Electric, Court Fines, Ambulance, Rec Registration) to prominent, always-visible positions
Restructure navigation around resident tasks, not department org charts
Establish a visual identity that feels authoritative and trustworthy while remaining approachable
Surface Geneva's ACE (Alabama Community of Excellence) designation as a source of civic pride
Achieve WCAG 2.1 AA accessibility compliance throughout
Design a fully responsive experience — mobile-first in implementation, desktop-polished in presentation
Deliver the site on WordPress Full Site Editing so city staff can maintain content without developer support
Deliverables:
Deliverables:
Proposal Document (.docx): cover with city seal, TOC, 3 color-coded tier cards, timeline, terms, acceptance section
Three-Tier Comparison Mockup: Side-by-side HTML file showing homepage for all three tiers in browser chrome frames
Responsive Standard Tier Mockup: Standalone HTML — fully responsive at mobile (390px), tablet (768px), desktop (1200px) — no chrome, screenshot-ready
Internal Artifacts:
Internal Artifacts:
WordPress FSE Implementation Guide: Step-by-step build documentation for WordPress Full Site Editing theme development
AI Build Prompt: Structured prompt for AI-assisted WordPress development scoped to the Standard Tier spec
Skills Applied
Skills Applied
UX strategy and information architecture
Visual identity design (civic/institutional context)
HTML/CSS prototyping — responsive, production-fidelity
WordPress Full Site Editing (FSE) planning and documentation
Tiered product design and pricing strategy
Accessibility planning (WCAG 2.1 AA)
Technical proposal writing and document design
Client communication and business development
Outcome & Reflection
Outcome & Reflection
Results
Results
Complete proposal package delivered — document, mockups, implementation guide, SOW, build tools — ready for client presentation without additional work
Standard Tier mockup achieves full responsiveness across three breakpoints with functional hamburger navigation, adaptive layouts, and touch-optimized payment interactions
Tier reframe (Minimal → Quick Start) creates a cleaner product story: three distinct engagement models for three distinct situations, rather than a tiered downgrade ladder
Dashed placeholder approach in Tier 1 mockup communicates feature differences visually without requiring the client to parse a feature comparison table
What I'd Improve
What I'd Improve
Real user research. A complete engagement would begin with resident interviews and task analysis rather than inferring task priorities from industry patterns and the existing site's structure. The navigation and homepage hierarchy are educated assumptions — they need validation.
Content strategy depth. The mockups use placeholder content. A production engagement would require a content audit, migration strategy, and editorial guidance for city staff who will own the CMS after launch.
Accessibility audit on prototypes. The mockups are designed to WCAG standards but haven't been tested with screen readers or auditing tools. A real delivery would include an axe/WAVE audit before final sign-off.
Stakeholder presentation format. The proposal was designed for a client who reads documents. For a city council presentation context, a slide deck distillation of the tier comparison would land more effectively than the full proposal document alone..
Page updated
Google Sites
Report abuse