© 2018 Client Resources Inc. All rights reserved.

March 27, 2018

Choosing the Right Mobile Approach

Who’s Speaking

Todd Britsonhttps://www.linkedin.com/in/toddbritson/

• 20+ years of development experience • Started mobile dev in 2009

- Android release 2008 (September)- Apple opens iOS 2008 (July)

• Mobile Experience with: - Native, Cordova (PhoneGap), Xamarin, ..., Iconic, Appcelerator, more.

- Sports, Health, Banking, Voicemail, Photo, Retail, System Mgmt., more.- Small internal apps to large (Millions Users) adopted applications

• 90% users reported they stopped using an app due to poor performance (Impact)• 86% delete/uninstall the app due to performance

• 88% of online consumers are less likely to return after a bad experience (Gomez)

• 94% of a website user’s first impressions are design related (Veopix Design)

• 79% percent of online shoppers who experience a dissatisfying visit are less likely to buy from that site again (Akamai)

• Every dollar spent on UX, brings in between $2 and $100 dollars in return (Eckert)

• 75% of users base rated the entire company’s credibility on their online experience (Veopix Design)

• 52% of mobile apps lose over half their peak users within 3 months (Ascendle)

Mobile Approach – UX

UX/UI: Return On Investment

Mobile Approach – UX

Competitive Research

Discover: Customer Research (Interviews / Surveys)

• Discover Customer Wishes

• Discover What is Most Important

• Discover What Else Users Want and WHY!

• Discover Options and Gain Direction

That is a button?

Mobile Approach – UX

Mobile Approach – UX

Customers Personas

• Quantifiable Customer Research Data

Power-Play Paul Away Amy Secure Steve Simple Sara

Power User Always Away Security Simplicity

26% 37% 28% 9%

• Personal-driven Context Scenarios• Provides Focus

- Features Priorities- Design Recommendations

Mobile Approach – UX

Story MapProject 1 - Story Map

Release #1 ~ 96% Initial Experience ~ 77% Account Services

Mobile Approach – UX

Tool Slide

Nothing To Install

Drag and drop

Simple scalability

Dedicated support

Cost:Individual: $4.95 - $8.95/mo.Team: 2-3: $20/mo.

3-5: $30/mo.5-10: $60/mo.…75-100: $600/mo.

Visio import/export

Mobile Approach – UI

Eight Elements to a Successful User Interface1. Discoverability

2. Affordance

3. Comprehensibility

4. Responsiveness

5. Predictability

6. Efficiency

7. Forgiveness

8. Explorability

Mobile Approach – UI

Human Interface GuidelinesMaterial DesignDesign Patterns

• Cost Savings• Native OS, less to figure out

• Reduce Risk• Google/Apple spend millions on best UX

• Understood• Not only user, but design to development

• Adoption• Less to explain

ADA – WCAG 2.0

Mobile Approach – UI

https://www.w3.org/TR/mobile-accessibility-mapping/#wcag-2.0-and-mobile-content-applications

1.3.3 Sensory Characteristics1.4.1 Use of Color1.4.3 Contrast (Minimum)1.4.5 Images of Text2.2.2 Pause, Stop, Hide2.3.1 Three Flashes or Below Threshold2.4.2 Page Title2.4.4 Link Purpose (In Context)2.4.5 Multiple Ways2.4.6 Headings and Labels2.4.7 Focus Visible3.2.1 On Focus3.2.2 On Input3.2.3 Consistent Navigation3.3.1 Error Identification3.3.2 Labels or Instructions3.3.4 Error Prevention (Legal, Financial, Data)

(Most take no additional effort to meet, when keeping ADA in mind during design)

Pass - AA

56M USA are Disabled (8.5%) Color Blindness

(NPGroup)

Wireframes: Quick Easy Method to display Screen Architecture

Mobile Approach – UI

INFOTEC INFOTEC

INFOTEC

INFOTEC

INFOTEC

Authentication Wireframes• Start of Design• Black & White• Easy to discuss• Easy to alter

