By: Dr. Seyedmostafa SafaviAssociate Fellow

Unit of Cyber Security, Faculty of Information Science and Technology,

National University of Malaysia (UKM), Malaysiawww.drsafavi.info

www.ftsm.ukm.my/cyberunit.php

Build YourMobileApp FromA to Z

1- You woke up in the middle of the night and had thisgreat dream/idea for an amazing app.2- You were working in MacDonald’s and you find itwhile listening to your customer.3- You find it while drinking in a bar.…

ANYWAYIf you can picture it, you know it is useful, and you canimagine that many people would like it, too

Then you are on the right path. (Start Reading)

How you got an IDEA?

1Define Your Goal

3

Source:leanbodiesconsulting.com

Source:squarespace.com

Source:currentbiz.io

thepurposeyour

application

Define

Whatisitgoingto

do?

01Whatisitscore

appeal?

02

Whichkindof

problemisitgoing

tosolve?

03Whatpartoflifeis

itgoingtomake

better?

04

2Research

8

Research purposes

Find out whether there are other apps doing the same thing

Find design inspiration for your app

Find information on the technical requirements for your app

Find out how you can market and monetize your app

My Favorite Places To get Some Ideas

Dribbble.com Producthunt.com

Find out whether there are other apps doing the same thing

Find out how you can market and monetize your app

Research Well

Find information on the technical requirements for your app

3Conceptualize Your Idea

12

Havingafirstroughsketchofyourapphelpseveryoneonyourteamunderstandthemission.

4Storyboard

15

Wireframingistheprocessofcreatingamockuporprototypeofyourapp.

Source:allbusiness.com

My Favorite Wireframing Apps and Websites

balsamiq.com moqups.com

5Back-end Predesign

19

Your wireframes now become the foundation of your back-end structure.Draw a sketch of your servers, APIs, and data diagrams. This will be a helpful reference for the developer.

Source:ytimg.com

6Test Your App Prototype

21

Source:squarespace.com

Ask friends, family, colleagues, and experts to help you review your prototype

Source:squarespace.com

Ask them to work on your prototype and watch them carefully (don’t interrupt them)

7Back-end Design

24

• Setupservers•Databases•APIs• Storagesolutions

Signingupfordeveloperaccountsattheappmarketplaces.

8Design the Skins

26

Now come up with high-resolution versions of tested wireframes

9Test Again

29

My favorite testing app tools are:

solidifyapp.com framerjs.com

This is where you test the actual design, and make sure it's clickable at the right places

10Revise and Polish

31

Polish your application:

70% 80% 90% 100%Phase 1 Phase 2 Phase 3 Success

11Refine Each Detail of App

33

Test you application on devices to fix errors:

OnAndroid OniOStestflightapp.com

Continue checking the application in different devices to terminate any kind of error

12Show Time

35

App marketplaces have very differentpolicies:• Android, does not review newly submitted

apps right away and you are able to instantlyadd your app to Google Play.https://play.google.com/store/apps

• iOS, Apple AAPL +0.55% reserves the right to review and approve your app before it can go live. https://developer.apple.com/appstore/guidelines.html

WhatNext???• Makeyourapplicationpopularwithhelp

ofsharingthatindifferentmarketplacesuchasPreappshttp://www.preapps.comAndtrytocreatemarketingcampaigntobringyoumorecustomerinfirstseveralmonth.

• Ihaveverygoodfeedbackwhileworkingwithdifferenttechnologynewswebsites.Theycanmakeyoupopularifyourappworthusing.

ABOUTDr.Seyedmostafa Safavi

Managing Director and C.E.O of ProTech Future System SdnBhd. He is a successful and battle-tested serial entrepreneur.Started his own professional carrier in 1998, he is an IT champmentoring and consulting Companies streamline their Securityand Cybercrime Investigation.

Dr.SeyedmostafaSafaviAssociateFellow

UnitofCyberSecurity,FacultyofInformationScienceandTechnology,

NationalUniversityofMalaysia(UKM),Malaysiawww.drsafavi.info

www.ftsm.ukm.my/cyberunit.php