Role: Product Designer & Framer Developer Tools: Figma, Framer, LottieFiles, Notion Duration: 1 Week Link: campusshuttlers.framer.website

Campus Shuttlers is a web platform designed to make campus transportation simple and reliable. It connects students with verified shuttle services while offering clear booking information and smooth navigation across devices.

The goal was to create a clean, modern, and mobile-optimized website that communicates trust, ease of use, and accessibility for students.

I handled the project end-to-end from UI/UX design in Figma to development and animation in Framer. My key responsibilities included:

Designing a user-friendly website layout focused on clarity and quick decision-making.

Developing the website in Framer, ensuring responsive design and fast performance.

Using LottieFiles to integrate subtle motion graphics and micro-interactions that enhance the overall feel without sacrificing load time.

The design direction centered on simplicity, trust, and ease of navigation all critical for a student audience. Key design choices included:

A friendly color palette and accessible typography to maintain readability.

A prominent hero section with a clear call to action (“Join Waitlist”).

Integration of Lottie animations to add liveliness to sections like loading states and CTA highlights.

After finalizing the design in Figma, I developed the waitlist site in Framer, ensuring that every component aligned with the intended user experience.

In Framer, I leveraged:

Smart components for reusable sections like CTAs.

Responsive layout tools to make the site fluid across mobile, tablet, and desktop.

Scroll and hover animations to add depth and movement.

LottieFiles animations are optimized for the web, keeping the site lightweight and engaging.

The final waitlist website delivers a smooth, interactive, and visually consistent experience. It effectively communicates Campus Shuttlers’ value proposition while maintaining high performance and user-friendly motion design.

The project stands as a strong example of how Framer + LottieFiles can bridge the gap between design and development — bringing modern, motion-driven UI to life with efficiency.

Framer’s no-code flexibility made it easy to build and test responsive prototypes fast.

LottieFiles provided a seamless way to integrate motion without compromising load time.

Managing both design and development ensured creative consistency from concept to live site.