Uxce14 uke Xperience

37
UkeXperience HowtheUkeExperiencehelpsmegettingpeople intothefirstideaofUXandMobileStrategies Carsten Lambrecht Senior Account Manager dkd Internet Service GmbH

description

Carsten Lambrecht, senior Account Manager @ dkd.de starts the UkeX with an introduction to strategic thinking and why Responsive Web Design is not a mobile strategy. Four examples show how business models are changing from B2B (Business2Business) to B2C (Business2Consumer). We call this trend „B2B2B2C“. One example describes the „Value Chain“ in which Nike delivers shoes to the consumer (e.g. wholesale or retail). Beside this B2B-model there is a way in which the consumer can order his unique pair of shoes directly B2C. This leads to more complex mobile strategies in which a responsive web-site might be part, but not the whole strategy. The UkeX describes mobile communication (as part of the mobile strategy) with different approaches of playing a song on the Ukulele. First we hear the harmonies of a song which is hard to recognize. The second example is the melody of a song which is easier to recognize. These two examples stand for the concepts „graceful degradation“ and „progressive enhancement“. The second example reduces the song to the basic content, the melody. In the meaning of progressive enhancement this basic content can be enhanced if more or bigger instruments are available. The further UkeX takes us on a customer journey from getting the consumers attention to the buying process. On this journey there are several touchpoints where the consumer can be influenced. These touchpoints can be simple newsletters or complex checkout-processes on web pages. This journey can lead to the right ideas for a mobile strategy.

Transcript of Uxce14 uke Xperience

Page 1: Uxce14 uke Xperience

Uke�XperienceHow�the�Uke�Experience�helps�me�getting�people�into�the�first�idea�of�UX�and�Mobile�Strategies

Carsten LambrechtSenior Account Managerdkd Internet Service GmbH

Page 3: Uxce14 uke Xperience

Motivation

why...?

Page 4: Uxce14 uke Xperience
Page 5: Uxce14 uke Xperience

www.vgf-ffm.de

Page 6: Uxce14 uke Xperience

Strategy

Mobile

Mobile�Strategy?

Page 7: Uxce14 uke Xperience

„if�you�don't�have�a�mobile�strategy,�you�don't�have�a�future�strategy“

Eric�Schmidt,�google

Page 8: Uxce14 uke Xperience

Meta Tag<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML StructureMobile !rst - Progressive enhancement

