Drew Ramsey Product Manager, MobileSmith

April 18, 2013

Do-It-Yourself Mobile Apps: Where to Start?

Who is MobileSmith:

• DIY mobile app development platform

• Cloud-based app management • Full app lifecycle – from cradle to

cradle

Who is Drew:

• Head of Product Team at MobileSmith • 7 years of experience creating custom

mobile apps for iOS and Android • Recognized industry expert on best

practice standards in mobile application development and mobile strategy

1

Today We Will Explore:

• The step-by-step process from Idea to App

• Best practices of app storyboarding and wireframing

• Your app looks great; what next?

2

Key Steps of App Creation

3

Idea

Requirements Dump

Wireframe Mockup Development

Testing

Good planning great app And vice versa!

Step 1: Idea!

4

• Check in the app stores: are there any apps

already doing it?

NO I may have a great app idea!

Yes Can I improve the way they’re doing it?

• Could my idea be accomplished via a

mobile website? • Your app could be denied by Apple

• Not a good use of resources

• Will the app connect to any data sources? • May require involvement of IT dept.

Yes!

Yes

Step 2: Requirements Dump

5

• Put down everything you want

in your app, in bullet points

• Group similar bullet points; whittle

them down to make sense

• Pick out 1-2 key features to be

the centerpiece of your app

• Pick 2-3 secondary features

• Dump the rest!

Something to consider during Steps 1-2:

One or Several Apps?

6

• What audience am I trying to

reach with my app?

• Could it be too broad?

• Any there too many

features in my app?

• Diluted apps are not user-friendly

• Do I have any secondary features

too good to dump?

Step 3: Storyboarding

7

• Sketch your requirements as pages (views):

• Start with the root view (Home page)

• List all the generic views

• NO workflow; NO interfaces at this point!

• Get a clear view of all the pages: 10 or 100 pages? - Too many or too few?

HOME Article Input

List of Articles

Blog Article

Gallery Share on FB

Etc.

Step 4: Wireframing

8

Tools we use: • Pen & paper

• Visio, Pencil,

Balsamiq, etc.

Draw the screens

of your app:

• Page layouts

• Navigation elements

• App flow

• Detailed notes

Wireframing: Best Practices

9

• Lay out each page from your

storyboard: buttons, nav bar, tabs,

maps, images, media…

• Write in notes and arrows for page

transitions

• Describe everything in detail!

• Use graphic designer and developer

to ensure feasibility

• Review wireframes with people on

your team least familiar with mobile

Avoid these common UX pitfalls:

10

• Lengthy tutorials (90% will be

forgotten immediately)

• Forcing user signup too early,

before showing value

• Ignoring iOS and Android

UI conventions

• Flashy visual elements

without context or purpose

• Lengthy forms

Ensuring the Best User Experience

11

• Keep in mind the user goals of your app (see your 1-2 key features)

• Tap through your wireframe:

Can the user achieve each goal in 4-5 clicks?

Do I have all the necessary screens and buttons?

Do all screens/elements have a purpose?

Can the user navigate home easily?

Easy ways to view & input data

USER EXPERIENCE: FUNCTIONALITY:

50% 50%

Step 5: Mockup

12

• Your designer creates page #1

in Photoshop using defined

color scheme

• You approve design: colors,

shapes, images, font etc.

• Secondary pages are created

and approved

• MobileSmith has in-built

design best practices for iOS

and Android

SAVES 50% OF TIME!

Step 6: Prototype & Review

13

• Option 1: review screenshots

• Option 2: review prototype

on your device:

• “Build for testing” on MobileSmith

• Send the prototype OTA to your

colleagues or clients

• Review; change design/layout;

rebuild; test again!

• Refine the UI/UX at minimum cost

• Forge your App!

: Where We Fit

12

Pure Custom App Development • The most expensive option

• Requires development team

• High long-term costs

• Slow development

• Limited creative input from

stakeholders

Template Based App • Low level creativity

• Limited functionality

• Lowest common denominator

• No branding, no security

MobileSmith • You own the entire process

through completion

• Rapid prototyping & development

• Custom product at much lower cost

• Multiple apps instead of just one

• Minimal long-term cost

6 ‘Musts’ of a Truly Useful App

16

• Custom-developed for your

target audience

• Works on major platforms

• Secure and reliable

• Easy to manage

• Easy to update or redesign

• Fun to use!

. .

17

Request a Live Demo Today And Start Building!

919.237.4218

Questions?