Entrepreneurial energy online
E-Cell KGEC Website
Next.js 14, TailwindCSS, and Framer Motion power an animated preloader, custom navbar, and scroll-reactive gallery that mirror the KGEC E-Cell vibe while staying performant and accessible.
Timeline
Nov–Dec 2024
Screens & states
26
Feedback loops
4 review cycles
Tech focus
Project gallery
Visual highlights
A quick look at the states, flows, and artifacts that made this launch feel polished.
Project features
Crafted to feel human, performant, and scalable
As the frontend and UI/UX engineer for KGEC Dev Community, I owned the design system, motion language, and responsive frontend for the official E-Cell site— translating briefings into animated surfaces, accessible flows, and stakeholder-ready documentation.
Animated surface system
Crafted an animated preloader, custom navbar, and section reveals with Framer Motion + Lenis for smooth entry states that match the club's energy.
Scroll-reactive gallery
Built a gallery and event lineup that animate on scroll, staggering cards, badges, and CTA pins to keep the story immersive.
Feedback-led UX
Ran weekly student reviews, refining hierarchy, color contrast, and copy until usability scores hit the target.
Event storytelling
Designed modular event pages with animated headers, timeline slots, and sponsor callouts, ready for future CMS content.
Services & deliverables
End-to-end partnership
Strategy, engineering, and activation workstreams stayed tightly aligned so the launch felt intentional.
Service
UI/UX design
Led discovery with E-Cell leadership, translated goals into user journeys, wireframes, and final UI tied to the KGEC palette.
- Journey maps
- Hi-fi mockups
- Component spec
Service
Frontend build
Implemented the Next.js app with shared layout primitives, animated sections, and performance budgets.
- Responsive grid
- Animation utilities
- Perf checks
Service
Iteration & QA
Facilitated student testing, triaged issues, and documented the motion + content guidelines for future contributors.
- Usability reports
- Accessibility fixes
- Handoff docs
Accomplishments
Business impact & program achievements
We measure success with data, ceremonies, and the teams who keep the experience running.
Stakeholder approval
1st review
Leadership signed off after the first design review thanks to aligned visuals and motion prototypes.
Performance
LCP 1.7s
Optimized media, preloading, and code-splitting keep interactions smooth even on campus Wi-Fi.
Launch impact
+38% sign-ups
Post-launch analytics showed a lift in event registrations across the first two weeks.
Landmarks
Milestones that shaped the roadmap
From discovery to public launch we ran fixed-length pulses with clear artifacts at every turn.
Kickoff & research
Met KGEC E-Cell core + Dev Community mentors, gathered goals, and audited prior assets.
Experience architecture
Drafted IA, user journeys, and low-fi flows for hero, events, gallery, and partner sections.
Motion prototyping
Built Framer Motion prototypes covering preloader, navbar, and scroll-triggered cards.
Build & QA
Implemented Next.js pages, integrated animations, and ran accessibility + performance sweeps.
Feedback & launch
Incorporated student feedback, polished content, and deployed the production build.