Inspiration
In our Information Visualization course (SI 649), I wanted to create an interactive website that feels joyful yet insightful, letting users explore different facets of happiness across relationships, work, health, and personal growth. The goal was not just static data display, but a storytelling experience that feels fluid, engaging, and web-native.
What it does
Multi-Page Experience: Users navigate through different themed pages (e.g., Work Happiness, Social Happiness, Personal Growth) in a narrative flow. Data Visualizations: Charts, images, and text are combined to let users interact with survey-based happiness data. Responsive Design: Fully mobile and desktop-friendly UI thanks to Bolt’s Tailwind + Next.js scaffolding. Smooth Navigation: Clean layout with scroll-based transitions between story sections. Storytelling-First: Each section is crafted like a chapter in a happiness journey.
How we built it
Frontend Generation: Started by generating the project structure and individual page layouts using Bolt AI’s website generator. Tech Stack: Bolt gave me a Next.js + Tailwind CSS + TypeScript setup out-of-the-box. UI Customization: Modified the auto-generated pages for better visual hierarchy, color palette alignment, and spacing. Added hero images and page transitions manually. Content Writing: Created customized narratives for each section, blending text and visuals for emotional impact. Deployment: Deployed the final website on github for fast public access and sharing.
Challenges we ran into
Page Linking: Bolt generates static pages fast, but making them flow like a story (with next/previous navigation and thematic consistency) required manual routing tweaks. Data Embedding: I had to customize Bolt’s placeholder sections to embed charts and graphics that matched my story. Consistent Styling: Since Bolt-generated pages come with default layouts, I spent extra time making the typography, color, and layout feel coherent across pages.
Accomplishments that we're proud of
Went from zero to live website in under 2 days. Balanced auto-generated UI from Bolt with my own design touches for personality and consistency. Created a data storytelling flow that feels lightweight but leaves emotional impact.
What we learned
Bolt AI is amazing for scaffolding, but good UX still needs human-driven tweaks and storytelling sense. Learned how to navigate and customize Next.js routing and Tailwind styling efficiently post-generation. Writing short, engaging microcopy matters just as much as visual layout in web storytelling.
What's next for The Happiness Experiment: A Storytelling Website
Add Interactive Visualizations: Integrate more interactive D3.js or Chart.js-based happiness charts.
User Input: Let users submit their own happiness reflections or stories. Better Mobile Optimizations: Make transitions and layouts even more fluid for mobile users. Deployment Cleanup: Optimize load times and compress image assets for performance. Open-source Polish: Improve README, write setup instructions, and open it for community contributions.
Log in or sign up for Devpost to join the conversation.