Webinar: How to Create Meaningful Mobile Experience with Responsive Design

presented by:

Webinar:How to Create Meaningful MobileExperiences With Responsive Design

Deliver the right experienceto the right device.

with your host, Brian HarrisDirector of Digital Services, iSG

@bridgelineBridgeline.com

Please engage with this presentation

We welcome your questions…

As the presentation is being given, we welcome your inquiries.

Just open the questions pane and ask what you want to know!

Lauren Moore @bridgeline

Vice President of Interface Design

BFA Electronic Multimedia, University of Florida

lmoore@bridgelinedigital.com

Brian Harris @brianart

Director of Digital Services, iAPPS Success Group

BFA Computer Graphics, Syracuse University

bharris@bridgelinedigital.com

About the presenters

Visit us at: bridgeline.com

Follow us: @bridgeline

Tom Lynch @bridgeline

Vice President of Interface Design

Bachelors degree in Graphic Design from the Fashion Institute of Technology

tlynch@bridgelinedigital.com

Who is Bridgeline Digital

We help our customers achieve their key initiatives by leveraging leading web based technologies

How We Build Customer Success

“No other company in the web engagement marketplace can provide for its customers the integrated solutions Bridgeline provides.”

- Scott Liewehr, DCG

Introduction: The Itinerary

What we are talking about today …

It’s a connection. Mobile. It’s not a technology. Or Strategy.

Introduction: Why We’re Here

Bridgeline Digital’s Mobile Maturity Model:

Stage #1 Stage #2: Stage #3: Stage #4:

Awareness

CMOs & eCommerce Professionals Recognize Mobile as critical to business objectives, but 2/3 indicate they don't have a strong understanding of the mobile user experience.

Planning

72% of respondents expect to invest more in mobile channels.

Action

Vendor selection to implement the planned technology to deal with the Mobile Revolution.

Maturity

Your business has a meaningful & contextualized presence that seamlessly meets the needs of your customers.

Introduction: The Itinerary

Why Embracing Mobile Matters:

Brand

Long-Term Opportunities

Mobile Commerce/Conversion

A Different Kind of Engagement

Introduction: Mobile & Brand Preservation

Why Embracing Mobile Matters

Brand

Google found 72% of online shoppers expect businesses to have a mobile-friendly website

55% say a poor mobile experience will hurt their opinion of brand

Introduction: Long-term Mobile Considerations

Why Embracing Mobile Matters

Long-Term

Opportunities 89% of customers do business with a competitor

following a poor customer experience (IBM)

72% of companies said that mobile accounts

for more than 10% of traffic, up from 52% in

2012 (Google)

67% of consumers said they’re more likely to

make a purchase if a website is mobile-friendly

(Google)

Introduction: Email Still Wins the Day

Why Embracing Mobile Matters

Mobile Commerce & Conversion Success

In 2013, Mobile Commerce grew to grow nearly 70%, reaching $41.7 billion

Growth would exceed BoA pace, which projects Mobile Commerce to reach $67 billion by

2015

Monetate reported that Q1 of 2013 marked the first time conversion rates on tablets

exceeded desktops.

Introduction: Mobile Customer Engagement

Why Embracing Mobile Matters

A Different Kind of

Engagement 91% of smart phone users

have their phone within arm’s

reach 24/7

31% of American Adults who

have cell phones use it for the

majority of their Internet use

What Is Responsive Design?

Lauren Moore Vice President of Interface Design

What is Responsive Design?

What is Responsive Design:

Kayla Knight, Smashing Magazine

”“ Responsive Web design is the approach that

suggests that design and development should

respond to the user’s behavior and environment

based on screen size, platform and orientation.

Why Responsive is the answer:

Breaking Down the Alternatives

Marrying devices, instead of a concept, limits business presenceThe “App” Problem:

To find an App In Marketplace and Download Is

Active Experience.

Must Develop Different Apps For Different Devices

Quarantined content isn’t shareable (prevents

virality)

Separate Mobile Website:

Creating separate Mobile websites hurts SEO.

Mobile Sites Appear Fragmented On

Desktop/Laptops.

Requires content updates in two separate locations.

Reasons Why Responsive Works

Importance of User Behavior

Smart Device Users Rely Heavily on Search

In November 2013 alone: OVER 19 Billion Search Queries Occurred Across Five Major Search Engines. 26% of 19B = 4.94 Billion Inquiries On Mobile Devices

Reasons Why Responsive Works

Importance of User Behavior (Continued)

Customer Tendencies: Action, Not Volume, Is Critical

9 out of 10 smart phone searches result in customer action with over half leading in a purchase.

58% of Americans use their smart device on their way to the retail store or in store.

Reasons Why Responsive Works

Search Engine Optimization Considerations

From Google’s Developer Guide:

Single URL creates easier user interaction and sharing opportunities

Helps Google’s algorithms assign the indexing properties for the content

No redirection is needed for users to get to the device-optimized view & reduces loading time

Reasons Why Responsive Works

Consistent User Experience Across All ChannelsSocial Considerations: Example Twitter

Mobile Users are More Engaged:

44% more likely to click on links 66% more likely to reTweet 76% more likely to favorite a Tweet. More than 60% of Twitter users log-on to via a mobile device

– Twitter”“ Think about content that’s easy to interact with and

consider the experience beyond the Tweet too – for

example, link to sites that are optimized for mobile.

From Twitter Advertising Team:

Reasons Why Responsive Works

Consistent User Experience Across All Channels

Don’t Submarine Email Marketing Campaigns with a Call-To-Action That Leads to a Fragmented Web Experience.

Half of all unique opens occurred on a mobile device

Desktop-only

Webmail-only

Mobile-combo

Other

Mobile-only

Unique opens Source: Experian Marketing Services

Reasons Why Responsive Works

Contextualized Interactions

2 out of 5 companies agree that 'delivering positive customer experiences is harder on a Mobile Device‘ (IBM)

Responsive Design empowers companies to best deliver the right experience to the right device

Creating a Responsive Web Design

Tom LynchVice President of Interface Design

Creating a Responsive Web Design

Discovery Phase

1. Interview End Users, Stakeholders

2. Conduct Competitive Analysis;

Analytical Review For SEO

3. Establish Content Hierarchy

4. Develop Site Map

5. Create Wireframes

6. Usability Testing

STEP 1

Interview End Users & Stakeholders

STEP 2

Conduct Competitive Analysis; Analytic Review

STEP 3

Establish Content Hierarchy

STEP 4

Develop Site Map

STEP 5

Create Wireframes

STEP 6

Usability Testing

Creating a Responsive Web Design

Discovery Phase: Develop Site Map

Creating a Responsive Web Design

Discovery Phase: Homepage – Wireframes

Creating a Responsive Web Design

Discovery Phase: Homepage – Screenshots

Creating a Responsive Web Design

Discovery Phase: Product Details – Wireframes

Creating a Responsive Web Design

Discovery Phase: Product Details – Screenshots

1. You’re not late to the party, but the 13th hour is upon us

2. Responsive Design is the panacea to the mobile puzzle

3. Mobile Maturity starts at selecting the right technology, and ends with creating a seamless experience … regardless of device

Final Thoughts …

Q&A

Brian HarrisDirector of Digital ServicesBridgeline Digital@brianart

Lauren Moore Vice President of Interface DesignBridgeline Digital@Bridgeline

Tom LynchVice President of Interface DesignBridgeline Digital@Bridgeline

Thank You for joining the Webinar!

Follow us on twitter: @bridgeline

Visit us at: www.bridgelinedigital.com