UX/UI Designer with Vector Illustration Skills Needed for Interactive DMV Real Estate Map Component

Seeking a UX/UI designer with strong graphic and vector design skills to create a custom interactive DMV coverage map component for a luxury real estate website. This is a design-only project: the selected designer will create the visual design system, map artwork, UI states, and developer-ready source files, while a separate web developer will handle coding, animation, and WordPress implementation. The component should visually resemble the attached inspiration: a clean, upscale, simplified map with clearly defined regions on the left and a coordinated content panel on the right. When a user hovers over or selects a city/area, that region should subtly lift, brighten, or outline, and the panel should display an image and short description for that area. Project objective - Design a custom interactive website map component that: - Highlights the team’s service areas across the DMV. - Presents a polished branded map suitable for a luxury real estate website. - Includes map interaction states that a developer can translate into code. - Includes a companion content panel that updates by selected city/area. - Is delivered in a format that supports front-end implementation in WordPress. Geographic scope - The map should include the following service areas: 1) Virginia - Alexandria - Arlington - Burke - Clifton - Falls Church - McLean - Vienna - Oakton - Fairfax - Fairfax Station - Annandale - Herndon - Springfield - Reston - Sterling - Ashburn - Leesburg - Centreville - Great Falls - Aldie - South Riding - Gainesville/Haymarket 2) Maryland (Montgomery County only), including: - Bethesda - Potomac - Rockville 3) Washington, DC - NW DC only Designer responsibilities: - Create one custom stylized DMV map for desktop website use. - Clearly define city/area boundaries for all listed service areas. - Establish the map’s color palette, typography, labels, border treatment, and visual hierarchy. - Design the default map state. - Design the hover state for a city/area. - Design the selected/active state for a city/area. - Design the right-side content panel layout. - Show how an area image, title, and short description appear when a city/area is selected. - Prepare files for developer handoff with organized layers and naming. - Provide desktop and mobile design intent for responsive adaptation. Not included in scope: - Front-end development - HTML/CSS/JavaScript coding - WordPress implementation - Plugin setup - CMS population - Final animation development - Final copywriting beyond placeholder or sample content unless otherwise agreed The design should feel: - Clean - Upscale - Modern - Editorial - Luxury real estate appropriate - Web-ready and easy for a developer to implement The preferred style is a simplified stylized regional map, not a default Google Maps-style embed. The overall visual reference is a branded map treatment with clear region separation, strong readability, and a coordinated information panel. The designer should account for the following states and behavior in the design: - Default state - All service areas visible on the map. - Labels are readable and clearly assigned. - Map and panel feel balanced within the component. - Hover state A) When a user hovers over a city/area, that area should: B) Subtly rise, lift, or visually pop from the map. C) Gain a stronger outline, glow, contrast shift, or highlight. D) Remain elegant and restrained, not cartoonish. E) Stay legible without disrupting neighboring labels. Selected/active state When a city/area is selected, the design should show: - A clear persistent active treatment for that region. - The corresponding image in the right-side panel. - The city/area name. - A short descriptive text block. - Optional styling for a “Learn More” link or CTA, if needed. Content panel requirements - The right-side content panel should be designed to accommodate: - One featured image - City/area name headline - Short paragraph description - Optional CTA or link styling - The panel should feel integrated with the map component and suitable for a high-end residential real estate brand. Deliverables - The designer should provide the following deliverables: 1) Core design deliverables - One complete desktop mockup of the interactive DMV map component - One mobile or responsive layout mockup for the same component - One default map state design - At least one hover-state mockup - At least one selected/active-state mockup - One right-side content panel design tied to a selected city/area 2) Source files - Editable master file in Figma preferred or Adobe Illustrator - Fully layered vector artwork - Map provided as SVG or equivalent vector format suitable for developer implementation - Separate named layers or vector objects for each city/area - Organized component file showing map, panel, text styles, and state variations 3) Exported review assets - PNG exports of desktop design - PNG exports of mobile/responsive design - SVG export of the final map artwork 4) Handoff specifications - Color palette with hex values - Typography specifications, including fonts, weights, and sizes - Stroke/border specs for region outlines - Spacing and layout specs for map and panel - State notes showing default, hover, and active treatments - Layer naming that matches each city/area clearly for developer use 5) Required file structure and handoff standards To support the developer, deliverables should follow these standards: - Each region should be isolated as its own vector object or named layer. - Region names should be implementation-friendly, such as arlington, falls-church, mclean, vienna, bethesda, rockville, nw-dc, etc. -Text should be supplied as live editable text where possible, plus outlined backup if needed. - The file should clearly separate map artwork, labels, hover states, active states, and panel elements. - All colors and text styles should be documented for implementation. Acceptance criteria - The project will be considered complete when: - The map includes all required DMV service areas. - The design reflects the desired upscale, clean, branded style. - Boundaries and labels are visually clear and usable at website scale. - The hover and active states are clearly documented visually. - The information panel is designed and coordinated with the map. - Source files are organized for efficient developer handoff. - Deliverables include both desktop and responsive/mobile intent. Suggested milestone structure Milestone 1: Concept direction - Initial visual direction for the map and panel - Preliminary map style and layout concept Milestone 2: Finalized desktop component - Approved desktop design - Approved default, hover, and active states - Approved content panel design Milestone 3: Final handoff package - Editable source files - SVG/vector exports - PNG previews - Handoff notes/specifications Budget: I've got quotes from web-developer for $750-1,000 to add this feature in the way we want it. Please be competitive. Begin response/bid with "MAP MAP MAP" to let me know you actually read this SOW.