Why We Built This Method
Most digital agencies and software vendors speak endlessly about "quality." Very few document how quality is systematically produced.
In web development and e-commerce engineering, quality is not a random byproduct of talented developers working late hours. Quality is the repeatable outcome of rigorous software engineering processes, strict performance budgets, automated static analysis, multi-device hardware QA, and transparent version control governance.
Engineering Philosophy
The Zest Engineering Method™ documents our operational blueprint. It outlines the exact standards, validation gates, and delivery stages that govern every white-label project executed for our agency partners across Australia, the UK, UAE, South Africa, and North America.
The Five Phases
Discover
We establish project parameters, security boundaries, and architectural requirements before authoring any code.
- Requirements Scoping: Audit Figma design tokens, PRDs, component states, and database models.
- Technical Goal Alignment: Establish speed budgets (sub-800ms LCP), Core Web Vitals thresholds, and WCAG 2.1 AA targets.
- Risk Assessment: Identify third-party app dependencies, legacy data migration bottlenecks, and API rate limits.
- Existing Architecture Audit: Analyze current Liquid templates, database queries, and 301 URL redirect maps.
- Business Objectives: Align technical delivery with agency partner gross margin goals (50–70%) and SLA commitments.
Architect
We design data schemas, technical SEO foundations, and system infrastructure prior to sprint execution.
- Technology Decisions: Lock in platform architecture (Shopify Liquid vs Hydrogen/Oxygen Next.js vs WordPress Gutenberg).
- Technical SEO Planning: Map canonical tag structures, dynamic XML sitemaps, and
robots.txt.liquidcrawl paths. - Core Web Vitals Planning: Plan resource prioritization (`fetchpriority="high"` preloading, aspect-ratio containers).
- Shopify Architecture: Design Liquid snippet trees (
{% render %}scope isolation), Checkout UI Extensions, and Shopify Functions. - WordPress Architecture: Plan custom Gutenberg blocks, decoupled PHP templates, and security rules.
- Scalability Planning: Design GraphQL Admin API queries to comply with 1000 point/sec cost buckets.
Build
Senior engineers construct clean, modular, zero-bloat code following performance-first standards.
- Git Workflow: Execute 3-tier branch isolation (`main`, `staging`, `feature/*`) with conventional atomic commits.
- Component Development: Build modular CSS/JS components without heavy utility frameworks or unminified libraries.
- Liquid Development: Enforce strict scope isolation using
{% render 'snippet' %}and Whitespace Control. - WordPress Development: Author bespoke Gutenberg blocks using native PHP/JS without heavy page builders.
- Responsive Implementation: Build fluid layouts scaling from 320px to 2560px with touch targets ≥ 44x44px.
- Performance-First Coding: Enforce total DOM node count < 1500 and maximum DOM depth < 32.
Validate
Dedicated QA engineers subject every staging build to rigorous multi-tier testing gates.
- Multi-Device QA: Test physical hardware viewports across iOS, Android, macOS, and Windows.
- Browser Testing: Validate rendering across Chrome, Safari, Firefox, and Edge engines.
- Accessibility Audit: Verify WCAG 2.1 AA compliance (keyboard focus rings, ARIA roles, 4.5:1 contrast ratio).
- Structured Data: Test connected `@graph` JSON-LD schema using Google Rich Results and Schema.org tools.
- Technical SEO Pass: Verify self-referential canonical tags, 301 URL redirect maps, and sitemap indexability.
- Core Web Vitals Gate: Benchmark sub-800ms LCP, 0.00 CLS, and INP < 150ms on mobile throttling.
- Security Review: Validate CSP headers, CORS rules, and 2FA administrative staff permissions.
Support
We execute zero-downtime launches, transfer full IP ownership, and provide post-launch retainers.
- Launch Monitoring: Execute off-peak DNS cutover, monitor Search Console 404 logs, and set up sub-5-min uptime pings.
- Documentation SOPs: Deliver unbranded administrator video walkthroughs (Loom) and complete technical docs.
- Bug Coverage: Provide 60 days of complimentary post-launch bug coverage to guarantee operational stability.
- Maintenance & SLAs: Transition into monthly retainers with guaranteed sub-4-hour emergency hotfix SLAs.
- Future Enhancements: Conduct quarterly app audits, theme updates, and performance tuning reviews.
Engineering Standards
Coding Standards
Native W3C valid HTML5, modular ES6+ JavaScript without jQuery overhead, and clean CSS variables following semantic naming tokens.
Git Workflow
3-tier branch isolation (`main`, `staging`, `feature/*`), squashed PR merges, conventional atomic commit messages, and signed commits.
Performance Budgets
Total page payload < 1.2 MB, CSS bundle < 50 KB gzipped, blocking JS execution < 100 KB gzipped, initial HTTP requests < 35.
Accessibility (WCAG 2.1 AA)
Visible `:focus-visible` indicator rings, screen-reader ARIA landmarks, full keyboard tab navigation, and 4.5:1 text color contrast ratio.
Security Hardening
Content Security Policy (CSP) headers, CORS restrictions, sandboxed Customer Events Web Pixels, and 100% 2FA staff admin compliance.
Structured Data
Connected `@graph` JSON-LD schema arrays embedding `Organization`, `WebSite`, `Product`, `Offer`, `BreadcrumbList`, and `FAQPage` entities.
Technical SEO
Self-referential canonical tags, customized `robots.txt.liquid` disallowing tag search loops, XML sitemaps, and clean URL taxonomy.
Documentation SOPs
Unbranded video walkthroughs (Loom), Notion technical documentation, clean inline Liquid/PHP comments, and Git commit histories.
Quality Assurance (QA)
4-tier pre-flight QA signoff gate: automated static analysis, hardware matrix testing, Core Web Vitals audit, and 301 URL verification.
Browser Compatibility
Cross-browser engine pass across Chrome, Safari, Firefox, and Edge on physical iOS, Android, macOS, and Windows devices.
Responsive Design
Fluid typography (`clamp()`), flexbox/grid containers scaling from 320px to 2560px, zero horizontal overflow, touch targets ≥ 44x44px.
Image Optimization
Native Shopify CDN image filter optimization (`image_url`), WebP/AVIF formatting, explicit `width`/`height` attributes, preloaded hero LCP images.
Delivery Principles
1. Build for Maintainability
We write self-documenting code with clear component boundaries. Any senior developer can inspect our codebase years after launch and immediately understand its structure.
2. Measure Performance Quantitatively
We do not rely on subjective opinions regarding page speed. We measure Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) using Lighthouse CLI and RUM APIs.
3. Proactively Eliminate Technical Debt
We refuse to cut corners during sprint construction. We deprecate legacy Liquid tags (`{% include %}`), avoid unverified app plugins, and keep DOM node counts strictly under 1500 nodes.
4. Communicate Asynchronously & Transparently
We maintain absolute transparency inside your Jira, ClickUp, Monday, or Slack workspace using your agency email. We push daily async updates and weekly video SOPs without demanding status meetings.
5. Validate Before Staging Handoff
Zero staging links leave our lab without passing our 4-tier QA protocol. We verify multi-device responsiveness, payment sandboxes, and URL redirects before your team or client reviews the build.
6. Document Decisions Explicitly
We record technical decisions, API choices, schema structures, and custom Liquid logic in clean technical documentation, ensuring your team retains complete operational control.
Pre-Launch Quality Checklist
Below is the technical QA checklist executed by our engineering team prior to every staging handoff and DNS cutover: