From Idea to MVP in 160 Hours

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 and Phoenix Startup UI Kit.
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’m solo-building Unicorn Platform – the landing page generator 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 a component in Unicorn Platform
An example of a 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 BaremetricsAlgolia, 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 generator and born a confident market player.

The plan is to produce 220 more components and dozens of new templates.
I will hire an HTML coder to help me speed-up when I collect enough funds with the pre-sale.

(Visited 157 times, 1 visits today)

1 Comment

  1. alexanderisora September 2, 2018 at 7:42 pm

    Disclaimer: the total count of the hours is not 160. It’s because I haven’t covered the bugfixing and planning stages in this post.

    Reply

Leave A Comment

Your email address will not be published.