Case Study · E-commerce · Website Optimization
Case Study: Ishtar Boutique
Website built from scratch + performance engineering, accessibility, SEO & AI visuals to turn Ishtar Boutique into a fast, elegant, and search-ready online fashion experience.
Full Site Build PageSpeed Optimization Accessibility (WCAG) SEO & Schema AI Visuals
AI Visual System — Signature Scenes
A trio of AI-crafted visuals that define the new Ishtar Boutique look: cinematic lighting, premium textures, and ecommerce-ready composition.
Impact (Google PageSpeed Insights — Desktop)
0
Performance Score
0
Accessibility Score
0
Best Practices Score
0
SEO Score
Technical & UX Snapshot
0
Full Website Built from Scratch
0
Core Categories Optimized (Perf, Access, SEO, UX)
0
Mobile-Friendly Layout
0
Google PageSpeed Audit Implemented
0
AI Visual System Integrated
Ishtar Boutique
Primary Brand
Project Focus (Build → Optimize → Scale)
Full Website Development
- Designed and developed the entire site structure, UI, and layout from zero.
- Modern, elegant ecommerce experience tailored to Ishtar Boutique.
- Responsive grid and components for both mobile and desktop visitors.
Performance & Engineering
- Minified CSS, JavaScript, and HTML to reduce file size.
- Lazy loading, responsive images, and WebP media for speed.
- Caching, preloading instructions, and removal of render-blocking resources.
SEO, Accessibility & Audit
- Optimized meta titles, descriptions, and clean URL structure.
- Structured data (schema), robots.txt, and sitemap configuration.
- WCAG-aligned color contrast, alt text, and keyboard navigation.
Visual & Brand System
Palette & Type
Deep Navy · Primary
Midnight Accent
Gold Highlight
Soft Light
- Typography system tuned for both readability and premium feel.
- Consistent component spacing and visual hierarchy across pages.
- Clean, editorial layout to match Ishtar’s fashion aesthetic.
AI-Generated Visual Content
- AI-generated product scenes optimized for fast loading.
- Visual guidelines to keep “AI made” images on-brand and consistent.
- Balanced resolution vs. file size using compression and next-gen formats.
AI Visual System — Gallery & Creative Analysis
Flagship Hero Scene
- Cinematic lighting draws attention straight to the hero product.
- Rich, moody background sits on top of the brand’s deep navy palette.
- Composition designed to work as homepage hero and ad creative with safe area for copy.
Lifestyle Storytelling Visual
- Uses props and environment to communicate scent, feel, and mood.
- Negative space intentionally left for headlines, prices, and CTAs in overlays.
- Exported in an optimized format so it can live on category pages without harming speed.
Facial Oil Close-Up
- Clean, minimal still life to highlight label, glass, and liquid texture.
- Soft gradients reinforce a self-care and skincare positioning.
- Optimized for weight so it can be reused in email banners and PDPs.
Performance Audit & Visual Transformations
Technical Health Snapshot
- Scores of 96 Performance, 93 Accessibility, 96 Best Practices, and 100 SEO on Desktop.
- Confirms that AI visuals and design choices did not compromise loading speed.
- Provides a baseline for ongoing optimization and future A/B testing.
Hero Product Scene — Before & After
Before
After
- Lighting and color grading reworked to feel more premium and on-brand.
- Background simplified to reduce distraction and keep focus on the product.
- File size reduced while improving perceived quality — better for both UX and SEO.
Eucalyptus Product — Before & After
Before
After
- Introduced natural textures and props to express freshness and ingredients.
- Improved composition makes the product clearly readable even on mobile.
- Optimized aspect ratio for Reels cuts, story placements, and PDP headers.
Romance Natural Perfume — Before & After
Before
After
- Shifted from flat presentation to a story-driven composition.
- Color palette tuned to feel romantic and luxurious while fitting brand colors.
- Final export compressed and converted for fast loading on collection pages.
Analytics — Visualized
Lighthouse Scores (Desktop)
Higher is better (0–100)
Optimization Strength Radar
What I Delivered
Full Website Development
- Built the complete site architecture, UI, and layout from zero.
- Designed with ecommerce flows and conversions in mind.
- Responsive design tested across mobile and desktop.
Performance Engineering
- Minified CSS/JS/HTML and optimized server response.
- Lazy loading, responsive images, and WebP media formats.
- Caching, preloading, and elimination of render-blocking resources.
SEO, Accessibility & Audit
- On-page SEO setup with meta tags, clean URLs, and schema markup.
- Accessibility improvements following WCAG guidelines.
- Technical audit using Google PageSpeed Insights.
Outcomes & Next Steps
Outcome
- Performance: 96 · Accessibility: 93 · Best Practices: 96 · SEO: 100 (Desktop).
- Super-fast loading and smoother UX for both mobile and desktop visitors.
- Stronger SEO foundations and technical health for long-term organic growth.
Next
- Continue monitoring Core Web Vitals and real-user performance.
- Iterate on AI visuals for campaigns and landing pages.
- Scale content and category pages using the optimized technical base.
© Al Khachaan Marketing Agency — Performance Websites • SEO • AI Visuals
0 comments