packages and cases – Headless Web Application
The Challenge
Visavis, a communication agency, was running two separate websites: their main agency site and a subdomain dedicated to business packages. The problem was clear – the package site was barely being found, and it wasn't generating any new client leads. High-value agency services aren't typically purchased through a simple "Book Now" button; they come through connections, pitches, and relationship building.
The management wanted to merge both platforms into one cohesive experience. But there was a catch: migrating all the existing content and data would be time-consuming and risky. I needed a smarter solution.
Key Challenges:
Platform Consolidation – Merge two separate WordPress sites without data migration
SEO Recovery – The package subdomain was poorly indexed and hard to find
Strategic Repositioning – Shift focus from "who we are" to "what we offer"
No Visual Assets – No images or design templates provided
Performance Critical – Site needed to be fast, lightweight, and SEO-optimized
The Solution
Headless Architecture with Dual Data Sources
Instead of migrating data, I built a headless web application that pulls content from both WordPress sites simultaneously:
Nuxt.js Frontend – Modern Vue-based framework for server-side rendering and optimal SEO performance
WPGraphQL Integration – Custom GraphQL queries fetching data from both the agency site and the package subdomain
JWT Authentication – Secure API access ensuring only authorized requests can pull project data and sensitive information
Unified Presentation – Both data sources rendered seamlessly in a single, cohesive user interface
The technical complexity lay in writing precise GraphQL queries that could efficiently fetch and combine data from two separate WordPress instances while maintaining security through JWT tokens. Each query had to be optimized for performance to keep the site lightweight.
Strategic Content Approach
I fundamentally rethought how the agency presents itself online:
Offer-First Homepage – Immediate CTAs leading to packages, not lengthy agency introductions
Package Education – Clear explanations of what packages actually are and how they work
Starting Points – Transparent price indicators giving potential clients a reference point for project costs
Catalog, Not Checkout – Packages presented as informational resources rather than direct purchase options
This approach acknowledges the reality of B2B service sales: clients at this price point don't click "Buy Now" – they want information to inform their decision before reaching out through proper channels.
Creative Visual Solutions
Without any images or design templates to work with, I developed a distinctive visual language:
Micro-Animations – Subtle, modern animations that add polish and interactivity without requiring image assets
Hover Shader Effects – Custom shader animations triggered on hover, creating visual interest through code rather than graphics
Dark/Light Mode – User-selectable theme that improves accessibility and reduces page weight
Typography-Driven Design – Strong typographic hierarchy carrying the visual weight traditionally held by imagery
Code-First Design Process
This project broke from traditional design workflows:
No Figma – Entire concept developed directly in code
Terminal-Based Development – All work done in code editor with rapid prototyping
Markdown Documentation – Concepts and decisions documented in MD notes
Iterative Prototyping – Design decisions made through functional prototypes rather than static mockups
This approach enabled faster iteration and ensured every design decision was immediately validated in the actual medium.
Complex Package Single Pages
Many packages contained extensive information, options, and variations that couldn't be displayed in a simple layout. I developed a structured UI approach:
Modal/Popup System – Content organized into expandable "drawers" that keep the main view clean while making detailed information accessible on demand
Information Hierarchy – Clear visual structure separating core package info from additional options and specifications
Progressive Disclosure – Users see essential details first, with modals revealing deeper content when needed
Consistent Patterns – Reusable modal components ensuring uniform UX across all package types
This approach prevents information overload while ensuring nothing important is hidden or hard to find.
Backend Content Management
The consultants and team members maintaining the site needed a powerful yet intuitive editing experience. I built a comprehensive backend system in PHP:
Repeater Fields – Flexible content blocks allowing unlimited options, features, and price tiers per package
Profile Relationships – Consultants can be linked to specific packages, automatically displaying the right contact person
Drag & Drop Ordering – Easy reordering of package sections, options, and team assignments
Nested Data Structures – Complex package configurations with multiple levels of options and sub-options
Validation & Guidance – Built-in help text and field validation ensuring consistent data entry
Key Features
🔗 Dual-Source Data Architecture
The headless setup pulls content from two separate WordPress installations through WPGraphQL. Custom queries fetch agency information from one source and package details from another, combining them into a unified frontend experience. JWT authentication secures all API calls, ensuring sensitive project data remains protected. This architecture eliminated the need for risky data migration while creating a more maintainable long-term solution.
📦 Package Catalog System
Rather than pushing for immediate conversions, the package presentation serves as an informational resource. Each package includes clear descriptions, scope definitions, and starting price indicators that give potential clients realistic expectations. The catalog approach respects the B2B sales reality – these services require consultation, not impulse purchases. CTAs guide users toward inquiry rather than checkout.
✨ Code-Driven Visual Design
With no images available, I built the entire visual experience through code. Micro-animations provide feedback and delight, hover states trigger custom shader effects, and the dark/light mode toggle adds both aesthetic variety and performance benefits. The result is a distinctive look that stands out from template-based agency sites while remaining extremely lightweight.
⚡ Performance-First Development
SEO and speed were non-negotiable requirements. Nuxt.js provides server-side rendering for optimal search engine indexing. The absence of heavy image assets naturally keeps page weight low. GraphQL queries are optimized to fetch only necessary data. The result is a site that loads fast, ranks well, and provides an excellent user experience across all devices.
🎨 Themeable Interface
The dark/light mode isn't just aesthetic – it reduces eye strain for users browsing in different environments and demonstrates technical sophistication. Theme preference is persisted across sessions, and the transition between modes is smooth and performant.
📝 Documentation-Driven Development
The entire concept was developed through markdown notes and code prototypes rather than traditional design tools. This approach created a clear paper trail of decisions, enabled rapid iteration, and ensured the final product matched the vision without translation loss between design and development phases.
🗂️ Modal-Based Content Organization
Package single pages faced a unique challenge: displaying extensive information without overwhelming users. The modal/popup system organizes complex content into logical "drawers" – users see a clean overview first, then click to reveal detailed specifications, pricing tiers, and additional options. This progressive disclosure pattern keeps the interface scannable while ensuring all information remains accessible. Each modal follows consistent design patterns for a unified experience across dozens of different packages.
⚙️ Consultant-Friendly Backend
The backend was built specifically for non-technical consultants and team members who maintain package content daily. Using PHP and ACF, I created an intuitive editing environment with repeater fields that allow unlimited options per package, drag-and-drop ordering for flexible content arrangement, and profile relationship fields that link consultants to their respective packages. Nested data structures handle complex package configurations with multiple option levels, while built-in validation and help text guide editors toward consistent data entry.
Technical Highlights
Nuxt.js SSR – Server-side rendering for optimal SEO performance and fast initial page loads
WPGraphQL Queries – Custom GraphQL queries pulling from dual WordPress data sources with efficient field selection
JWT Security – Token-based authentication protecting API endpoints and sensitive project data
GSAP Animations – Performant micro-animations and scroll-triggered effects
Custom Shaders – Hover-activated visual effects created entirely through code
Theme System – Persistent dark/light mode with smooth transitions
Modal Architecture – Reusable popup components for progressive content disclosure on package pages
PHP Backend Development – Custom ACF field groups with repeaters, relationships, and nested structures
Profile Linking System – Relational fields connecting consultants to packages and content sections
Responsive Architecture – Fully adaptive layout optimized for all screen sizes
Lighthouse Optimized – High scores across performance, accessibility, and SEO metrics
Markdown Workflow – Concept documentation and decision tracking through MD files
The Impact
The consolidated platform transforms how Visavis presents itself:
Unified Brand Presence – One cohesive site instead of fragmented subdomains
Improved Discoverability – Package content now benefits from main domain SEO authority
Strategic Positioning – Clear focus on offerings rather than self-promotion
Performance Excellence – Fast, lightweight site with strong Core Web Vitals
Maintainable Architecture – No data migration needed; both WordPress sites continue operating independently
Distinctive Aesthetics – Unique visual identity through animation and code-driven design