Echelon One Framer Website Development

Elcid Villegas, founder of Echelon One, a premium motion design studio, needed a modern website to showcase the studio’s capabilities and portfolio in a way that reflected their high-end, narrative-driven approach. The project involved designing and developing a single-page website as the main hub, built in Framer with layouts created in Figma. In addition to the main site, a CMS-powered case studies index and individual case study detail pages were created.

The detail pages used a pitch deck–style format, guiding visitors through each project’s journey from challenge to outcome. The site needed to align with Echelon One’s established branding while introducing a fresh, visually striking presentation supported by AI-assisted content creation.

Balancing Creativity and Simplicity – Designing a clean, minimal one-page website without losing Echelon One’s creative edge.

Content Creation – No pre-existing copy meant generating compelling, brand-aligned content from scratch using AI tools.

CMS Architecture – Structuring the case studies index and detail pages for easy updates while keeping design consistency.

Strict Brand Alignment – Every visual and textual element had to match the existing brand identity.

Narrative Case Study Experience – Crafting pitch deck–style case study layouts to deliver a guided, story-driven portfolio experience.

Brand Discovery: Reviewed Echelon One’s visual identity, tone, and goals to set a design direction.

AI-Enhanced Copywriting: Developed all copy for the main site and case studies using AI tools, then refined for tone and clarity.

Figma Design: Created high-fidelity layouts with a modular grid, clean typography, and strong use of whitespace.

Framer Development: Built the main one-page site and separate CMS templates for the case index and details pages.

Pitch Deck–Style Case Studies: Designed detail pages to present each project as a journey, with clear sections for the brief, challenges, approach, and results.

Ongoing Client Feedback: Worked closely with Elcid Villegas to refine visuals, motion, and messaging at every stage.

Single-page main website designed in Figma and built in Framer

Separate CMS-powered case studies index and pitch deck–style detail pages

AI-assisted copywriting for all pages and case studies

On-brand typography, color palette, and visual hierarchy

Responsive layouts optimized for desktop, tablet, and mobile

Smooth animations and micro-interactions

Dynamic CMS – Easy creation of new case studies with images, copy, and visual storytelling

Single-Page Main Site – Focused, scrollable experience that quickly communicates value

Pitch Deck–Style Case Studies – Engaging, guided storytelling for each project

Responsive Design – Optimized performance across devices

Scalable Framework – Ready for future updates without structural changes

The final build delivered a clean, modern, and highly functional online presence that positioned Echelon One as a premium motion design studio. The single-page main site offered a streamlined, high-impact introduction to the brand, while the separate case studies index and pitch deck–style detail pages created a richer storytelling experience for their work.

The CMS integration allowed Echelon One to add and manage case studies without technical help, ensuring the portfolio remains fresh and relevant. The combination of thoughtful UX/UI design, smooth interactions, and AI-enhanced content received positive feedback from Elcid Villegas and their network, reinforcing Echelon One’s image as a creative leader in motion design.