🚪How Hua went from No-Code Prototype to $5,000 revenue
The No-Code Succes Story of Hua and Typogram
Hello, Katt here.
July has been a quiet month in terms of freelancing and to be honest it is pretty great. It means time for unfinished business like and scouting the internet for some new great interviews so I can start publishing again on a weekly schedule.
The story this week is with Hua and his recently launched startup Typogram with 700 users.
Learn how he:
🚀 Made a first version in Notion to get feedback from users
⚡️ Keeps launching fast thanks to the combination of Webflow and custom code
🧲 Focuses on content marketing to find new users
🌝 Uses No-Code for marketing-as-engineering
Enjoy it and happy building!
🎈 7 Cool Finds
Million Labs no-code hours packs give you the expert help you need to kickstart your app with no-code. Buy a few hours and let's turn your vision into reality.
Better Prompt is a prompt engineering tool that helps you build, test and improve your prompts so you can build better products with AI.
Typefully became my new favourite Twitter tool because they have a clean interface, automatic cross-posting to LinkedIn and auto DM’ing.
Typeframes is the video tool every indie maker has been waiting for. Simple, fast and inspired by the clean Apple videos.
Bloghandy adds an SEO-optimized blog to any website and takes over your existing website branding and design.
The No-Code MVP bootcamp team didn’t sit still. In the next cohort, starting on September 4th they will focus on how to build with the power of No-Code and AI.
Jason's Plugins For Carrd is a library of plugins, widgets, components, and scripts that adds new features and powers to your Carrd sites.
*This section is a mix of paid sponsorships (in bold) and cool things I use or discovered.
🔥 Maker Interview
Hello Hua, tell us little bit about yourself
My name is Hua, and I am a designer and entrepreneur based in New York City. Right now, I create actionable tips, helpful resources, and how-tos for absolute beginners trying to learn design. Currently, I am working on a beginner-friendly logo design tool, Typogram with my co-founder in crime, Wenting Zhang.
Tell us about your product that you made?
We are creating a logo design tool, Typogram. Typogram is an easy-to-use, beginner-friendly logo design tool we created for folks who want to design their logos and branding.
What went into building the first version?
To test the assumptions about the product at the early development stage, we built a working functional prototype for Typogram in Notion. This made it super easy to test out the flow of the tool, even certain features, without ever having to spend time writing a single line of code. It enabled us to focus on finding and talking to users and start testing certain aspects of our app immediately.
At the beginning stage, as part of Typogram’s customer discovery and user testing workshop process, we would book a conference room and test our prototype, invite each user, and have a 2-hour session with them where we watch them play with the notion prototype. Having a bunch of Notion pages also makes it easy to adjust and test with our users right away, inside of waiting to write code.
We developed Notion mini products to test specific features with our target users to validate ideas. For example, a core feature of our product is helping a user identify the brand personality for their business. In our app, customers use brand personality to guide their decisions. To test this feature, we created an interactive brand personality workshop/exercise inside a Notion workspace using the Kanban layout.
To start, users can duplicate our workspace and start drag and drop to choose their appropriate brand personality based on words they feel connected to. In the next steps, they narrow down and eliminate their choices as they are presented with visual examples of brand personalities. At the end, users land on five that could serve as the starting points for creating their logo and branding design.
We built this workshop in three No-Code Tools - Paper (the OG No CodeTool!), Google Slides, and Notion. Having this workshop in No-Code helped us realize that branding design is a collaborative process - many users told us they would do the exercise again with their team.
At the time, my co-founder was writing a daily series called “30daysofStartup” as part of her buildinpublic newsletter, and we thought it would be perfect to launch our workshop and test this feature there. So we set up a simple Gumroad page for this mini product and got our initial batch of paid customers for this feature.
And that first No-Code brand personality workshop eventually translated to your product?
Yes and however Typogram is now custom code, No/Low-Code is essential to Typogram’s development process. In the early stages of Typogram, we relied heavily on Webflow for CSS styling because of how easy it was. But, as Typogram evolved, most of the work centered around JavaScript rather than CSS, which means a local code repo would be a more efficient development environment.
Still, we love using Webflow’s visual style editor - so we figured out a solution bringing us the best of Code and No-Code world: using Webflow as a pilar for Typogram’s design system.
Currently, we maintain a Design System page in Webflow, which includes all the HTML markup and CSS classes used by our design system components. This approach enabled us to leverage Webflow’s visual CSS editing capabilities while taking advantage of the more advanced JavaScript development environment.
Now, whenever we need to update the style, my co-founder Wenting makes the changes in Webflow, exports the code, and integrates only the updated CSS into her local code repo, using a custom plugin she has developed to speed up and optimize the process.
What's your business model and how have you grown your revenue?
Currently, we sell brand lifetime licenses. Once people buy our product, they can edit their logo designs forever inside our app per brand. We have several funnels that help us grow our revenue and users through our marketing as engineering projects and our content, like our newsletters. We write two fantastic newsletters. First, our build-in-public newsletter takes subscribers behind the scenes of our startup and join us in the learnings and failures. Second, our design newsletter, FontDiscovery, shares design and typography tips for design beginners.
Tell us more about this marketing as engineering?
Our engineering-as-marketing endeavours are what work for us in marketing to bring new users to Typogram. My favourite example is our project, Coding Font, an interactive tournament-style game aimed at helping coders find the perfect font for coding, thereby alleviating eye strain. This undertaking garnered significant attention and received acclaim from prestigious platforms such as the front page of Hacker News, Reddit’s r/programming community, and influential technology blogs like Boing Boing.
It lead to 36,729 visits. Although the project launched two years ago, people still find Coding Font through backlinks and searches, especially through its blog (SEO). One of our blog posts on Coding Font is consistently ranked top 5 in keyword searches. In return, Typogram has received referral traffic by crossposting content to Coding Font, and by pop-up modal users encounter when they visit Coding Font.
Can you share some numbers/stats?
We just recently publicly launched our app and currently have around 700 users and nearly $5,000 in total revenue.
What's your advice for No-Code Makers?
Start building your audience as soon as possible. We do this through the building public on Twitter, our newsletters, and now even through our own community on Discord.
Thanks Hua for sharing your inspiring story!
🙌 When you’re ready, here’s how I can help
Find product ideas that bring you customers on auto-pilot
Kickstart your no-code journey with these no-code courses
Learn which no-code tool is the best for your idea
Browse through the full library of no-code success stories
Sponsor this newsletter to get in front of 10,000+ subscribers
thanks so much for the feature Katt! : ) It was fun sharing our journey on the newsletter!