Hi Makerpad peeps! My name is Caleb Barclay and I’m a contract Product Designer by day, and no-code builder by nights and weekends (hoping to switch those around).
I built Dwellito.com, a prefab marketplace for backyard home buying. For homeowners, a backyard home can be a money making engine, a second income, a mortgage subsidizer, or a dwelling for family or friends that you just want to live closer to. Prefab homes have a ton of value over conventionally built homes: affordability, architect-grade design, and ease/speed of production. They’re like Ikea for homes - just like you buy shoes or a mattress online, you can also buy a home. It’ll come to your door either as a kit of parts with instructions or as a fully assembled home.
I chose to build Dwellito in Webflow because of the powerful CMS. Since Dwellito is a marketplace, I needed to make sure it could scale if there was 50 or 5000 product pages (Webflow CMS limit is 10k). Webflow allowed me to create one (yes, just one) design template for hundreds of product pages. I used Google Spreadsheet to populate the data for each home and then imported them with Webflow’s CVS importer. It took only 10 minutes.
Webflow’s CMS features (namely filtering) give the ability to create an important search experience for users to narrow in on exactly what kind of home they needed. If I didn’t have these features, I could not have made this marketplace successful.
About 1.5 years ago, I wanted to build a guest house in my backyard to rent on airbnb. Side note: In Phoenix, a rental could pay the entire mortgage of the main house. I got frustrated with the number of online companies that were out of business, not servicing my state, or weren’t clear about pricing. I created a notion doc that compared all of the prefab models that I had found. My other homeowner friends said the list was incredibly helpful and they were considering to buy one themselves. I started to get the good vibes that it could be a business.
Instead of launching an idea and trying to find PMF, I’ve been using Ahrefs to see if there’s existing market demand. Turns out, there are lots of people searching prefabs every month, as well as other low competition terms.
I started the process by finding all the modern prefab companies and populating them into a Google Sheet: Square footage, dimensions, cost breakdown, and so on. I started with 10 data points per home.
I didn’t have time during the day since I was doing contract work so I spent every morning finding new homes. I found new homes through Instagram and Ahrefs.
In total, the project took 40-60 hours to build (working part time over the course of 3 weeks). The majority of that time was spent gathering data, doing research and corresponding with manufacturers. The actual design / build took only 1 day to get it to 90% complete.
"I’m excited for more no-code tools that mimic programming in a visual way. I think the visual code paradigm is where a lot of interesting things are happening. It’s thinking like a programmer but using a more visual than the terminal."
I knew that I wanted to experiment in Webflow but I wasn’t sure if this was the right project. I wanted the project to be a no-code solution that could scale and have custom design. I looked into Spreadsheet-to-website solutions like Tabledo but I needed more design control.
The critical decision to go with Webflow came when I found that Webflow could batch import CMS from a CVS file. I spent a few hours understanding how it fully worked and then I was hooked. From the beginning I manually added, one-by-one, each company to the spreadsheet (~1,188 data points). This process of populating the spreadsheet database took about 3 weeks (working every morning).
1 - Populating the Spreadsheet
2 - Import to Webflow
Once the spreadsheet was “done” I used Webflow’s CMS import feature to import the CVS file. Webflow recognizes rows and columns from a CVS file and maps it to the CMS field.
Then I matched each spreadsheet header row to a CMS field.
The CMS imported successful and instantly populated the site with the content from the spreadsheet file.
After 10 minutes of syncing the fields from the CVS file, I had a website of 54 products, each with 22 fields (1,188 data points, over 30k words). This was the true value of Webflow. It allowed me to build an entire marketplace in minutes. This would have taken weeks any other way.
3 - Design Template and Sync to CMS
I then designed a single template page that would populate each home detail page (54 total). In the CMS template page, Webflow allows you to easily connect the design to the CMS database with a simple dropdown menu. I felt like a real programmer
In a few hours of design, all 54 product pages were published and viewable.
In order to cater to each company that had a different service offering, I needed some conditional logic to display / hide information. Thankfully, Webflow has this built in. It’s called “conditions” in the right side panel. I could hide or reveal specific informational depending on the condition I set (The condition feature is how you create a randomizer in Webflow). For me, a modular home that worked in extreme climates had a conditional logic applied to display a weather component.
4 - Design Browse Template and Sync to CMS
I needed a way to allow users to browse by various filters. Thankfully, Webflow has a multi-reference feature that gives the ability to connect one CMS to another CMS. This feature along is a game changer. With it, I was able to build a robust filter system so users can browse any home type: bedroom, price / sf, amenities, price, fabrication method, and many more. These filters are critical to making the site valuable for shopping: they can compare, they can value shop, they can sort. It creates more engagement on the site.
5 - Automating Sales with Zapier and Airtable
Now that the site was built, I was getting a good amount of leads every week. There was a lot of repeatable work and I begin to get overloaded with emails and things became disorganized really quickly.
I explored a number of softwares but the easiest / cheapest solution for me was to a) Use Webflow’s form to capture submissions b) Create a Zap that created email draft (I still wanted to review the email) c) Create Zap to add prospect to sales funnel in Airtable.
On the product detail page of Dwellito, there is a CTA to get an estimate. On each product detail page, I needed to capture the name of the unit in the submission so I added a line of custom code to Webflow’s HTML Embed Editor. This adds a name to the submissions that I receive.
Zapier has super powerful functionality, even with the free plan. I do want to try Zapier Paths soon to automate proposals. For Dwellito, I had a Zap made for each Webflow Submission. This Zap creates a draft email that I review and send to prospects. This is a huge time saver.
There are still a number of automation steps that I am currently working on to drastically lower the manually time:
- Automatically add new prefab listings: Typeform Submission > Submission data uploaded to Airtable (including images) > Send to Webflow (using Webflow API) > Review and Publish
- Backlink automation: Ahrefs.com (Content explorer) > Capture article link / author to Airtable > Pull email from article with Hunter.io > Reply.io to send email to each author\
Since launching, the site has some crazy engagement numbers:
- 3740 leads generated
- 54.25% bounce rate
- 3m 01s session duration
- 4.6 pages per session
It’s a great time to be a maker. The no-code movement is democratizing entrepreneurship.
The part that is frustrating about any tool that creates democratization is that lowering the threshold can create more noise, and in this case, less focus on UX and design. I’d like to see more makers in general bringing in more design as a value offering.
I’m also frustrated that there’s a bit of a stigma around no-code. No-code has kind of become synonymous with frugality; a cheap bootstrappy method. Lots of makers and founders don’t trust a no-code website or tool. I’m not sure how to eliminate this perception besides making great projects and showing them. I’ve currently been a no-code evangelist by doing my own Turing test with friends to see if they can tell what is a Webflow project and what is custom code.
I’m excited for more no-code tools that mimic programming in a visual way. I think the visual code paradigm is where a lot of interesting things are happening. It’s thinking like a programmer but using a more visual than the terminal.
"The actual design / build took only 1 day to get it to 90% complete."
Check out Dwellito.com and let me know what you think! I’d love to help answer any questions about the sales automation flow or how to build the filter systems in Webflow! It can be tedious to learn but once you get it, you’ll be using it for every project.