Case Study: Rebuilding My Design Academia for 150% Lead Growth

Rebuilding the digital presence of My Design Academia in Pune resulted in a 150% increase in monthly student enrollment inquiries within 90 days of launch. By replacing a bloated page-builder template with a bespoke, statically generated React architecture, we eliminated layout shifting and cut mobile loading times from 6.4 seconds down to 0.8 seconds.

My Design Academia, based in Viman Nagar, Pune, prepares aspirants for highly competitive design entrance exams like NID, NIFT, UCEED, and CEED. While the institute delivered exceptional classroom outcomes, their previous website was failing to capture digital inquiries. High bounce rates on mobile landing pages were draining marketing spend on Google Ads, and search console indexes reported widespread layout shift errors (CLS) that compromised their search engine visibility.

The Challenge: Low Conversion Rates & Indexing Failures

The original website relied on WordPress templates and heavy plugins. When potential students visited from mobile phones, the page loads stalled, causing a high bounce rate. Additionally, Google's bots struggled to index the dynamic layout shifts caused by poorly structured CSS animations, preventing the site from ranking for local intent queries like "NID entrance exam coaching in Pune."

We audited their site performance and identified three primary bottlenecks:

• Render-Blocking JS Resources: Standard block elements loaded 450KB of unnecessary styling components before rendering any page copy.
• Layout Shifting (CLS): Sliders and dynamically loaded student portfolio grids lacked container bounds, causing the screen to jump while assets loaded.
• Friction in Inquiry Funnel: Student contact forms required seven form fields, dropping conversion momentum on mobile devices.

Our Solution: Bespoke React Engineering & Performance Optimization

We designed a custom React architecture centered on direct speed and zero-friction lead capture. Our engineering process prioritized speed: we replaced dynamic database calls with static site generation (SSG) hosted on edge servers, ensuring immediate delivery of course details.

1. Static Site Generation with Vite

To eliminate database response delays, we pre-rendered the entire site structure into optimized static assets. During build compilation, Vite bundles React components and tree-shakes unused classes, ensuring the client downloads a minimal initial payload:

// build configuration segment for optimized tree-shaking
export default defineConfig({
  plugins: [react()],
  build: {
    target: 'esnext',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        pure_funcs: ['console.log']
      }
    }
  }
});

2. Responsive Portfolio Grid with Zero CLS

To showcase student artwork without layout shifts, we engineered a CSS grid with strict aspect ratios and blur placeholders. By reserving DOM container sizes before images loaded, CLS scores dropped to zero:

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.portfolio-item {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--code-bg);
  overflow: hidden;
  border-radius: 8px;
}

.portfolio-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. Streamlined Conversion Pipeline

We redesigned the registration form from a multi-field questionnaire into a simple three-input capture block (Name, Phone, Target Exam). We also implemented serverless routing via API routes, ensuring student registrations were captured instantly even under poor network conditions.

SEO and Link Infrastructure

Achieving stable search indexation for React applications requires careful meta tag routing. By configuring dynamic header mapping and canonical references, we ensured search crawlers read course details correctly. For details on optimizing client-rendered indexability, review our companion guide on React SPA SEO Best Practices.

If you're looking to convert organic traffic into paying customers with speed-remediated custom development, learn more about our Custom Website Development Service page or reach out to us today to rebuild your website pipeline.