Case Study 3 of 7

Education / Frontend•2024•Live & Delivered

Kids Learn

Early-Education Admissions Portal & Curriculum Explorer

My Role

Frontend Developer & UI Designer

Timeline

2 Months

Team

Solo Consultant

Primary Stack

React, Tailwind CSS, Framer Motion

Visit Live App View Repository

Key Verified Outcomes & Metrics

98/100

Lighthouse Performance

Audited Core Web Vitals on mobile

+35%

Inquiry Growth

Increase in admission leads in first 60 days

1.1s

First Contentful Paint

Sub-second initial paint on 4G connections

82%

Mobile Traffic

Optimized touch navigation across mobile devices

Project Overview & The Core Problem

Give a growing early-learning preschool a trusted, joyful, and professional web presence that converts local parents researching schools on mobile devices into campus tour bookings.

My Responsibilities & Contributions

Designed and coded a custom, playful design system with child-friendly color palettes and accessible typography.
Engineered lightweight spring physics animations using Framer Motion to captivate visitors without lag.
Created an interactive fee calculator and one-click WhatsApp/Call admissions inquiry widget.
Optimized assets and metadata achieving a 98/100 mobile Google Lighthouse score.

Technical Architecture

System Design & Component Flow

1. Frontend Client

React SPA with componentized atomic design and Framer Motion

2. Backend & APIs

3. Database / AI Tooling

Data Flow Pipeline

1. Land

Warm welcoming hero with campus tour CTA

2. Explore

Interactive curriculum age-group switcher

3. Verify

Teacher qualification cards and campus safety metrics

4. Convert

Instant WhatsApp tour booking or admission inquiry form

Engineering Challenges & Implemented Solutions

Building in the real world means encountering unexpected edge cases, latency bottlenecks, and technical trade-offs.

Challenge 01

Parent Anxiety & Trust Factor

Parents require instant reassurance regarding child safety, educator qualifications, and hygiene before making contact.

Solution Implemented

Proof-First Visual Hierarchy

Structured homepage around social proof: verified teacher credentials, safety certifications, and parent testimonials upfront.

Challenge 02

Heavy Media Assets vs Mobile Speed

Preschools rely heavily on classroom photos and vibrant illustrations that typically drag down mobile performance.

Solution Implemented

Aggressive Asset Optimization

Converted all photographic assets to WebP with responsive `srcset` and lazy loading, keeping total bundle under 180kB.

Technologies Utilized in Kids Learn

ReactTailwind CSSFramer MotionJavaScript

Core Capabilities Shipped

Interactive age-group curriculum explorer (Toddler, Nursery, Kindergarten)
Campus virtual photo tour with lightbox gallery and high-res previews
Instant WhatsApp inquiry widget connecting parents directly with admissions counselors
Comprehensive FAQ accordion addressing parent safety, food, and transport queries

Final Outcome

Client recorded a 35% increase in direct tour bookings during the 2024 academic cycle, with audited 98/100 mobile Lighthouse performance.