Mobile Design. Strategic Solutions.Theresa Neil

I work as a Consultant, helping companies with their UX Strategy.

Theresa Neil

TEXAS

GERMANY

TEXAS

GERMANY

TEXAS

GERMANY

TEXAS

GERMANY

The Progression

Classic Web Site Kiosk

Native Tablet App Mobile Optimized SiteNative Mobile Apps

Early Mobile Web

Whatʼs Driving Their Mobile Strategy?

Customer AcquisitionCustomer Retention

Brand Alignment

Competition

Mobile Usage

Enterprise Mobility

Whatʼs Driving Their Mobile Strategy?

Customer AcquisitionCustomer Retention

Brand Alignment

Competition

Mobile Usage

Enterprise Mobility

Mobile Usage

Whatʼs Driving Their Mobile Strategy?

Customer AcquisitionCustomer Retention

Brand Alignment

Competition

Mobile Usage

Enterprise Mobility

Customer Retention

Securing loyalty by providing value added services

Whatʼs Driving Their Mobile Strategy?

Customer AcquisitionCustomer Retention

Brand Alignment

Competition

Mobile Usage

Enterprise Mobility

Customer Acquisition

Attract and convert new customers

Use mobile as a conversion funnel for other products and

services

Whatʼs Driving Their Mobile Strategy?

Customer AcquisitionCustomer Retention

Brand Alignment

Competition

Mobile Usage

Enterprise Mobility

Brand Alignment

Aligning the brand with innovation and forward thinking

Whatʼs Driving Their Mobile Strategy?

Customer AcquisitionCustomer Retention

Brand Alignment

Competition

Mobile Usage

Enterprise MobilityCompetition

At this point, every airline, even regional carriers, have

integrated mobile solutions in their customer experience

Whatʼs Driving Their Mobile Strategy?

Customer AcquisitionCustomer Retention

Brand Alignment

Competition

Mobile Usage

Enterprise MobilityEnterprise Mobility According to Forrester Research, 75% of companies report “increased worker productivity” from deploying mobile applications.

What Are Your Mobile Options?

Responsive WebOptimized Sites

Native Apps

What Are Your Mobile Options?

Responsive WebOptimized Sites

Native Apps

Responsive Web defined...

Defined Web site responds to the environment using css media queries. Typically achieved by using fluid grid layouts, like Responsive Grid System, Bootstrap, from Twitter, or Foundation by Zurb.

Responsive Web

Responsive Web

UIWindow 768 x 1024

Cisco London 2012

Responsive Web

Responsive Web

Ideal For Informational Web SitesPromotional SitesContent Consumption Sites

• Newspapers• Magazines• Blogs• Galleries• Portfolios

Boston Globe

If you want to learn more about designing responsively...

What Are Your Mobile Options?

Responsive WebOptimized Sites

Native Apps

A closer look at Optimized Sites...

Optimized Sites aka mobile apps and dot m sites

Optimizing for different sizes and different usage needs

Check Weather

Watch Video

Local News

National News

Sports Info

Entertainment

Financial Info

Reference Materials

Lifestyle Content

Magazine Content

0 12.5 25 37.5 50

Smartphone Usage

Playing Games

Checking Email

Social Networking

Research

Listening to Music

Watching TV

Shopping

Reading Books

Lightweight Creation

0 12.5 25 37.5 50

Tablet Usage

Optimized Sites aka mobile apps and dot m sites

Mobile usage throughout the day:

http://www.inmobi.com/inmobiblog/files/2012/02/Global_MediaConsumption_Info_Feb22.png

Optimized Sites

Classic Web Site Tablet Web Site Mobile Web Site

Some companies have three distinct sites...

Optimized Sites

Amazonʼs Classic Web Site & Tablet Site Mobile Web Site

More often there are only two distinct sites

Optimized Sites

jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site

The mobile version is streamlined for core activities

The Four Core Activities of Mobile Users

Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.

Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.

Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.

Edit/Create (urgent change/micro-tasking): I need to get some- thing done now that can’t wait.

Optimized Site: Backbase Project Tool

Basecamp userʼs core activities fall into two categories:1.Checkin/status2.Edit/create

Their mobile optimized site provides a solution for these needs.

Optimized Site: Harvest Time Tracking

http://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/

BETA

V1

Harvest also optimizes for:1.Checkin/status2.Edit/create

Concepts

Responsive vs Optimized Sites

InformationalContent Heavy

• Newspapers• Magazines• Blogs• Galleries

Web Sites Web AppsSearchTravelRetailSaaSProductivity Tools(light-weight)

Responsive Optimized Sites

Mobile Web Doʼs and Dontʼs

Doʼs

Use Image SpritesBundle & minify CSS and Javascipt filesLimit or remove dependencies on heavy JS librariesUse CSS3 for styling, rounded corners, text shadows...

