This is about
Code, Design
4 minutes
25 Feb 2025
This is about
Code, Design
4 minutes
25 Feb 2025
The Journey of Building HeroKit: A SaaS Product
In the ever-evolving landscape of web design tools, HeroKit emerged as our response to the growing demand for more creative, memorable components that stand out.
This blog post delves into our journey from concept to launch, highlighting the technical challenges, strategic validations, and lessons learned along the way.
From Blobmixer to HeroKit
The idea for HeroKit originated from Blobmixer, a popular tool that allowed users to create “blob” animations. Users then began requesting embedded versions of Blobmixer on their websites, indicating a need for more versatile web design tools. This feedback sparked the vision for HeroKit—a platform designed to empower creators to embed their own WebGL creations more easily.
What began as answering multiple user's requests evolved into developing an entire design product.
Validating the Idea
Before diving into development, we recognized the importance of validating our idea. We created a simple landing page to gauge interest and gather user feedback. The response was overwhelmingly positive, with potential users expressing enthusiasm for features like real-time collaboration and dynamic image uploads. This validation step was crucial as it confirmed market demand and guided our feature prioritization.
Given the product's promising potential, we decided to explore the concept further.
Choosing the Right Tech Stack
With validation in place, we focused on selecting a tech stack that would facilitate rapid development and scalability:
- Frontend: We chose Next.js for its robust framework and ability to handle dynamic content efficiently.
- Backend & Authentication: Supabase was selected for its seamless integration with authentication and database management, ensuring reliability and scalability.
- Payment Processing: Paddle was our go-to solution, offering a Merchant of Record service that simplified global launches and tax compliance.
- Email Marketing: We’re long-term users of Mailchimp and decided to also use it for HeroKit.
Overall, this tech stack turned out to be a good solid choice - a mix of flexibility with robustness, allowing us to get things done in time without too much complication.
The core idea was to make this service easily embeddable. We focused on making it as JavaScript-friendly as possible (we're developers after all!). After some research and testing, we successfully proved the concept using Web components with a custom <hero-kit /> tag to embed it. You simply add the embeddable code of your component, not having to worry about performance or conflicts, and our HeroKit library will take care of the rest.
After some research and testing, we successfully proved the concept using Web components with a custom <hero-kit /> tag to embed it.
Endless possibilities
While starting with an MVP was necessary, we quickly saw the product's vast potential. We created an initial set of heroes suitable for various website types. Need to spice up your website with some 3D elements? We've got you covered. Looking to add fancy image animations to your portfolio? We can help with that too. We sketched and voted on hero ideas internally to determine the best starting lineup.
Recently, we launched one of our most exciting features: custom image uploadsSee also
HeroKit - Major UpdateJournal. Try out our Gallery hero to experience these new capabilities firsthand. And this is just the beginning—our feature wishlist continues to grow and the ambition is showing.
Rapid Development & MVP Launch
Adopting an iterative approach, we prioritized features based on user feedback from our landing page. Our MVP focused on allowing a good variety of heroes to be customized and seamless integration with popular website builders.
Leveraging Next.js's rapid development capabilities and Supabase's backend ease, we were able to launch HeroKit quickly. The use of Paddle allowed us to concentrate on product development rather than logistical complexities. We also decided to ship the first Beta version before Payments were even implemented which gave us valuable insights. And Supabase helped us leverage the heavy lifting with its features, such as the storage API and authentication.
Lessons Learned
There are a couple of points that we can share with you.
- Early Validation is Key: Our landing page not only validated the idea but also provided crucial insights into user preferences, guiding our feature development.
- Tech Stack Matters: Choosing tools that support rapid iteration and scalability was pivotal in bringing HeroKit to market quickly.
- Leverage External Tools: Partnering with Supabase and Paddle allowed us to focus on product innovation rather than getting bogged down by payment logistics.
- Iterate Continuously: User feedback post-launch has been invaluable, enabling continuous improvement and keeping HeroKit aligned with user needs.
Conclusion
Creating HeroKit reminded us of valuable lessons about product development: validate your ideas early, choose your tech stack wisely, and keep refining based on what you learn. We're still growing and improving, guided by our users' needs and feedback. If you're ever building your own SaaS product, this approach can help you bring your idea to the market.
We're excited to continue refining HeroKit and look forward to seeing how the community will use it to create amazing web experiences!
Droplets
Droplets
Sign-up to get the latest insight from 14islands. We send a newsletter only once every quarter with inspirational links and creative news. It's short and sweet. You can unsubscribe it at any time.
