From Idea to MVP in 160 Hours

published on 02 September 2018

The story of creating the MVP of Unicorn Platform – the landing page generator for startups.

Background & Idea

Building a website today is a big pain. It just shouldn’t be so.

Web development evolves fast: we got sweet standards, a bunch of great tools and services. But the process of creating a website could and should be more affordable.

I’ve been making tools for web developers for years. In particular, I’ve co-created WebGradients.

I’m on my way to improve the website building process. That is why it was easy for me to come up to the idea. I build Unicorn Platform – the landing page builder for startups.

Here is the report of what it took to make an MVP. I tracked my time because I’m working on improving my productivity. I want to share the exact amounts of hours spend on development with you.

Designing the Components

The core value of the product is components. A component is a stand-alone section of a landing page.

An example of component in unicorn platform

I need to confess. I’m a thief.

Before starting designing a single component, I researched dozens of top startups websites such as Baremetrics, Algolia, and Stripe and peeked their designs.

Honestly, I don’t think that inspiring is unethical. On the contrary, it is a must.

Each good design starts with researching existing solutions. And inspiring from the best of them is a good habit (none of full-time designers will ever say that ha-ha!).

Basically, there are 2 types of startups: rich and poor. Rich startups spend $$$$ and create amazing custom landings. Those stunning works bring a lot of attention to rich startups and help them with getting customers and hiring devs.

I took some of their design ideas and implemented in my components. With Unicorn Platform even beginning startups with low budgets can afford themselves a great looking landing page (it’s 50% lower during the pre-sale). Think of it as robihooding top-level design.

Time taken to create 55 components: 25 hours.

It also took 2 hours to build the style-guide. Style-guide includes rules for using fonts, colors and creation of micro-elements (buttons, tabs, inputs etc).

Coding the Components

Coding the style-guide took ages – 18 hours (28% of the components coding time). All those numerous micro-interactions is a very painstaking work. Kudos to PUG, SCSS and the atomic design methodology which boosted my productivity ×1000 times.

The most time-taking categories were Headers (10 hours) and Features (17 hours) because those are the most important parts of a landing page.

All the components also needed some dummy content in it. Filling it in took 7 hours.

I want the components to look appealing. Including the ones which contain iPhone mockups with screenshots inside. So I spent a few hours looking for nice app UI freebies. I will create a dedicated credits page for the authors.

Generator

The second crucial part of the landing page generator is the generator itself. Designing it took 9 hours.

I was sure that after some user-testing I will need to redesign the generator. However, the tool turned out to be easily understandable and all early testers loved it.

That actually bad news for me because when you think that everything is perfect, there are problems that are hidden from your eye. I’m still eagerly looking for criticism.

The generator is built with ReactJS + vanilla PHP. I will Firebase for auth and Paddle for billing.

Coding the generator took 42 hours. I still miss some features and have a couple of bugs in it. But when you go alone you have to move quickly. That means non-critical bugs can wait and each update must add significant value to the product.

Templates

Templates are ready-to-use landing pages. They are aimed to save time building a website.

Unicorn Platform wants your process of creating a landing page to be very quick. That is why there is the survey stage at which the generator understands your needs. Then Unicorn Platform offers suitable templates for you.

For startup which makes a mobile app, there will be templates with iPhone mockups inside, for SaaS projects – Safari window mockups etc.

The existing 15 templates took 5 hours of work.

Plans

The MVP turned out to be good. My mom will be proud (actually after years of being a maker I’m still bad at explaining to my parents what exactly I’m doing LMAO).

Now it’s time to update Unicorn Platform to a great landing page builder and born a confident market player.

Read more

Runs on Unicorn Platform