Make content most important (reduce navigation)Focus on performance

Mobile Web Doʼs and Dontʼs

Dontʼs

Add back buttonsUse large images and size downGo crazy with special effects/transitions

Port a web app 1-for-1

Try to make it look just like a Native App

What Are Your Mobile Options?

Responsive WebOptimized Sites

Native Apps

The Native Solution...

Native Apps

Defined An application that has been developed for use on a particular platform or device.

Typically native apps are coded with:Objective C for AppleJava for Android and BlackBerryC# or Visual Basic for Windows 7.5

But there are also other options:Ruby MotionMonoTouch and MonoDroidAdobe AIR

Adobe Flex 4.5 Showcase Apps

Native Apps

Evernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone

Native Apps

Xamarian MWC 2012 App C#, MonoTouch, MonoDroid

Ideal For GamesFinancial ToolsProductivity Tools (heavy-weight)Enterprise Apps

Native Apps

Keynote Presentation ToolBloomberg Anywhere

Native Doʼs and Dontʼs

Doʼs

Navigation paradigmsUI controls

Gestures

Prototype and test often

Follow design conventions for those platformKnow & understand your target devices

Validate the prototypes on the target devices with actual users

Prototyping Essentials

Native Doʼs and Dontʼs

DontʼsDesign for the iPhone and reuse the design for Android or Windows (or vise versa)

Recreate the wheel. There are standard mobile patterns you can leverage for:

Search, Sort, FilterForms

Invitations, etc..

Mobile Patterns

GamesTools requiring:• Complex Calculations• Reporting/Charting• Native Functionality• Offline Access

SearchTravelRetailProductivity Tools (light weight)

Native Apps vs Optimized Sites

Native Apps Optimized Sites

GamesTools requiring:• Complex Calculations• Reporting/Charting• Native Functionality• Offline Access

SearchTravelRetailProductivity Tools (light weight)

Native Apps vs Optimized Sites

Native Apps Optimized Sites

At this point in time, native apps can target the specific limitations and abilities of each individual device much better than a website can while running inside a browser.http://www.useit.com/alertbox/mobile-sites-apps.html

Breaking the Rules...

Non Tech Considerations--> FinancialFinancial Times, Playboy and Walmart are using sites instead of apps to avoid sharing revenues with app store owners.

Breaking the Rules...

Walmartʼs Vudu Optimized for tablets, avoids sharing the revenue from movie sales

These are your options

Responsive WebOptimized Sites

Native Apps

Questions?

What About HTML5 ?

HTML5 is simply a technology that you can use to implement any of these solutions. There are many options, here are few:

Responsive WebHTML5 + a responsive front end framework like Bootstrap

Optimized SitesHTML5 + a mobile framework like JQuery Mobile

Native AppsHTML5 + a framework like PhoneGap or Titanium

What About Hybrids?

Defined A ʻnative wrappedʼ web application. Products like Titanium and PhoneGap create a native wrapper that let the HTML and JS access OS dependent operations they couldnʼt access on their own (contacts, calendar, camera, geo-location...)

NBC-Built with TitaniumLinkedIn- Custom Wrapper

Are Hybrids as good as Native Apps?

This isn’t black & white When big players like LinkedIn and Facebook successfully launched hybrids, it looked like a shift might be imminent.

Are Hybrids as good as Native Apps?

This isn’t black & white When big players like LinkedIn and Facebook successfully launched hybrids, it looked like a shift might be imminent.

But Facebook has rebuilt their iOS apps with Objective C, primarily to improve the performance.

Hybrid or (truly) Native?

Hybrid Fail

Hybrid or (truly) Native?

Hybrid Fail Hybrid Success

Common Hybrid Pitfalls

Code once and reuse doesnʼt mean design once and reuse

iPhone Android AndroidiPhone

x

Good Hybrids in the Market

Follow the design conventions of each platform

Netflix

http://functionsource.com/post/netflix-feature

What is Mobile First?

A different way of thinking

Agreement on what matters most

Mobile First is...

Knowing your users

What they do and why they do it

Know Your Users

2010 2012

The Guardianʼs Data

Donʼt rely on data alone; observe your users in the wild

Mobile First Has Many Faces

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

DESIGN

DEVELOPMENT

Mobile First Has Many Faces

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

DESIGN

DEVELOPMENT

Strategy

Mobile First Has Many Faces

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

DESIGN

DEVELOPMENT

Strategy

Design

Mobile First Has Many Faces

http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/

DESIGN

DEVELOPMENT

Strategy

Design

Development

Mobile First In Action

Austin Start-Up Silvercar starts with Mobile First

If you want to learn more about designing for...

Thank YouFollow me on Twitter @theresaneil

Read my book and blog: “Mobile Design Pattern Gallery” OʼReilly 2012