and a new revenue stream for the hiring business
Recruitment
F5 wanted a referral-driven web app to collect leads from their network—anyone can submit a company they believe is hiring. We handled end-to-end design and development, building a gated dashboard and a lightweight backend using Webflow, Memberstack, Airtable, and Make.
A production-ready referral portal and dashboard that the F5 team can run themselves: log in, submit or review referrals, auto-enrich company cards with logos, approve/decline in one click, and keep Webflow, Memberstack, and Airtable in lockstep. The system is responsive, auditable, and set up to scale.
%20(1).png)
Capture referrals with minimal friction, keep the data clean (no duplicates, valid domains), brand entries with company logos automatically, and give admins a stress-free way to review, approve, and sync data across tools—all on a stack they can maintain.
We designed a clear, mobile-first flow and implemented a modular Webflow build with Memberstack authentication. Airtable acts as the source of truth; Make automations handle validation, enrichment (logo extraction), and bidirectional sync. An admin dashboard exposes webhooks and update buttons so the team can trigger re-syncs and state changes without touching code.
--- Discovery & Strategy
Defined referral lifecycle (submit → validate → enrich → review → approve/decline → synced), user roles (referrer, admin), success states, and guardrails for data quality. Mapped systems and ownership to keep ops simple.
--- ✍️ Messaging & Content
Wrote concise copy for the submission flow, state messages (pending/approved/rejected), empty states, error helpers (invalid domain/duplicate), and dashboard tooltips. Drafted succinct admin labels for actions and webhooks.
%20(2).png)
--- 🎨 Visual Design
Built a clean, neutral UI with status badges, card layouts for referrals, and clear hierarchy on mobile. Designed a system of components (form, card, table, badge, modal, toast) for reuse across dashboard views.
--- 🧩 Animations & Motion
Micro-interactions for submit/approve actions, loading shimmers on referral cards, and non-intrusive success/failure toasts—useful feedback without slowing the flow.
%20(3).png)
--- ⚙️ Development & Build
- Auth & gating: Memberstack for sign-up/login, role-based access to dashboard views.
- Data model: Airtable base for referrals, companies, users, and statuses; unique keys to prevent duplicates.
- Automations: Make scenarios for form capture, validation, deduping, status updates, and cross-tool sync.
- Logo extraction: A web-clip process that pulls brand logos/favicons from submitted domains and attaches them to referral cards.
- Admin dashboard: Webflow CMS dashboard with action buttons (approve/decline/re-sync), plus webhooks to re-run enrichment or push updates.
- Sync: Webflow ↔ Memberstack ↔ Airtable kept in sync via structured webhooks and Make routes; error handling with retries and logging.
- Responsiveness & QA: Mobile-first layout, keyboard-accessible controls, and cross-browser checks before handoff.
.png)
.png)
Product Designer, Webflow Developer, Creative Designer, Project Manager.
Product Design: Figma
Product Architecture Design: FigJam
Development: Webflow, Memberstack, Airtable, and Make
.avif)
