Case Study — Republic Eagle Vision
A Product Website, Sitemap to Launch.
Republic Eagle Vision needed a website that could explain a technical AI surveillance product — Talon — to a residential construction audience and turn that explanation into booked demos. I planned, designed, and built the full site in Webflow, start to finish. Scroll to see how it came together.
UX strategy
Webflow build
Interactive product showcase
Video CMS
Conversion design
The Process
From Sitemap to Live Site
Scroll through each stage of how the Republic Eagle Vision site actually came together — from mapping the information architecture to designing every page in Figma to building the final site in Webflow.
01Sitemap
02Wireframe
03Figma Design
04Webflow Build
01 — Sitemap
Mapping the Information Architecture
Before any visual design, I mapped the full sitemap — the homepage, product and features pages, the Gotcha Gallery, and contact/get-a-quote — so the navigation and page hierarchy were decided before a single screen was drawn. Each section block was scoped with the specific headline and content it needed to carry.
02 — Wireframe
Low-Fidelity Layout
With the structure set, I built wireframes for each page — placing the hero messaging, feature blocks, and calls to action before any branding or color entered the picture. This kept the layout decisions focused on hierarchy and flow rather than visual polish.
03 — Figma Design
Visual Design & Style Guide
From the wireframes, I designed the full visual system in Figma — color schemes, component states, typography, and every page at high fidelity — then refined the layout and mockups before handing off to build.
04 — Webflow Build
Building the Live Site
With designs approved, I built the full site in Webflow — translating each Figma page into a responsive, production-ready build, including the interactive product showcase and the video CMS that powers the Gotcha Gallery.
Interactive Product Showcase
Letting Visitors Explore the Hardware Themselves
Talon's hardware has a lot going on in a small footprint — camera, AI monitoring, solar panel, speaker, and wireless connectivity all built into one unit. Rather than describe each component in a wall of text, I designed an interactive graphic: visitors click a feature tag and the diagram highlights that exact component on the product, paired with a real example of what it captures. It turns a spec sheet into something people actually explore, which matters for a technical product being sold to a non-technical buyer.
Explore for Yourself →
Gotcha Gallery & Video CMS
A Video Library That Proves the Product Works
The client had compelling raw surveillance footage — real break-ins, trespassing, and worksite incidents caught and stopped with Talon's AI detection. I edited that footage into shareable clips and set up the YouTube channel they now publish to. From there, I built a CMS-driven video library in Webflow — the Gotcha Gallery — organized by incident type (Monitoring, Break-In, Trespassing), so the collection grows as new footage comes in without needing a developer to touch the page. It's the section that turns "trust us, it works" into "watch it happen."
See the Live Site →
YouTube Channel
Explainer & Testimonial Video Production
Beyond the website itself, I coordinated with third-party videographers to plan and shoot an informational explainer video about the product, along with client testimonial videos. I created the branded graphics used in those pieces and provided creative direction through editing — keeping the visual language consistent with the website and the rest of Republic Eagle Vision's marketing.
Watch on YouTube →
