DEV Community

loading...
Cover image for 10 Steps that will help you turn your idea into a product. Part 1

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

Aleksandr Skobeltcyn
Co-founder and full stack developer at Sensivo. I admire to learn new things in business and software development
・Updated on ・5 min read

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:

Group 177

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:

  1. New skills: Flutter/Firebase/Figma and improved CV
  2. App that will help me and my close friends
  3. Practice Vim

3. Mockup

🎯End goal: general visuals to understand the architecture

image

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:

  1. Features that are mostly in demand in such kinds of apps
  2. What people don't like in rivals apps
  3. The strong and weak sides of each app on the market
  4. 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:

  1. PWA - progressive web app
  2. Phone Gap/Cordova
  3. Native Android and IOS
  4. 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:

  1. 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
  2. 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:

image

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

image

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:
image

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:

  1. First I created a theme class with colors, styles, and fonts. That will guarantee the same style across the whole app
  2. The rest is just coding and by having a complete UI, it is just a matter of time.
  3. 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.

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

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

  3. Made visuals in Figma and Photoshop

  4. Wrote SEO description with wording from Market Research

  5. 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

Discussion (7)

Collapse
mathewthe2 profile image
Mathew Chan

I wonder how important user acquisition is while you are prototyping your app. I've heard great stories about SaaS developers getting 100+ users using their prototype or in their waiting list before they even launch their app. Now even larger software companies have features in their products that require signing up to their waiting list.

I just don't feel comfortable spreading word about my app/service everywhere on social media or even buying ads when I don't know if there are actually people who will use it.

Collapse
skob profile image
Aleksandr Skobeltcyn Author

Really good question Mathew, thank you!

I think it for sure depends on product type, but for typical SaaS:

  1. Create a channel of distribution is one of the crucial step (check out "Lean Canvas").

  2. You not loose anything by inviting people to product that is not done yet.
    But you gain interest, feedback, Search engine index that takes time, first super loyal early-adapters for success launch! And support + motivation!

And it kind of chicken-egg problem: in order to make product popular you have to have users, to gain users you have to make product popular. So I would say: "Fake it until you make it" works really well

And the beauty of business is when you doing something which is uncomfortable and get outstanding results that nobody has in a comfortable zoneπŸ™ƒ

Collapse
arsperger profile image
Arsen Semenov

I am on 3th week still practice Vim

Collapse
skob profile image
Aleksandr Skobeltcyn Author

It took me 2 months till i got some benefits of it, but it was also with a new ergo keyboard ☺️

Collapse
hamedmp profile image
Hamed

Thanks for sharing your journey Alex! Keep it up

Collapse
meshamakes profile image
Mesha

Very nice idea, cant wait to see what's next :)

Collapse
skob profile image
Aleksandr Skobeltcyn Author

Thank you Mesha!
Alerady installing Xcode for IOS, it takes ages... :-)