Logo
Wooshelf - Creative Agency Are 2 Seconds Away. Have Patience

How We Made a Mobile Application From Scratch in Just 6 Months?

girl
How We Made a Mobile Application From Scratch in Just 6 Months?

In this article, I tried to convey how to go from an idea to a working application by giving examples from our own experience.

It looks like it will be a long post; I say prepare your tea and coffee :) 

Have a nice weekend reading.

TLDR We made an application that works within 6 months, including meeting, learning, and development.

Topics and tools that I will talk about in the article

 

Part 1 — Preparation, Problem, Idea

You can read the article I shared below to understand what we experienced while learning entrepreneurship and where the idea came from. 

Since this section is too long, we decided to publish it as a separate article. 

Which Tools We Used During 6 Months:

 

Business Model Canvas

We had to fill in the canvas in order to see the shortcomings of our business idea and draw the roadmap. The reason we chose Ciz.io was that it was easy and fast to use. You can also examine the canvas samples of known initiatives with ciz.io.

 

User Types — User Persona

Tools:- Make My Persona Evoltapp Xtensio

If you say “We made our product for everyone” before an investor or a jury, you will start the game behind 3-0 or even be forfeited. We do our best to avoid this situation, we define our users-customers specifically so that we can say "We developed our product for high school students who want to learn to program in the 14-18 age range".

The tools above guide you how to create PersonasIf you want, you can also examine the user types we have created. The reason why we prefer Evoltapp is that it is free* like the others and its interface is pleasing to the eye.

  • You have the right to edit a single project in the free package. You can download your project and continue making changes on the same project. Most of the tools I will talk about in this article are free, otherwise I will specify :)

You can also prepare Business Model Canvas and Storyboards with Evoltapp.

 

Name and Logo

Tools: Shapefactory Launchaco Shopify Tools

As for the name and logo, it's up to your creativity (a little!). We did not use the above tools. By trial and error, using Tilda.cc icons; We designed our own logo by swiping “one click” to the right. If you want to save time on name and logo, the above tools will do your job.

Logo experiments — a mess

 

Part 2 — Landing Page, Prototyping

 

Landing Page

We call the websites promoting your startup landing pages. The function of the landing page should be to tell the user what you are doing in less than 1 minute, and encourage them to try to buy the product.

Tools:- Onepagelove Cruip Wix

Since we will introduce our mobile application, we chose to make a one-page site. Cruip allows you to download the landing page themes it contains for free. If you don't want to deal with services such as hosting, SSL certificate, form collection, you can also consider Wix. After you create an account on Wix and edit your site, start waiting. The 50% discount offer will arrive in your mailbox sooner or later (:

 

Domain

Tools:- Namecheap Godaddy Dofo

We have handled the name, logo and site design stages for our venture, it's time to choose the domain name; There are a lot of options when it comes to buying domains. We decided to buy from Godaddy because it offers the most economical solution for the first year . It would also be easy to manage, since the domains I bought before are also on Godaddy.

If you click on the first ad that appears after typing " Godaddy" into Google , you have the chance to get your domain name at a lower cost. We did so.

 

Hosting (for Landing Page)

Tools:- Heroku Netlify Bluehost

At first, we hosted the landing page on our own server, but we had to make an API connection with Sendgrid and set a pop-up to collect users' mail information. We got the SSL certificate from Cloudflare. Then we learned that we could easily handle all of this with Netlify“Yes, this service is also free”

Another alternative for a free SSL certificate: Let's Encrypt Authority

If you want to differentiate your pop-up notifications, you should try SweetAlert2.

 

Mail

Tools:- Zoho Gsuite Office365

If you don't want to send e-mails to your customers and key partners from @hotmail.com, you need a corporate e-mail address. There may be some who think that you do not take your work seriously just because of this, most of the people I meet do not care about this e-mail thing; We thought it best to tie our business to a solid stake.

Gsuite can be a bit salty for the beginning stage -$6 per month - Since we bought the domain from Godaddy, it was easy to set up the mail server with a few clicks. Setting up a Mail Server can be time-consuming/and difficult. None of us want the mail we send to fall into spam or not to reach the other party at all. It's best to lean our backs on Gsuite and not worry.

Best of all, you can do all this for free with a few minor restrictions using Zoho Mail.

 

Chatbot

Tools:- Intercom Crisp.chat Drift

Apart from welcoming the visitors to our site, the live help tools we use to collect contact information are very popular; they work too. Using the tools above, you can instantly respond to questions from your visitors. You need to switch to the paid package as soon as you say "Let the bot reply for me" or "Send the following message when the customer comes to the pricing page" .

  • If you want to use the best: Intercom (no free package!)
  • If you want to welcome visitors with a private message: Drift
  • If you want the free package to have the most features: Crisp.chat

 

Design

Tools:- Sketch AdobeXD Lunacy Figma

The first version of Sketch was published in 2010, and it soon became the industry standard. With the effect of this, you can find hundreds of resources on the internet; Tutorials, icon sets, UI Kits, wireframes, many paid and free designs, and plugins…

Unfortunately, Sketch only works on Mac devices and is not free. There is an annual fee of $100 for non-students and $50 for students. We paid 50 dollars; it was worth every penny if you ask me.

You don't need to go to the Apple Store just for this job. With Lunacy, developed by Icon8, you can open and edit .sketch files.

Curation sites such as SketchappSources and Neede.co Prototypr.io come to your rescue when you need them.

 

llustrations

Tools:- Drawkit Undraw Manypixel

Undraw. co is awesome! 🙌🏻🚀

You can download hundreds of illustrations in any theme and color code in .svg and .png formats. New illustrations are constantly being added to the above tools, and there are also paid packages of Drawkit and Manypixel.

If you wish, you can also create your characters with Humaaans, a Sketch library.

Infinite possibilities Morty :)

 

Prototypes

Tools:- OverflowZeplinMarvel app

This is where things get a little complicated. In the recent past, drafts were drawn by hand, interfaces were designed with Sketch, user testing was done with Marvel before starting coding, and product team coordination was ensured with Zeplin (🇹🇷). Now almost every tool does everything. You can take a look at the article I shared below to put everything in its place.

We designed interfaces in Sketch or elsewhere; now it's time to see our shortcomings and test user habits.

There are hardly any design-prototype tools that do not integrate with Sketch ** Therefore, you can use the tools that are most convenient for you. So how did we do it?

First, we created 22 screens with Sketch, then we made the adjustments to "Go to this page when that button is clicked". (You select the button you want to take action and press the W key, Sketch guides you). We exported these screens we created to Overflow with a few clicks and got output. 

Since Sketch and Overflow can be integrated, we did not need to re-create the flowchart. We discussed the output on the table and discussed it for a long time.

Thanks to the “Flow Chart” we got from Overflow, we were able to see better what kind of algorithm we should create. It was a little easier to draw our roadmap.

 

Related interfaces

Along with Overflow, we transferred the interfaces to MarvelApp. The best part of MarvelApp is the “ User Testing ” feature: We transferred all the screens we designed in Sketch to Marvelapp with a flow chart. Now is the time to bring the designs together with the users. You can use Marvelapp's mobile app or web platform for testing.

Zero Code! Only photos are sorted by a specific stream.

The best thing is to leave the users alone with the screens you have designed. Sit and watch what the user is doing without interfering. Note as soon as he gets confused, if he's stuck on any screen longer than expected or getting stuck, you're on the right track. If 8 out of 10 people participating in the test are stuck on the same screen, we should update the design.

Although we had a lot of discussion about the flow chart we got from Overflow, we realized that we had many shortcomings after the user tests. We have completed the missing pages, and we have eliminated the dead ends. Our screen count had increased to 33.

Our interface updates continued after we started coding.

So how do designs turn into code?

