Do-It-Yourself Mobile Apps: Where to Start? Kristen Lineberger - PowerPoint PPT Presentation

Do-It-Yourself Mobile Apps: Where to Start? Kristen Lineberger Product Specialist, MobileSmith April 18, 2013

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 • 5 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 ¡

Who is MobileSmith: • DIY mobile app development platform • Cloud-based app management • Full app lifecycle – from cradle to cradle Who is Kristen: • Product Specialist at MobileSmith • 3 years of experience creating custom mobile apps for iOS and Android • Expert on best practice standards in mobile application development and 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 ¡

Poll: is a mobile app a necessity for your organization? q Necessity q Nice to have q Website is enough 3 ¡

Key Steps of App Creation Idea ¡ Requirements ¡ Tes:ng ¡ Dump ¡ Mockup ¡ Wireframe ¡ Development ¡ Good ¡planning ¡ ¡ ¡ ¡ ¡ ¡great ¡app ¡ And ¡vice ¡versa! ¡ 3 ¡

USER EXPERIENCE: FUNCTIONALITY: 50% ¡ 50% ¡ 7 ¡

Step 1: Idea! • Check in the app stores: are there any apps already doing it? q NO I may have a great app idea! q Yes Can I improve the way they’re doing it? Yes! ¡ • Could my idea be accomplished via a mobile website? • Your app could be denied by Apple Yes ¡ • Not a good use of resources ¡ • Will the app connect to any data sources? • May require involvement of IT dept. 4 ¡

Step 2: Requirements Dump • 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! 5 ¡

Something to consider during Steps 1-2: One or Several Apps? • 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. 6 ¡

Step 3: Storyboarding • Sketch your requirements as pages (views): • Start with the root view (Home page) • List all the generic views • NO work fl ow; NO interfaces at this point! ¡ ¡ Ar:cle ¡ List ¡of ¡ Blog ¡ Share ¡ HOME ¡ Gallery ¡ Input ¡ Ar:cles ¡ Ar:cle ¡ on ¡FB ¡ ¡ Etc. ¡ ¡ • Get a clear view of all the pages: 10 or 100 pages? - Too many or too few? 7 ¡

Step 4: Wireframing Draw the screens of your app: Page layouts • Navigation • elements App fl ow • Detailed notes • Tools we use : • Pencil & paper • Visio, Paper 53, Balsamiq, Pop. 8 ¡

Wireframing: Best Practices • 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 9 ¡

Avoid these common UX pitfalls: • 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 10 ¡

Ensuring the Best User Experience • 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 taps? ü 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 11 ¡

Step 5: Mockup • Your designer creates fi rst page in Photoshop using de fi ned color scheme • You approve design: colors, shapes, images, font etc. • Secondary pages are created and approved • MobileSmith has built-in design best practices for iOS and Android SAVES 50% OF TIME! 12 ¡

Step 6: Prototype & Review • 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! • Re fi ne the UI/UX at minimum cost • Forge your App! 13 ¡

Develop, Submit, Manage 14 ¡

Where MobileSmith Fits: App Development Continuum p Pure Custom App Development u r e c • Most Expensive Option u s t o • Requires Development Team m • Long Term Cost is High a p p • Slow Development Time d e • Lack of Involvement in Creative Delivery C v R e E l o A p T m MobileSmith I e V n • You Own the Entire Process Through Completion I t T • Rapid Development and Prototyping Y MobileSmith • Ability to Set Custom Product at Much Lower Price • Build Mulitple Apps Instead of Just One • Minimal Long Term Cost template Template Based App based • Low Level Creativity app • Limited Functionality • Lowest Common Denominator • No Opportunity to Create Brand CUSTOMIZATION 15 ¡

6 ‘Musts’ of a Truly Useful App • Custom-developed for your target audience . . • Works on major platforms • Secure and reliable • Easy to manage • Easy to update or redesign • Fun to use! 16 ¡

Request a Live Demo Today And Start Building! Questions? 919.237.4218 ¡ ¡ 17 ¡