I would like to share with you the story behind mdbootstrap.com
Actually, it’s a case study which answers the following questions:
1.How we built from scratch one of the world's most popular tech website (mdbootstrap.com).
2. How we create a stable technology company within a few months without any funding.
We didn't know it would end up like this.
MDBootstrap.com suppose to be our side project. We were much more interested in automation technologies than web development.
By "we" I mean me and Dawid. It was our third common startup.
We didn't have any cash. We didn't have any investor nor state or EU funding. We didn't participate in the startup community and we didn't have any contacts. Actually, we didn't have any of this fancy attributes which define a "real startuper".
We were just a couple of nerds who can code, but let's be honest - that wasn't anything special. There were developers much better than we.
What turned out to be the key was that apart from coding, we were pretty good at marketing and automation.
There are always 2 main goals of internet marketing.
The first one is to generate a traffic to your website.It's not an easy task, but there is something much harder to achieve.
The hardest thing is to convert visitors into leads and buyers. This is what I want to focus on in this article.
Step by step I'll tell you how we do it at mdbootstrap.com.
If you want to know how to implement such mechanisms in your website we’ve prepared a separated tutorial for it.
Automated web application
1# Dynamic content
Let's assume the following situation:
I'm a bootstrap user and I don’t know Material Design Bootstrap yet. I'm searching for some animations for my bootstrap project.
I type bootstrap animation in Google and click on the first search result. And because I visit the first time MDBootstrap.com the website suggest me to download a free package of MDB to use the animations I'm looking for.
Alright, great. I'll do it.
Sometime later I'm looking for bootstrap shadow effect. And again - I find the solution on mdbootstrap.com.
There is one difference - this time I don't need to download it again because I've already done it.
Fortunately, the website is smart enough and instead of suggesting me the second time to download MDB, it suggests to subscribe to the newsletter.
It makes sense for me, because that's another time I've found the resources of mdbotostrap.com useful, so yeah, indeed, I want to stay informed and subscribe to the newsletter. Good idea MDB.
It's not finished. If I've already downloaded the free version of MDB and I've subscribed to the newsletter - it means I really like the product. There is pretty good chance I'll be also interested in MDB Pro version.
Guess what happens after my subscription? The website suggests me to learn more about Pro version. Exactly in the right time to the correct user.
After the purchase, our algorithm still is learning about the user and continues to suggest other useful solutions.
2# Related content
As I wrote before, MDBootstrap.com contains hundreds of pages covering different technical topics.
Such a huge amount of content can make a user feel a bit lost. That's why we should find a way to suggest him a relevant content at the exact moment when he really needs it.
Let's consider the following example:
I'm looking for some nice buttons for my new project. Naturally, the first place I'll be looking for such components is a Buttons documentation.
There are plenty of buttons and I feel like I find my Button - Eldorado.
To increase even more users satisfaction, we can suggest you related page - social button.
We create a simple algorithm which says - if user scrolls at least 60% of the given page and spends here more than 30 second - display him a modal with related content.
3# Scoring algorithm
The scoring algorithm allows you create an advanced mechanism which let your web site learn more about your user.
Have a look at this example. At MDB we would like to ask the user for feedback. However, there are a few problems:
1. We don't have his email address or any other direct contact
2. We don't want to ask for feedback from completely new visitor
3. We need to ask for feedback the user who has already spent enough time working with MDB to give us a constructive insight.
So what we do?
In our scoring algorithm, we set 1 point to the user each time he visits some page of our documentation.
We set 1 additional point if he scrolls the page at least to 60% and 1 more point if he spends at least 60 seconds on this page.
Let's illustrate this example:
- User visits buttons docs = he gains 1 point
- He scrolled more than 60% = he gains another point
- Then he visits cards documentation = he gains a point
- He spends more than 60seconds on cards docs = he gains a point
After this short trip he already has 4 points. He will continue his journey through our website for few more weeks.
Our algorithm will remember him and each time he does some desired action - it set the user a point.
When the user collects 100 points (it can take for example 2 weeks) our website displays him a poll with a request for feedback. Thanks to that we can be sure that we ask for feedback a correct person and his message will be valuable for us.
4# Abandoned shopping cart
Abandoned shopping carts are a well-known nightmare of every e-commerce. Fortunately, we can minimize the negative effect of this user behavior by using automated methods.
First of all - after the user leaves the checkout page without finishing the purchase we can kindly remind him about items still waiting in the cart for his action.
That's very simple step but believe me - properly used can make a significant difference.
What if it's not enough?
Well, we can give the user more time. Let assume, he just wants to learn more about the product. So we create a new scoring algorithm which starts count after user abandons the cart. For each visited page on our website, he gains 1 point of our "abbandonCartScoring".
If he collects 50 points and still does not finish the purchase - we can try to convince him by some special offer. So after reaching 50 points, we display him the side modal with a special coupon which gives him 10% discount which will be valid only for 24 hours.
Now our user can be motivated enough to finish the transaction.
If our user finishes the transaction before reaching 50 points of abbandonedCartScoiring - nothing happens. We do not offer any special offer so he purchased the product for the full price and we do not lose anything.
Pretty good deal.
5# Personalized marketing campaigns
If you have ever used Google Adwords or Facebook Ads system you know that finding a correct target group and composing an efficient ad means a lot of testing.
Let's say we want to test how different discounts affect the sale increase.
We've prepared 3 discount coupon - 5% , 10 % and 15%. We want to check which discount brings the biggest money for our company.
In Facebook system we prepared 3 similar ads dedicated to the same target group. The only difference is a discount on the graphic and link.
We use utm tags which let our algorithm recognize which discount displays to which user.
To the first ad, we set a link : https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=fb-ad-5
To the second: https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=fb-ad-10
To the third: https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=fb-ad-15
Then using BrandFlow, we set a condition that if visitors come from the link with utm "fb-ad-5" - display him a coupon with 5% discount. If he comes from the link with utm "fb-ad-10" - 10% discount. If fb-ad-15 - 15% discount.
One of the most important goals of our company is encouraging visitors to download a free version of our framework. It's also important to us to know how many downloads happen each day.
Unfortunately, it's not enough. We need to know which marketing source gives us the best results. Without that we wouldn't know what should we invest in and would lose a lot of money.
What we do:
In BrandFlow we set a goal for MDB download. Then we can see not only the number of downloads but also a detailed information about the source which brought the visitor to our website.
Thanks to that we can invest more in best performing sources and resign from the worst performing.
7# Goal value
If you spend 1000$ on advertising and it brings you 2000$ revenue - you know it was worth and you can invest it this source again.
But what if you spend 1000$ and it brings you 2000 downloads of our free resources? (like a free ebook for example or in our case - MDB Free Package). How do you know your investment was good?
What we did in MDB was a simple calculation.
In BrandFlow we've created a script which counts how many users who downloaded MDB free, later purchase MDB pro and how much money did they spend.
To illustrate it let's assume the following example
100 users downloaded 100 MDB Free packages.
Later 10 of them purchased MDB Pro. They spent 1000$.
Now the equation is simple - 100 downloads brought 1000$ so the single download is worth 10$.
So if I spend 1000$ which brings 2000 downloads it gives me 0.5$ for a single download.
0.5$ cost for a single download which is worth 10$. Well, it's really good deal.
The conclusion is even simpler - I want to spend as much money as possible on such an advertising because each 50cents invested brings me 10$. 2000% of profits sounds really sweet.
8# Behavioral analysis
If you build your UI basing on your instinct - you should stop it.
Do not guess. Learn how users use your website and adjust the UI to their needs instead of your "feelings".
MDBootstrap.com has a complicated structure. It contains hundreds of pages with technical content, divided into many technologies. It requires an advanced navigation and flexible, dynamic UI elements which adjust to the user needs.
To create such a complicated project we needed to learn a lot about the behaviour of our users.
That means, on each of our crucial pages (like the homepage) we measure each click and other actions. Thanks to that we can see which elements are useful for our users and which are not. Then we can improve our UI by providing a better exposition of useful elements, and remove the elements which aren't necessary.
Examples presented above are only the small part of solutions behind the success of our company.
This post will be continued and developed. We'll present all the actions we've taken to make mdbootstrap.com at the top.
If you want to stay informed - subscribe to the form below.
Do you want to share?Facebook Twitter Google +