User/Password Challenge Question Terms of Service. Passcode Login Touch ID Login

Sketch

Hi-Fi: Product is Seen

Mobile Approach – UI

INFOTEC

INFOTEC

Authentication Hi-Fi

INFOTEC INFOTEC

INFOTEC

User/Password Challenge Question Terms of Service. Passcode Login Touch ID LoginIcon Splash Screen

“Infotec”

Sketch

Mobile Approach – UI

Tool Slide

Only for Macs

Simple Design Tool

Collaboration in mind- Easy to share- Comment

Dedicated support

Cost:Individual:

$99/ Year 1$69/Year Ongoing~ Discount with teams

Great plugins!

Sketch

Easy Export… Not needed

Mobile Approach – UI

Tool Slide: Prototype: Feel The App

- Sketch to InVision

Cost:1 Prototype: Free2-3: $15/mo.Unlimited: $25/mo.Team (5): $99/mo.

1. Design in Sketch2. Add to InVision3. Create Prototype (Linking)4. Share & Gather Feedback5. Collaborate - realtime

- Excellent for Design Workshops(Animations & flows)

- Focus Groups & User Testing

Infotec

T Rememberodd

*

Mobile Approach – Statistics

KPI – Key Performance Indicators

• KPI allow you to know how the app is doing compare to business goals• Decreasing Call Center Volume?• Increasing New Services?• Raises Customer Satisfaction?

• Standard KPIs Considerations• Increase Usability• Decrease Development Rework• Increase Customer Retention• Increase Conversion• Build Brand Awareness

• Standard Analytical Stats• Page Views• Login Method• Menu Access / Menu Selection• View Transitions• Major Button Stats• Summary Data

Mobile Approach – Statistics

Tool Slide

Cost:FREE!

Retention- Daily Active Users- % Active [Low, Med]- % Returning

fabric

Growth- Daily New Users- New User Activity

KPI … - Not the best, historical

Crashlytics … - Next Slide

Latest Release- Adoption- Stability

Engagement- Total Users- Sessions per User- Time in App

Audience- Geographical Location- Device Type- Device OS

Revenue / Events

Beta- User Admin- User Install State

Mobile Approach – Statistics

Tool Slide fabric

Crashlytics (2011)- Health of App- Summary of Crashes- Group Devices- Group Oss- Recommend Fixes- Display Native

Error Location- Ability to Comment- Ability to Close- Simple plugin

Cost:FREE!

Mobile Approach – Statistics

Crashes in Production• Past 90 Days• Latest build only• Each crash individually

Low:Monitor

Med: 2 Hour Fix

High:Fix, Next Release

Critical:Fix, Hot Fix

.25% Users /x3 Crashes

.5 Users / x3 Crashes

1% Users / x3 Crashes

2% Users / x3Crashes

Open TicketMonitor

Open/Update Ticket2 Hour Limit

Open/Update TicketFix, next release

Open/Update TicketFix, hot fix

Crashes in Development• Understand & Resolve all Development Crashes

GOAL: >=99.7%Crash-free

Sessions

Mobile Approach – Statistics

Tool Slide

$39/mo. (1-User)$79/mo. +Compare (3-Users)$149/mo. + export (10-Users)

Appbot

Sentiment

Words

Reviews Ratings

Emotions

Integrations API

Cost:

Mobile Approach – Statistics

Tool Slide

Many Good Analytic Tools• Google Analytics• Firebase• Adobe Omniture• Flurry• Countly• …

Analytics Tool

What to look for:• Mobile Focus• Company’s current platforms• Easy Business Access• Easy Automated Reports• Integrations & Plugins

Mobile Approach – Statistics

Tool Slide

Many Good Analytic Tools• Google Analytics• Firebase• Adobe Omniture• Flurry• Count• …

Analytics Tool

What to look for:• Mobile Focus• Company’s current platforms• Easy Business Access• Easy Automated Reports• Integrations & Plugins

by Todd Britson, March 7Wished infotec hired CRi for a mobile application!

