10 Steps that will help you turn your idea into a product. Part 1

Hi Devs!

Do you remember how you got the 💎idea and want to make it but don't know how to approach it?

In this series of articles (Part 1, Part2), I will share the whole process of it.

Let's start with Part 1, what we have for today:

Each step has a 🎯 end goal so it's easy to be laser-focused

1. Idea

🎯End goal: Clear vision

My idea is simple: Habit-tracking app.

After my one-year experiment I decided to create an app that will help me stick with good habits.

2. Motivation

🎯End goal: Motivational boost

At the start, the motivation level is super high, but based on my experience product development will take time.

So I decided to write down things that will help me stay motivated for a longer time:

New skills: Flutter/Firebase/Figma and improved CV

App that will help me and my close friends

Practice Vim

3. Mockup

🎯End goal: general visuals to understand the architecture

Here I decided to not go into details, only features that help make the job done: Create a habit and mark it as done.

4. Market research

🎯End goal: Update my knowledge in a field

So, I bounced about the idea with my friends first, to listen to what they think. A friend of mine already researched the topic so he gave me pretty good sources to scrutinize.

I have looked at 22 apps that exist in Apple/Play stores, noted the pros and cons of each to better understand the landscape.

And created the notion page with:

Features that are mostly in demand in such kinds of apps

What people don't like in rivals apps

The strong and weak sides of each app on the market

Keywords

5. Technology choice and Education

🎯End goal: Define a tech stack

I set two main criteria in order to simplify choice:

Speed and cost - faster and lower respectively

Feasibility - have access to devices API that app required

And what we have had on a table:

PWA - progressive web app

Phone Gap/Cordova

Native Android and IOS

React Native / Flutter

Let's look a bit in detail at how the decision here has been made.

PWA - Seems good, but after read this research
I decided to not go this way. The onboarding process for IOS users seems pretty horrible from a UX point of view, at least for now.

Phone Gap/Cordova - Same as start something new with PHP now. It works, but you know what I mean😁.

Native apps - Two code bases will be expensive to develop and maintain. And the benefits of the native approach are just overkilling for a simple app like mine.

React Native/Flutter - Both actually perfectly fit the task. After a quick look at the documentation, checked the GitHub trends, and available tooling I decided to go with Flutter.

Here is how made that decision:

Flutter has been developed and maintain by Google and I have experience in Angular. So should be easy to understand things from the same provider

As a backend, I decided to go with Firebase. Because it speeds up the process and seems like have good integration with Flutter

And I spent 1 day watching flutter crash-course, reading documentation, learning about Firebase basics.

6. Setting up the environment

🎯End goal: speed up the development

I wanted something that is already working, so I looked at the boilerplates, starters to bring myself as close to the working app as possible.

I found one, and in a few minutes, the simple app with authentication had already been on my phone. Cool, isn't it?

With a starter code, I am helped myself a lot since I am new at flutter:

I learned from other developers how to structure the code in a right way

I decreased the development time quite a lot

7. MVP and Feedback from Instagram

🎯End goal: feedback and extra motivation boost

Cool, after few days of modification starter I had a working app:

I uploaded a video of the app to Instagram with a simple question: Would you like to use such an app?:

The result was good, even though I knew I have to be careful with this data because of Ugly Baby Syndrome.

Anyway, it was good for the motivation, the public announcement created positive pressure on me and I had first feedback.

8. Proper UI/UX

🎯End goal: UI layout

I went to a dribble for the inspiration. Looked at how the designers show certain things in an app like mine, what color scheme is usually used.

So after one day of good flow, I got this in the Figma:

I did run the second survey on Instagram that showed that most people prefer grid view instead of the list. So I picked that one for the first version

9. Development

🎯End goal: Working App with new UI/UX

It took me 2 extra days to make it real. Some UI things have been removed to speed up the process.

Few key points here:

First I created a theme class with colors, styles, and fonts. That will guarantee the same style across the whole app

The rest is just coding and by having a complete UI, it is just a matter of time.

Using vim speed up that proceed for nearly 30-40%, despite the painful learning curve

10. First Release

🎯End goal: Google Play link to share

So here I chose the same approach as described above: Theory + Practice in 20/80 proportion.

I looked at how other app developers present their products in stores

Read the articles about how to make a better visuals, SEO and higher acquisitions rate

Made visuals in Figma and Photoshop

Wrote SEO description with wording from Market Research

Built a simple website to basically place terms of use and privacy policy which is required by App Store and Google Play

And after a 3 days (Google reviewed took exactly that time) I am finally got a approved app here: Google Play 🎉🎉🎉

What's next

Cool, I hope it was a fun read for you! Now the plan is to gain a small user base to test in a real environment, so you are very welcome to join here

After the testing process will be done, I will make a release for IOS so I could start more aggressive distribution such as Product Hunt, Google/Facebook Ads, and so on. About this, you can read in Part 2, which will be published after the work is done!

Subscribe to stay tuned!

And I really appreciate your negative or positive feedback in the comment section below!

Best,
Alex
https://skob.io