Answer: zeplin.io

Zeplin.io is made in 🇹🇷

Airship in its simplest form; A collaborative platform that takes the communication between the designer and the developer away from complexity. A tool that translates the sizes, color codes, and positions of all the buttons, images, and fonts we designed in Sketch into software languages.

You need to activate the "Make Exportable" option one by one for the components you want to export to Zeplin. Otherwise, you cannot transfer the details.

You can also share feedback about interfaces with your teammates. You can instantly drop the comments you write here on your Slack channel.

Overflow has canceled its free package because it is out of beta. No need to darken the neck** The 30-day trial period should be enough for most of us.

 

Part 3 — Coding, Development, Across the Process

The team, the business model, the interfaces, the prototyping… and finally we're in the coding phase, now we know what to code. Now it's time to decide how we're going to code.

 

Programming language

There are languages ​​for the programs that we need to learn to develop mobile applications. You can start learning them from scratch, you can learn faster if you have a certain level of software knowledge. With Swift, you can develop native applications for the Apple ecosystem, and with Kotlin, you can develop applications specific to the Android ecosystem.

If you want to develop your application natively, you need to create a separate "codebase" for each platform. In short, you should write separate codes for your IOS application and separate codes for your Android application.

Programming languages ​​(frameworks) such as React NativeFlutterXamarinand Ionic allow you to output to multiple platforms with a single code infrastructure. You can run the same code on Web, Android, and IOS.

Tools:- Flutter React Native Swift Kotlin

To confirm the title of the article, I need to remind you that we have no previous mobile application development experience**

At first, we thought of using Flutter, but we saw the weak points of Flutter as the stable version is just coming out and there are fewer resources on the internet compared to React Native.

Facebook's support, performance advantage, and growing community were the strengths of React Native. Ready-to-use components developed by the communities would also make our work easier. As a result, React Native was more appealing and logical, so we voted for React Native.

 

Education, Learning

Tools:- Udemy Udacity Freecodecamp Stackoverflow Youtube

We did not prefer online courses titled “React Native Education from Scratch”; we never actually did. Completing the X course and then starting software development may be a better way for most people, but when we examined the courses, we realized that they were not very up-to-date.

Our goal was not to learn mobile app development, we had to learn to make apps; we learned.

We proceeded almost entirely through the documentation . Medium, Stackoverflow and Youtube have also been valuable resources for us; we did a lot of youtube searches. Searches like “How to make X in react” often lead you to the solution.

Github Pages of Some Components We Use

 

Algorithm

I would like to open a separate parenthesis for the topic of the algorithm. Let's draw the interfaces, code them, and the rest will be taken care of. You have to plan every detail, every function in your application. For this, at least one hacker is required in the team :)

I am sharing one of the sketches we used while creating the algorithm below to give an idea:

 

Backend

Backend-Service Architecture: All the parts of the software that users do not see, the main system.

Tools:- Amazon Amplify Firebase

Since we are new to this business, cloud solutions such as Google Cloud, Azure, and AWS may become inextricable for us, so there is no need to overcrowd this place, and there is no one talking about services such as Parse and PubNub.

By using platforms such as Firebase and Amplify, we can manage all our service needs from a single point. They provide a great convenience for beginner developers. There is a nice video below for comparison.

Firebase vs AWS Amplify

We chose Firebase, although it offers less flexibility compared to Amplify. With Firebase, we can manage all our backend services from mobile notifications to messaging…

 

Communication

Tools:- Skype Starbucks Slack

It started to be a long article than I thought; we have a little way to go, hold on :)

Slack, which is at the top of the must-have list, is an advanced in-team messaging tool with which you can integrate countless 3rd party software that notifies you of the latest commits on Github, and comments on Zeplin and the latest changes in Trello.

We didn't need a new discovery since everyone on the team has a Skype address, but appear.in and zoom.us are popular startups today, free to try :)

By the way, it changed the name of appear.in to whereby until the article was published.

