Pehchaan 1.0
Project Overview
Pehchaan 1.0 is the MVP for a startup targeting young audiences with a unique concept: a platform to discover and purchase creative workshops — art, painting, poetry, music, and other hands-on experiences. The goal was to create a digital brand that resonated with a younger generation and felt as creative as the workshops it was selling.
We took a design-first approach: the project began with full UI/UX design and custom 2D illustrations that defined the platform's visual identity and personality. Once the design language was established, we developed the animated website in React — bringing the illustrated world to life using Framer Motion for smooth, expressive animations throughout the experience.
Key Features
- Custom 2D Illustrations: Original illustrations were created as part of the UI/UX phase, giving Pehchaan a distinctive visual identity that stood apart from generic startup websites. Illustrations were integrated directly into the animations and page layouts.
- Framer Motion Animations: Every section of the site uses smooth, purposeful animations — transitions, scroll reveals, interactive motion — to create an engaging, lively experience that appeals to the young target audience.
- Unique Workshop-Themed UI: The design system was built around the concept of creative workshops — warm colors, expressive typography, and a playful-but-polished aesthetic that communicates creativity and accessibility.
- Workshop Showcase: The platform clearly presents the range of workshops available (art, painting, poetry, and others), with a layout designed to make browsing and purchasing feel intuitive and exciting.
- Young Audience Focus: Every design and copy decision was made with a young demographic in mind — energetic, visual-first, and built to drive engagement and sign-ups.
- Responsive Design: Fully responsive across devices, ensuring the animated experience translates well to mobile where the target audience primarily spends time.
Technologies Used
- Framework: React
- Styling: Sass
- Animations: Framer Motion
Challenges & Learnings
- Balancing Animation and Performance: With heavy use of Framer Motion and custom illustrations, keeping load times fast required lazy loading, careful animation sequencing, and reducing unnecessary re-renders.
- Creating Reusable Animated Components: Animations needed to feel consistent across all sections while remaining flexible enough to apply to different content types without code duplication.
- Translating Illustrations into Motion: Working with 2D illustrations as animated UI elements required close collaboration between the design and development phases to ensure the animations felt natural rather than mechanical.
- Responsive Design with Complex Layouts: Ensuring that illustrated and animated layouts translated correctly across screen sizes — especially mobile — required extensive testing and fine-tuning.
Outcome
Pehchaan 1.0 received strong positive feedback from the founding team and early users. The distinctive visual identity, combined with the animated experience, gave the startup a credible and exciting first impression. The MVP laid the foundation for Pehchaan 2.0, with a clear design system and brand voice to build upon.
🔗 Live Project: https://pehchaan-v1.vercel.app/
