Tumbolo is a campaign microsite developed for Shikshagraha, a nationwide movement working towards transforming one million public schools across India. The initiative brings together teachers, parents, young people, and district officials to contribute towards improving education.
The campaign invites people to answer an important question: “What does it take for a young person to be ready for life?” To support this initiative, Shikshagraha partnered with Pixel Studios to develop an interactive digital platform where visitors could share their thoughts through one-sentence responses.
The platform transforms individual contributions into a collective visual experience using interactive animations and dynamic voice visualisation. The project focused on multilingual accessibility, engaging UI/UX, and customised backend functionality. Pixel Studios successfully designed and developed the complete microsite within an accelerated two-day timeline.
The Challenge
The client required a lightweight and interactive campaign website that could encourage participation from audiences across different regions of India. The platform needed to support multiple languages, dynamic visual elements, and efficient content management while maintaining website performance.
The major challenges included:
- Short Development Timeline: Completing the complete website design, frontend development, backend functionality, and multilingual implementation within two days.
- Interactive Visual Experience: Creating a spiral animation that dynamically represents the growing number of campaign contributions.
- Dynamic Voice Display: Displaying submitted responses through randomly appearing pop-ups based on different persona categories.
- Multilingual Accessibility: Implementing eight languages while maintaining consistent website layouts and content structures.
- Custom Backend Requirements: Developing an administration panel for managing voice submissions, persona categories, contribution counts, and bulk uploads.
- Website Performance: Ensuring smooth functionality across mobile devices and slower internet connections.
- Centralised Enquiry Management: Integrating regional enquiry forms with a centralised data management system.
Our Strategy and Implementation
Pixel Studios adopted an AI-assisted development approach combined with lightweight frontend technologies and customised backend development to meet the client’s requirements within the two-day deadline.
Interactive UI/UX Design and Animation
We developed a campaign-focused interface that represents how individual voices come together to create a collective movement. The homepage features an animated spiral visualisation that expands based on the number of contributions. Additional animations, including a customised logo loading screen and stitch-line formations across inner pages, maintain visual consistency throughout the website.
Custom Backend Development
A customised administration panel was developed to simplify campaign operations and content management. The backend enables the team to organise voice submissions by persona, upload individual or bulk content, manage contribution counts, and update campaign information across different language versions.
Eight-Language Website Development
To make the campaign accessible to diverse audiences, we implemented the microsite in eight languages. AI development tools helped accelerate multilingual content preparation and integration while maintaining consistent page structures and design elements.
AI-Assisted Development
We leveraged AI development tools to accelerate repetitive development tasks, backend functionality, and multilingual implementation. This approach helped streamline the development process and support the accelerated delivery requirement.
Performance and Form Integration
The website was developed with lightweight frontend implementation, responsive layouts, and efficient animation handling to support different devices and network conditions. Regional enquiry forms were also integrated into the respective language versions, with submissions connected to Google Sheets for centralised tracking.
Key Features and Functionalities
The Tumbolo microsite combines interactive design with customised technical functionality to create an engaging campaign experience.
- Interactive Spiral Visualisation: An animated spiral represents collective campaign contributions through individual stitches and a dynamically growing visual pattern.
- Three Visualisation Modes: Single Pass, Two Pass, and Spiral View provide different ways to experience the contribution visualisation.
- Live Voice Counter: Displays the total number of submitted responses and reflects growing campaign participation.
- Animated Loading Screen: A customised animated logo creates an engaging introduction to the website.
- Stitch-Line Animations: Animated visual elements across inner pages maintain the campaign's creative identity.
- Persona-Based Voice Notes: Randomly appearing voice responses allow visitors to explore perspectives from young people, parents, educators, and the wider community.
- Custom Admin Dashboard: Enables efficient management of voice submissions, persona categories, contribution counts, and campaign content.
- Bulk Upload Functionality: Simplifies the management of large volumes of voice responses.
- Eight-Language Support: Makes the campaign accessible to audiences across different linguistic regions.
- Google Sheets Integration: Collects regional enquiry submissions in a centralised location.
- Responsive Design: Supports a consistent browsing experience across desktops, tablets, and mobile devices.
Technology Stack
| Technology | Purpose |
|---|---|
| HTML5 | Website structure |
| CSS3 | Styling and responsive layouts |
| JavaScript | Interactive functionality |
| PHP | Backend and admin panel development |
| API Integration | Frontend and backend communication |
| HTML5 Canvas | Interactive spiral visualisation |
| Google Sheets | Enquiry collection and tracking |
| AI Development Tools | Accelerated development and multilingual implementation |
Results and Outcomes
Pixel Studios successfully delivered the complete Tumbolo campaign microsite within the required two-day development timeline. The project brought together interactive animations, multilingual implementation, and customised backend functionality into a unified digital platform.
Key outcomes included:
- Two-Day Project Delivery: Completed website design, development, multilingual implementation, and backend functionality within the accelerated timeline.
- Eight-Language Accessibility: Implemented multilingual support to connect with audiences across different linguistic regions of India.
- Interactive Campaign Experience: Developed a dynamic spiral visualisation and live voice counter to represent collective participation.
- Simplified Content Management: Delivered a customised administration panel with persona-based management and bulk upload functionality.
- Improved Accessibility: Implemented a responsive and lightweight website for different devices and network conditions.
- Centralised Enquiry Tracking: Connected regional forms with Google Sheets for easier submission management.
Conclusion
The Tumbolo project demonstrates how creative website design, interactive technology, and customised development can support large-scale digital campaigns. Pixel Studios transformed Shikshagraha’s campaign concept into an engaging multilingual platform that brings individual voices together through a shared digital experience.
By combining AI-assisted development, interactive UI/UX, eight-language support, and customised backend functionality, we successfully delivered the complete microsite within just two days.
Looking to build an interactive website or a customised digital platform? Pixel Studios brings together creative design and technology to develop digital experiences that connect with audiences and support organisational goals.
