Vendstore — Corporate micro-vending ecosystem website — design and development from scratch

Vendstore is not a "single-machine landing page" — it is an ecosystem with multiple audiences, products, and conversion paths. The site had to explain a complex business model and still drive leads.

Starting point:

• A brand with a clear brand book (DEEP GREEN, typography, tone of voice) but no finished digital product
• Two distinct product lines: HELPER+ (micro-retail) and Bloomy (perfume vending) — different logic, models, and SKUs
• Three audiences: B2B partners, private investors (B2C), and location owners
• Ukrainian and Russian versions with proper SEO — not a Google Translate paste
• Lead forms must reach CRM (Odoo), not just email
• High competition for attention — the site must look premium and load fast on mobile

Technical constraints:

• No CMS or builder — full code ownership for the client
• Complex interactivity: model sliders, revenue calculators, scroll animations, video in spec blocks
• SEO from scratch: canonical, hreflang, structured data, sitemap, AI accessibility (llms.txt)
• Core Web Vitals on mobile — critical for paid traffic

Design and design system

• UI built from the Vendstore brand book: colors, Roboto typography, components (buttons, cards, modals, hero)
• One visual language for HELPER+ (green accent) and Bloomy (dark profile)
• Responsive from 320px to wide desktop
• Product cards with "curtain" reveal, spotlight blocks, spread-layout models with animated "net profit"

Page architecture (10 URLs, 2 languages)

• Home — ecosystem overview, B2B/B2C, products, partnership steps
• HELPER+ — Box/Slim models, galleries, revenue calculator, FAQ
• Bloomy — wall model, video spec block, calculator
• B2B — White Label, partnership, formats
• B2C — investment offer for private investors
• Mirror pages under /ru/ with identical structure

Performance

• Critical CSS inline in , main styles and fonts async preloaded
• Local Roboto woff2 fonts, no Google Fonts CDN
• Hero with responsive srcset (separate mobile/desktop WebP)
• loading="lazy" for below-the-fold images
• content-visibility: auto on lower sections (mobile)
• Local vendor libs: GSAP, Lenis, Swiper, noUiSlider

Interactivity and animation

• Lenis smooth scroll + GSAP ScrollTrigger (desktop)
• Section reveal on scroll
• Swiper model sliders (fade, autoplay, pagination)
• noUiSlider revenue calculators on HELPER+ and Bloomy
• Animated "net profit" presentation between model cards
• Spec block with synced video and feature list
• B2B/B2C audience tabs, Slim variants (wall / with stand)

Forms and CRM

• Lead modals (partner, callback, product)
• Field validation, +38 phone mask
• send.php — email delivery + Odoo CRM lead creation
• Google Tag Manager in for reliable tracking

SEO and AI accessibility

• Canonical at https://www.vendstore.com.ua, non-www → www redirect, HTTPS
• Hreflang uk-UA / ru-UA + x-default on all pages
• JSON-LD: Organization, WebSite, WebPage, Product (on product pages)
• sitemap.xml with hreflang, robots.txt, llms.txt for AI search
• Unique title, description, Open Graph, Twitter Cards per page
• Local SVG icons instead of icon fonts

Accessibility and UX

• Skip link, semantic HTML5, ARIA on modals and sliders
• 16px inputs — no iOS auto-zoom
• Modals with hidden — no FOUC on reload
• Critical CSS for header — no header flash before styles load

Infrastructure

• nginx config with static caching and redirects
• .htaccess for Apache environments
• config.local.php — secure CRM/SMTP settings on server

A working bilingual corporate site, ready for ads and SEO.

Scope:

• 10 pages (5 uk + 5 ru)
• 2 product lines (HELPER+, Bloomy)
• 2 business segments (B2B, B2C)
• Revenue calculators on product pages
• Lead forms → Odoo CRM + email

Technical outcome:

• Clean-code site — full client ownership, no annual platform subscription
• One design system across all pages and languages
• SEO architecture from scratch: canonical, hreflang, JSON-LD, sitemap, llms.txt
• Core Web Vitals optimization: critical CSS, hero srcset, lazy images, async fonts

Post-launch AI X-Ray (July 2026): 95/100 — Performance 95, SEO 98, Security 95, Accessibility 95, Code Quality 100, Conversion 91. LCP 1.7s, PSI Mobile 95 / Desktop 98.

What the client got:

• A site that explains a complex ecosystem in plain language
• Sales tooling: calculators, CTAs, CRM-connected forms
• Room to scale: new landings can follow the same architecture
• Public launch: www.vendstore.com.ua