Proof that we use Skype :)

It doesn't matter if it's online or offline, meeting as a team once a week; It is very important to be able to discuss problems and not lose motivation.

 

Project management

Tools:- Notion Trello Airtable

Project management tools such as Trello; It facilitates the division, planning and tracking of tasks and tasks. By creating a simple kanban with Trello, you can get a bird's-eye view of workflows.

Trello cards work with drag-and-drop logic

How you create a kanban here is up to you, you are completely free. We can start by gathering our tasks under 4 main pillars as in common usage:

  • PLANNING WAITING
  • TO DO
  • DONE
  • COMPLETED

 

Mockups

Tools:- Mockup Frames Jaamly (App Store) Design Camera

Mockup is the model that simulates the most basic functions and all interaction scenarios of the product, service, or digital asset, with the closest view to be displayed by the end-user. -Sherpa Blog

Jammly, you can create mockups in this style in minutes.

If you wish, you can take screenshots from any angle with Design Camera (rotato.xyz), and you can get satisfactory results with all three tools mentioned above.

 

Mobile Notifications — Push Notifications

Tools:- Onesignal Firebase Airship

Since our backend services run on Firebase, we preferred the notification feature it offers. There is no obstacle for you to using other "push" services. Mobile notifications are among the most active methods of user retention. For more information, you can check the report below. 

 

Part 4— Testing, Beta, We're Still Learning

 

Test

It's time for testing. Before the App Store and Play Store, we test your application to get rid of errors and to see the deficiencies better. You can call this stage “ Beta” or “Alpha”, the important thing is to collect as much feedback as possible.

To publish your application in these markets, you have to follow the rules set by Apple and Google. If your app crashes suddenly, has broken links, or has dead-end screens, your app will likely be rejected. Common App Rejections-App Store

We forgot to put the "back button" 🔙 on the three screens on the registration screen :) as I said, a dead end is not wanted!

You can access all official resources about installing apps on the App Store and Play Store here and here.

To upload your application to the market, first of all, you need to be a developer. It costs $100 per year for Apple and $25 for Google once.

 

Law — Contracts

Before the beta, I need to talk about the contracts. You cannot step into app markets without your Privacy Agreement. Of course, no one expects you to write many pages of contracts from scratch, it's easy.

Tools:- Iubenda Termly Getterms

With these tools, you can prepare your contract without touching the keyboard. Most of the questions are multiple-choice or “Yes-No”. Termly allows you to prepare 1 contract in its free package, you can also handle legal issues such as GDPRTerms and Conditionsand Cookie Consent with different accounts. Be careful not to give wrong answers to questions!

 

Beta

Tools:- Testflight Crashlytics Play Console

We were calling it beta: Crashlytics, which can also be accessed via fabric.io for now, turned out to be the fastest solution, although it sometimes caused problems. After making the adjustments, you can invite users to the beta by adding an e-mail address or sharing a link.

Fabric Interface

Hacker Tip!

https://github.com/marak/faker.js/

Do you want to see what will happen when 1000+ people use the application you have developed? Don't worry, faker.js is for you; Faker.js generates random "fake" users in many combinations for you. An impressive solution, it also helped us improve our algorithm 👏 

 

Analytics

Tools:- Flurry Fabric Amplitude

Solutions that simply answer questions such as how many people use our application, how many daily active users are, and how many minutes users spend on our application on average, are called "analytic tools". There are numerous paid and free options available. There are no spectacular differences between the free options, you can use whatever you want.

Update: We switched to Flurry on the recommendation of dear Celil Bozkurt 👍

 

Part 5 — Product Hunt, Thank You (Ask)

We should follow what kind of way while developing a mobile application for you; I tried to explain "which step should be taken at which stage" by giving examples from our own experience. If you've read this far, congratulations!

Dear, who gave their feedback during the beta process and the final version of this article,

I hereby convey my thanks to you.

Thanks 🎉

We are waiting for your feedback 🙌🏻