SecureIVAI | Brand & Platform Redesign
Overview
From a no-code website to a production-grade AI platform
SecureIVAI helps small and medium-sized businesses adopt artificial intelligence safely, covering AI consulting, ISO 42001 compliance, LLM security testing, and custom AI solutions. The original website was built on a no-code platform with no consistent visual identity and no backend capabilities. I was brought in to rebuild everything: logo, brand system, full UI/UX redesign, and a custom full-stack platform deployed to AWS.
The Problem
What was broken
The old site was built on a no-code platform with no shared design language, wrong brand tone, and zero conversion features.
Slow page load
The no-code platform loaded heavy third-party scripts, bloated CSS, and unoptimized assets out of the box, hurting performance, SEO rankings, and first impression for every visitor.
Wrong brand signal
Olive gradient backgrounds and heavy newspaper serif fonts communicated finance or editorial, not AI or security.
No logo system
The stacked "IVAI" typographic mark was unmemorable and had no logomark, no brand rules, no visual consistency.
Dead whitespace
ISO 42001 and About pages had massive blank sections. Half the page was empty with no content or design intent.
No design system
Colors, spacing, and type were applied randomly page to page with no shared palette or component logic.
No clear CTAs
Users landed with no obvious next step. No booking flow, no lead capture, no conversion path.
No backend
No lead management, no admin dashboard, no email automation. The appointment booking relied on an embedded Acuity Scheduling widget that was unreliable and difficult to integrate, breaking the client's main conversion point. I replaced it entirely with Cal.com, which embedded cleanly and worked on day one.
Challenges
What made this project hard
Vite MPA configuration
Setting up Vite as a multi-page application with SSI includes, PWA injection, and proper build output for each route required significant config work, especially getting the service worker to cache the right pages without breaking dynamic content.
Offline support & auto-update
Implementing a reliable offline experience while ensuring users always got the latest version on reconnect was tricky. The service worker needed precise cache invalidation logic to avoid serving stale builds silently.
Design consistency at scale
Maintaining visual consistency across 6+ pages, each with different content types, layouts, and section lengths, required strict discipline on spacing, type scale, and component reuse with no design system shortcuts.
Communicating AI compliance to SMBs
ISO 42001, LLM security testing, and AI governance are complex topics. The content strategy challenge was making these feel accessible and urgent to non-technical small business owners without dumbing them down.
Process
How the project unfolded
01. Discovery
Audited the existing site, identified brand gaps, mapped the target audience (SMB decision-makers), and defined the content architecture and conversion goals.
02. Brand Design
Designed the new logo system from scratch, constructing the IVAI lettermark from a 4-pointed star, then built the full brand guidelines: colors, typography, digital showcases, and corporate identity.
03. UI/UX Design
Designed all pages in Figma with the new design system: dark theme, teal accent, consistent components, clear CTAs, and a pricing structure that moves visitors toward consultation.
04. Development & Deploy
Built the full-stack platform with Vite, Node.js, and Express. Replaced Acuity with Cal.com, implemented the admin dashboard, email automation, PWA support, and deployed to AWS in production.
Brand Identity
A complete brand built for trust in AI
The rebrand needed to communicate security, intelligence, and forward motion. The result is a fully documented brand system: logomark, color palette, typography, digital showcases, and corporate identity.
Logo Concept
The logomark starts from a single 4-pointed star. Each point geometrically derives one letter: I, V, A, I. A lock shape embedded in the star nods to security. The teal sparkle accent dots tie the mark back to AI and intelligence. The result is a lettermark that looks like a symbol, not a word.
Color System
Cyan primary on dark backgrounds signals innovation and precision. Dark teal secondary provides depth and hierarchy, distinct from generic enterprise blues.
Typography
Inter Tight for headings, compact and authoritative at display sizes. Inter for body copy, clean and readable. Both replace the inappropriate editorial serif.
Inter Tight
Inter
Design System
Tokens, components, and patterns
Every visual decision documented, from color tokens to interactive components, so the platform stays consistent as it scales.
Colors
Accent
Dark
White
Typography
Inter Tight Headings
Inter Body
Buttons
Cards
AI Security Audit
Identify vulnerabilities in your AI systems before they become liabilities.
$11.8B
AI governance market by 2030
Ready to secure your AI?
Book a CallStarter
$999/mo
- AI risk assessment
- Monthly report
- Email support
Icons
Grid & Containers
Desktop 11 columns · ~24px gutter · 1440px max
Mobile 2 columns · fluid gutter · full width
Container Scale
Spacing Scale
The Redesign
Every page rebuilt with intention
Six pages fully redesigned, each with a clear purpose, consistent components, and a CTA that moves the visitor toward a consultation or booking.
Responsive Design
Built for every screen
Every page adapts seamlessly from desktop to mobile, with consistent components, readable type, and touch-friendly CTAs across all breakpoints.
Before / After
The transformation, side by side
Technical Stack
Migrated from no-code to full-stack
The backend handles lead management, appointment booking, email automation, file uploads, and admin authentication, all running on AWS in production.
Key Features
What the platform delivers
Admin Dashboard
Secure admin panel with session authentication for managing all leads, contact submissions, and appointment requests.
Appointment Booking
Custom consultation booking flow with email notifications sent to both the business and the prospect.
Email Automation
Nodemailer-powered system for auto-replies, lead alerts, and booking confirmations.
AI Research Blog
Content hub for publishing AI governance articles and guides, establishing thought leadership in the SMB space.
Service Pricing Tiers
Structured pricing pages (Starter, Professional, Enterprise) that convert visitors into qualified leads.
PWA Support
Progressive Web App with service worker for offline support and an installable experience on mobile.
Admin Panel
A real backend, built for the client
Beyond the public site, I built a private admin panel with session-based authentication, a lead management dashboard, and appointment tracking. The client can log in, view every contact submission, and manage bookings without touching any code.
Performance
Lighthouse scores in production
Built with Vite, optimized assets, lazy-loaded images, and a service worker for offline support. Scores will be verified once the site goes live.
Client Testimonial
What the client said
Working with Safa was one of the best decisions we made for SecureIVAI. She rebuilt our entire platform from scratch (brand, design, and backend) and delivered something we're genuinely proud to show clients. Professional, fast, and she understood exactly what an AI security company needs to communicate.
Mark Bentsen
Founder, SecureIVAI