Media Queries/* for 700px or less */@media screen and (max-width: 700px) { #content { width: 700px; color: red; }}

Server-Side requirementsDevice DetectionPre-Generate Multiple Image Versions

RWDBuzzword�Bingo

Progressive Enhancement

Responsive Web Design

AWDAdaptive Web Design

Break-Points

Adaptive Images

Second Screen

Media querriesPerformance is King

DistributionContext is King (Kong)

Graceful�Degradation

Progressive�Enhancement

Mobile First

Mobile Last

C o n t e n t � i s � K i n g

Page 9: Uxce14 uke Xperience

(mobile)�Vision/Strategie

a

b

mobile�Strategy

Page 10: Uxce14 uke Xperience

mobile�Strategies�melting�existing�Value�Chains

Page 11: Uxce14 uke Xperience

value-chain�taxi-ride

Passenger Taxi Call Center Taxi Driver

Page 12: Uxce14 uke Xperience

Customer�Journey�&�Touchpoints

vor

während

nach

Inte

ress

e

Abwägung

Kauf

Nut

zung

„wiederkauf“

Auf

mer

ksam

keit

!Infos - Argumente

Sicher & einfach

Serv

ice/

Zufr

iede

nhei

t

Loyalität

a nach b

Bahn Taxi in der nähe?Auto TelefonnummerRad

Landingpage

Falsche Nummer

Wo genau bin ich

Anruf

teuer

Umweg

Visitenkarte

Bericht

Bewertung

Page 14: Uxce14 uke Xperience

value-chains�are�melting

B2B2B2C

Page 15: Uxce14 uke Xperience

Strategy�✓Mobile?

Page 16: Uxce14 uke Xperience

The�first�Ukulele�Experience

everything is better with music

Page 17: Uxce14 uke Xperience
Page 18: Uxce14 uke Xperience
Page 19: Uxce14 uke Xperience
Page 20: Uxce14 uke Xperience
Page 21: Uxce14 uke Xperience

UkeX�No.�1�-�songs�on�a�ukulele

Graceful�Degradation

Progressive�Enhancement

Mobile First

Mobile Last

C o n t e n t � i s � K i n g

optimized for

big screens

Page 22: Uxce14 uke Xperience

Meta Tag<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML StructureMobile !rst - Progressive enhancement

Media Queries/* for 700px or less */@media screen and (max-width: 700px) { #content { width: 700px; color: red; }}

Server-Side requirementsDevice DetectionPre-Generate Multiple Image Versions

RWDBuzzword�Bingo�-�Back�again

Progressive Enhancement

Responsive Web Design

AWDAdaptive Web Design

Break-Points

Adaptive Images

Second Screen

Media querriesPerformance is King

DistributionContext is King (Kong)

Graceful�Degradation

Progressive�Enhancement

Mobile First

Mobile Last

C o n t e n t � i s � K i n gnative APP vs Web APPs

Sencha Touch

Page 23: Uxce14 uke Xperience

Strategy�✓Mobile?�✓

Page 24: Uxce14 uke Xperience

online�time

Of!ce Of!ce

☽☼Of!ce Of!ce

Page 25: Uxce14 uke Xperience

online�time�today

Of!ce Of!ce

Of!ce Of!ce

☽☼

Yeah! new touchpoints

Page 27: Uxce14 uke Xperience

The�second�Ukulele�Experience

everything is better with music

Page 28: Uxce14 uke Xperience

Customer�Journey...to�a�waiting�queue..?

everything is better with ukuleles

Page 29: Uxce14 uke Xperience

UkeX�No.�2i�met�a�Uke�on�my�Customer�journey

Page 30: Uxce14 uke Xperience

vor

während

nach

Inte

ress

e

Abwägung

Kauf

Nut

zung

„wiederkauf“

Auf

mer

ksam

keit

!Infos - Argumente

BerichtBilder Filme

Reisebüro

Web

Anzeigen

UkeX�No.�2i�met�a�Uke�on�my�Customer�journey

Page 31: Uxce14 uke Xperience

vor

während

nach

Inte

ress

e

Abwägung

Kauf

Nut

zung

„wiederkauf“

Auf

mer

ksam

keit

!Infos - Argumente

BerichtBilder Filme

Reisebüro

Web

Anzeigen

UkeX�No.�2i�met�a�Uke�on�my�Customer�journey

Page 32: Uxce14 uke Xperience

vor

während

nach

Inte

ress

e

Abwägung

Kauf

Nut

zung

„wiederkauf“

Auf

mer

ksam

keit

!Infos - Argumente

Sicher & einfach

BerichtBilder Filme

Reisebüro Reisebüro

Web

Warenkorb

Bezahlsystem

Bestätigung

Parkplatz

Anzeigen

UkeX�No.�2i�met�a�Uke�on�my�Customer�journey

Page 33: Uxce14 uke Xperience

vor

während

nach

Inte

ress

e

Abwägung

Kauf

Nut

zung

„wiederkauf“

Auf

mer

ksam

keit

!Infos - Argumente

Sicher & einfach

BerichtBilder Filme

Reisebüro Reisebüro

Web

Warenkorb

Bezahlsystem

Bestätigung

Parkplatz

Anzeigen

UkeX�No.�2i�met�a�Uke�on�my�Customer�journey

Page 34: Uxce14 uke Xperience

vor

während

nach

Inte

ress

e

Abwägung

Kauf

Nut

zung

„wiederkauf“

Auf

mer

ksam

keit

!Infos - Argumente

Sicher & einfach

Serv

ice/

Zufr

iede

nhei

t

Loyalität

BerichtBilder Filme

Reisebüro Reisebüro

Web

Warenkorb

Bezahlsystem

Bestätigung

Parkplatz

Anzeigen

UnterlagenInformationsangebote

Reisegutschein

Reisegutschein

Bericht

Bewertung

UkeX�No.�2i�met�a�Uke�on�my�Customer�journey

Page 35: Uxce14 uke Xperience

Mobile�Strategy�disconnecting�the�mobile

http://vimeo.com/90042943

Page 36: Uxce14 uke Xperience

???

Thank�You

@casilas @dkd_de

Page 37: Uxce14 uke Xperience

references

by�@casilas

istockphoto.com:000024961826

istockphoto.com:000000103166

istockphoto.com:000017374915

mytaxi.com

istockphoto.com:000019758577

http://74fdc.wordpress.com/2012/06/29/additive-fabrication-growing-footwear-to-reduce-costs-and-pollution/

istockphoto.com:000016773057

istockphoto.com:000008772590 IMG�by�Søren�

Schaffstein�dkd.de

Videos

https://www.youtube.com/watch?v=55kOphD64r8

by�@casilasistockphoto.com:000017746481

http://vimeo.com/90042943

by�@casilas