Ather Energy
Discover Ather EV scooters - the best electric scooter in India. Check performance, smart features, range, price, charging and book your electric scooter online.
Tech Stack:
NextJsJavaScriptSCSSStrapiAntdGSAPOverview
Ather Energy is one of India's leading electric vehicle manufacturers, pioneering the transition to sustainable urban mobility with its high-performance, smart electric scooters. The digital flagship platform serves as the central hub for user engagement, enabling customers to configure their vehicles, check real-time pricing and subsidies, explore battery specifications, locate charging infrastructure, and book test rides or scooters online.
The web application was designed to serve as a premium digital showroom, matching the advanced engineering and sleek aesthetic of Ather's physical vehicles with a high-fidelity, interactive online experience.
Goals
- Fluid Animations: Deliver premium, high-fidelity UI animations and micro-interactions that communicate the vehicle's tech-forward identity.
- Top-Tier Performance: Optimize rendering paths and asset sizes to maintain fast load times, even with heavy graphical and interactive elements.
- CMS Flexibility: Integrate Strapi CMS to allow content and marketing teams to quickly update page content, media, and features.
- Design System Fidelity: Build reusable component libraries that adhere perfectly to design specifications.
- Seamless Responsive Layouts: Ensure identical premium styling and performance on desktop, tablet, and mobile browsers.
My Role
- Frontend Developer: Spearheaded the frontend development of premium launch pages, custom interactive components, fluid animations and CMS configurations.
- Animation Engineering: Engineered lightweight, fluid animation experiences and smooth transitions to deliver premium using GSAP, highly interactive user journeys.
- Component Development & Layouts: Built modular interfaces utilizing Ant Design (Antd) custom styles and SCSS for scalable, clean stylesheets.
- CMS Integration: Structured schemas in Strapi for dynamic, real-time website updates.
Key Projects & Components
- Ather Rizta Launch Page: Interactive, media-rich landing page showcasing Ather's family electric scooter with custom animations and specs.
- Ather 450 Series & Apex Pages: High-fidelity flagship product pages featuring seamless GSAP transitions, technical details, and performance specs.
- Booking & Checkout Funnel: Frictionless multi-step booking process allowing users to configure scooters and place orders online.
- Test Ride Booking: Seamless booking utility to schedule test rides at the nearest Experience Centres.
- Interactive EMI Calculator: Smart financial tool enabling users to calculate monthly loan payments, down payments, and interest options.
- Model Comparison Tool: Side-by-side comparison matrix for comparing technical specs, pricing, and features of different Ather models.
- Dealer Locator (Locate Dealer): Interactive map search engine for finding nearby dealerships and fast-charging grids.
- Individual Dealer Pages: Informational pages detailing operating hours, contact info, and directions for specific Experience Centres.
- City-wise Dynamic Pricing: Location-aware pricing system detailing state-specific subsidies, on-road prices, and local taxes.
- TCO (Total Cost of Ownership) Calculator: Comparative tool showing lifetime savings of Ather EV scooters versus standard petrol vehicles.
- Battery & Warranty Portal: Informational page detailing Ather's battery engineering, health metrics, and warranty terms.
- Ather Stack Showcase: Deep-dive feature page highlighting Ather's smart dashboard OS, OTA updates, navigation, and app integration.
- Ather Blogs Hub: CMS-driven feed for all articles, updates, and community highlights.
- Investor Relations Portal: Dedicated corporate and financial portal providing regulatory disclosures, quarterly reports, and ESG statements.
- Opt-in Lead Form Component: Polished, animated lead capture component with client-side validation and seamless feedback states (embedded across booking and test ride pages).
- Modern Global Header & Navigation: Re-architected mega-menu and header navigation optimized for speed, accessibility, and smooth hover animations (global component).
Awards & Recognition
- Kyoorius Design Awards BabyBlue Elephant (2024): Recognized for exceptional design fidelity and high-performance frontend engineering on a high-visibility project, achieving fluid, animation-rich experiences and optimized load times.
What I Learned
- Cross-Functional Team Collaboration: Learned how to collaborate effectively within a fast-paced environment alongside designers, backend engineers, product owners, and marketing teams to drive unified release goals.
- Managing Multiple Projects & Product Streams: Gained experience concurrently managing and delivering on multiple high-impact projects, from major product launches (Rizta, Apex) to financial utilities and booking systems.
- High-Performance Motion Design: Deepened my knowledge of maintaining strict performance budgets while rendering rich, fluid animation experiences (using GSAP and CSS transitions) on public-facing sites with high traffic.
- Scalable Component Architecture: Standardized reusable component models integrating dynamic CMS (Strapi) configurations with customized design libraries.