by Jon Fake, March 10The application is clearly outstanding and the best anything could be. Well, I took away 2 stars as I wanted you to still try harder. If the application could think for me and pay me, then I will provide you those last two stars. Until then, you will only get 2 stars from me. Enjoy the conference. “Four Stars” by Jessica Fake, March 8

As you was only one 1-3 star review, we had to show this four start to fill this report up. Other ideas, we have done is put a header saying no 1-3 star reviews during this time and put date of last negative review. Really a simple automated report is the most important part.

Native ApplicationsNative apps are written in the programming language specific to the platform OS (Objective-C Or Swift, Java).

Hybrid ApplicationsAre written with a tool/framework, that allows the developer to use a common programming language. This application will either compile to a predefine feature rich native application or utilize a native application web view solution.

Mobile Approach – Dev

Mobile Approach – Dev

Native Hybrid, compile Native Hybrid, web container

Device OS Device OS

Mobile App Mobile App Mobile App

Device OS

Webserver

Mobile Approach – Dev

62% Users are likely to uninstall an app, if they experience app crashes or errors!

7%Of them will write a bad review (AppLift)

(Y Insights)

Mobile Approach – Dev

Device OS Device OS

Mobile App Mobile App Mobile App

Device OS

Webserver

Native Hybrid, compile Native Hybrid, web container

0.5

1.0

1.5

2.0

2.5

KeyTime to MarketApp PerformanceInitial CostSupport Cost

0.0

Success Risk

Solution Design

Server(s) & Database(s)

FOCUS:- Response Time- Trans Payload- Providing Data- Image Separation

Mobile Applications

FOCUS- Responsive UI, Simply- Lazy Loading- Non Blocking- Displaying Data

Mobile Approach – Dev

Mobile Approach – Dev

Tool Slide

Sketch + Zeplin

ZEPLIN

Cost:1 Project: Free2-3: $17/mo.3-12: $26/mo.Unlimited: $7.95/user/mo.

Mobile Approach – Dev

High Fidelity Style Guide Sketch

Infotec Blue 2Infotec Blue 1

Quality Assurance Focus- To verify the quality of the code- To verify the quality of the coding process- Aid in customer knowledge (Testing process, Test Cases, etc.)- Explain missed items (Defects/Bugs) to development/team- Certify and Release Software

Mobile Approach – Test

Mobile Approach – Dev

Cost:Free

Tool SlideADA- Use Accessibility IDs

-- Makes app ADA Ready-- Simplifies Automation

Test Devices- Simulators- Physical Devices

Dev / QA- Dev Setup / Architecture- QA Process - QA Creates Scripts

- Java- Objective-C- JavaScripts- PHP- Python- Ruby- C#- Clojure- Perl

Mobile Approach – Dev

Cost:Free

Tool Slide(Nightly)

Mobile Approach – Dev

Tool Slide

VMware Fusion

Android Build Server

xCode9.2 /iOS11 Build Server

xCode9.1 /iOS11 Build Server

xCode8 /iOS10 Build Server

Multi-Builds

UX- Competitor Strategy- User Interviews- Personas for full project- Story Map

UX UI- Design 8 Elements- Design Patterns- ADA Upfront- Simple Wireframes & Prototypes

UX UIStat- Setup KPIs- Easy Analytics- Crash-free Plan- Automated Reports

UX UI DevStat- Mobile Architecture Plan- Clear Server & DB Focus- Clear Client Focus- Stories with ADA

UX UI DevTest Stat

- Test Plan- Automation Plan- Build & Release Plan

Thank you!

UX

Dev

UI

DevTest

Stat ~5 StarsReviews

UI

Dev

Mobile Meetups @CRi!

• Omaha Mobile Group

• First Wednesday of Each Month (6:00pm)

• https://www.meetup.com/Omaha-Mobile-Group/

• Google (Android) Developer Group

• Second Tuesday of Each Month (6:00pm)

• https://www.meetup.com/GDGOmaha/

(Omaha Tower: 2120 S 72nd, 13th Floor)

Mobile Approach – LAST NOTE