Darwinism and Website Design

samir
samir
Oct 5, 2017 · 6 min read

How we ended up writing our own programming language.

TL;DR

NowFloats started off as a way laymen could take to easily get their own websites. But we weren’t satisfied with that. We wanted the websites to have a life of their own, to adapt their look to the content of the site as well as the tastes of the visitor.

The journey since has made us create a new language, made our assumptions look silly and got our work called black magic.


The full story

After more than 25 years of the Internet, most people don’t have a website. But in less than 15 years of Facebook, every one has a Facebook page. Why? Because it’s easy to do so.

Social media has been successfully democratised, but not websites.

How can a small businesses reach out to more customers

through the internet without having to learn technology or hire a developer?

The solution we came up with was that a merchant could just download an app, add a few pieces of information and presto, his site was ready. Updating the site was as easy as posting an update on Facebook. Since it was the merchant who was updating, they knew what products they sold and what their customers were looking for. So the content was relevant. And because it was easy to update, the merchant updated it more frequently. That made the content fresh. Since the merchant had a physical store, Google started showing up the merchant’s site for people nearby who were searching for his wares.

Making it super easy to setup a website meant we had to have a fixed template for the website. Great for getting websites up running in 15 mins and not having the business owner to worry about design.

This didn’t work for business categories that have unique requirements and for enterprises who need their brand to be showcased.

The best projects start off as solutions to a pressing problem

Sites that change their looks

Instead of having a fixed template, why not we have many templates, the way site builder tools like Wix, Weebly and Shopify do, but instead of the merchant choosing a template and then spending a week editing themselves, the system will take care of picking the right one for them.

Not just for them but also the right one for the visitor. E.g. a visitor from the US expects a clean looking website. But one from China expects a busy looking site. So the site’s look should adapt to the visitor’s tastes as well.

We also needed a different template for different amounts of data entered in by the merchant. This is because a sparse looking site doesn’t instil trust in the visitor.

But to support multiple templates for the same site, the back end needs to understand where to plug in the data into the template. And we couldn’t do that with JavaScript using API calls, because search engines ignore JavaScript. Which meant those sites won’t get discovered — killing our value proposition.

Kitsune — A new Language

We had to do this data injection through the back end. And for the back end to understand where to plug in the data, we had to annotate the HTML with tags that specified which data to be plugged in, thereby creating our own language.

But code written in the Kitsune language written had to be checked for accuracy, so we wrote a compiler. And data needed to be injected, so we created KLM (Kitsune Layout Manager).

The KLM chose an appropriate template based on

  1. business category
  2. business data
  3. theme performance for that category
  4. visitor’s city

We made it learn automatically from those metrics. Kind of like A/B testing.

Things work so well in your head, but when you actually start building it, you figure out issues. And when it starts getting used, then you realise just how far away you are from creating a delightful product.

IDE

We wanted to have real time feedback while writing code the way intellisense works. So we created our own IDE based on CodeMirror. Great for writing the code, but now how do you test that it works? So we added a preview button that would open up your HTML file with data injected from the back end (FLM) for you to see how it looks. Seeing things you build come to life is so gratifying !

More Language constructs

A business site tends to have lists. List of products, services, updates. And every business has a different number of those. Let’s say you’ve created a list of 5 products on the front end. And the back end returns you 2 products. You can’t have 3 blank boxes hanging around in your website so you’ll have to hide them using JavaScript. But JavaScript lies outside HTML. And you’ll have to do this for every list. So we decided the language should support this natively. That’s why we supported a for each loop. And functions to show and hide based on the availability of data.

Testing

Which theme a website would load wasn’t deterministic. So we faced challenges when we wanted to test out a theme on a website but some other theme would load. So added support by forcing a theme by adding a /theme=theme_name to the website URL. And then making it persistent for that session.

Third Party Integration

Before we had launched Kitsune, Ronak (the founder) asked us to implement 3rd party API calls from the backend as well. This would enable us to support features in the hotel category by calling RepUp APIs to get the Booking Engine, Places Nearby and Tripadvisor ratings. We were crazy enough to say yes.

Launch

When we launched, our customers had trouble understanding why their website’s look would change from one visit to the other. One customer even said “What black magic is this?”. We realised the market wasn’t ready for this. So we gave them an option of fixing their website to a theme.

Hotels didn’t take off. The product was great. But the sales team weren’t incentivised to sell it. Also, it required domain expertise that they didn’t have. When we hired a domain expert for hotels, sales took off. Deccan Serai’s website is now on our platform.

If your product is great, they won’t flock to you. It takes a lot to make a product successful, and it’s not always about just the product.

Also, we tend to give disproportionate importance to our own discipline.

But we were successful in reducing bounce rates from mid 70s to mid 50s.

Going after the big fish

We approached Enterprise clients with this value prop: “We’ll create website for your stores. They’ll look like your enterprise website. And they’ll get a lot of traffic. You only have to update a few lines a few times a week”. Enterprise sales have a longer cycle, and it takes some convincing. But they got on board. VLCC was very happy. Long term, this is what will take our company from the low margin model of feet on street sales force to a high margin model of enterprise sales.

Selling your byproducts

We had initially built Kitsune for internal use. But since it worked so well, we thought, why not give it to other web developers to use. Our first dev customers were companies we contracted out the Enterprise work to. Then we created another system which could crawl their static websites and migrate it over to Kitsune. They’d get cheaper hosting, and faster load time. Once they like it, then we could switch them over to the dynamic version that would create databases and APIs for them automatically and make it easier for laymen to update thereby driving discovery.

One of the coolest features Kitsune has is web actions. You just specify the data structure you want, and we create the database tables for you and the internal API calls. You can use the same structure in your HTML code. For example, if your data structure is Business class that has a business name among other fields, all you have to do is put in [[Business.name]] in your HTML and our KLM will understand it and replace the data for that business.

Where Kitsune is heading

Eventually, we want Kitsune to power all the websites in the world. For that, we need to do a great job in documentation, forums, support, evangelism and taking feedback and improving on the product. Kitsune started off as a solution to a problem NowFloats had. Now it’s become so much more.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade