the experience architecture (max 2011)

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Experience Architecture Marcel Boucher | Sr. Product Marketing Mgr @marcelboucher

Craig Randall | Chief Architect, CEM @craigsmusings


End Customers Expect Great User-Centric Experiences

2

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con�dential.

New Interaction Channels Are Changing How Consumers Engage

Research product online

Receive mobile ad for product

Join Facebook community for product

Visit store for help Buy product

online

Receive product updates

See TV ad for product

Research accessories for product

Buy accessories in store

Search online for product

Receive promo for product

View video for newer product

Visit store to get help with product

3

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4

Explosion of Devices Introduces New Challenges



The Customer Experience Management Problem

5

Sales Marketing Services Customer Support Retail Operations Global Distribution Call Centers

THE COMPANY Brand + Business Goal

“BACK-END” SYSTEMS OF RECORD (ERP, CRM, ECM, PLM, …)

Mobile Social Web Email Phone Correspondence Print In Person


Adobe’s Response

6

Sales Marketing Services Customer Support Retail Operations Global Distribution Call Centers

THE COMPANY Brand + Business Goal

THE CUSTOMER Context + Experience

“BACK-END” SYSTEMS OF RECORD (ERP, CRM, ECM, PLM, …)

Mobile Social Web Email Phone Correspondence Print In Person

CUSTOMER EXPERIENCE SOLUTIONS & ADOBE DIGITAL ENTERPRISE PLATFORM


Experiences (horizontal)

Platform (building blocks)

7

http://blogs.adobe.com/gary/2011/07/solution-spotlight-a-look-inside-customer-communications.html http://blogs.adobe.com/gary/2011/08/solution-spotlight-a-look-inside-integrated-content-review.html

Experience-driven Approach

Solutions (e.g. Web Experience Management, etc.)

Blueprints (vertical)


demo

Multi-channel customer experience

(Vision)


ANY CLIENT

ENTERPRISE BACKEND

ERP CRM ECM LDAP RDBMS HR CUSTOM

ADOBE CREATIVE

SUITE 5

ADOBE ONLINE

MARKETING SUITE

CUSTOMER EXPERIENCE SOLUTIONS

ADOBE DIGITAL ENTERPRISE PLATFORM

Adobe® Digital Enterprise Platform Technology Landscape


Experience Architecture Principles

§  Modularity is key to “better experience faster”

§  Everything is content (and content is managed in a repository)

§  Context is king

§  Cloud first, mobile first, social first

10


Online Banking System

Case Management System

CRM System

Quick Access

Challenge: Composite Applications Are Made from Smaller Components


Solution: Component Model for Static and Dynamic Applications

UX Components (Presentation / Domain Model / Services)

Reusable experiences for static or dynamic applications

Composition (developers and business specialists) Reuse through shared catalog Multi-screen support

Client Component Framework (Gravity)

Composite Application Framework (Mosaic)

Dynamic loading, versioning, dependency injection

Enabling modular development, deploy, test and reuse


More on UX Components

§  Architecture pattern

§  Component separate from skin

§  Interfaces in front of implementation

§  Extensibility

§  Interfaces and domain objects are inheritable

§  Skins/styles are replaceable

§  Services are injectable

UX COMPONENT

Domain

ServiceDelegateImpl

Data Model

IServiceDelegate

Integration

DataTransferObject

IBackendService

BackendServiceImpl

Presentation

View (Component)

PresentationModel (Skin)

IPresentationModel

Infrastructure


UX Component-based UI Example


Same UX Component-based UI – New Skin and New Data Source


UX Component Patterns

UX Component

Domain & Service Presentation

View

PresentationModel

Events

Data Binding

{View State} {Operations} {Events}

DomainModel Foo getFoo() setFoo(Foo f)

IService operation()

ServiceImpl operation()

IPresentationModel

Infrastructure UtilityClasses

AD

EP R

IA S

erve

r

Client Server

IDomainModel Foo getFoo() setFoo(Foo f)

16



Domain & Service

Presentation UX Component

Pattern: Custom View and Presentation Model

CustomPresentationModel

Events

Data Binding


CustomView

IPresentationModel

17


Pattern: Custom Application Façade

Domain & Service Presentation

View

PresentationModel

Events

Data Binding


DomainModel

Foo getFoo() setFoo(Foo f)

IService

operation()

ServiceImpl

operation()

IPresentationModel


IDomainModel

IPresentationModel

Foo getFoo() setFoo(Foo f)

UX Component

Customization Façade

ServiceDelegateImpl

AppDomainModel

eRIADomainModel serviceDelegate Foo getFoo() setFoo(Foo f) Bar getBar() setBar()

IServiceDelegate

operation()

backendService operation()

18


ADEP Experience Server Core Resource-first Request Processing

§  URI decomposition

§  Resolve the resource §  Source: request URI

§  Resolve rendering script §  Source: resource type

§  Scripts are wrapped by a generic script Servlet

§  Create rendering chain §  Configurable (Servlet) filters

§  Rendering Servlet

§  Invoke rendering chain

Resource Resolver

Script Resolver

Script

request

response

Resource (sling:resourceType)

19


Optimized to manage structured and unstructured content.


ContextCloud and ContextEngine

Simulate. Experiment. Visualize. Extend. Immediate, Scalable, Client-Sided*

Preferences, Collaborative Filtering, Interests ContextCloud

Very “Current” Environment

Resolved Segments “Insights”

Harmonized Profile Social Network Information

CRM Data

Immediate Page context Language, Nav Depth

Activity Stream Information Events from SiteCatalyst


demo

Web Experience Management + SiteCatalyst + Test&Target

(How)


The Pillars of Customer Experience

23 23


Multi-device World

24

UserAgentRadical: nokia6170colors: 65536fall_back: nokia_generic_series40_dp20j2me_amr: TRUEj2me_cldc_1_1: TRUEj2me_h263: TRUEj2me_mpeg4: TRUEj2me_screen_height: 160max_data_rate: 200max_deck_size: 4194304max_image_height: 115max_image_width: 122mms_3gpp: TRUEmms_max_height: 480mms_max_size: 100000

mms_max_width: 640mms_mp4: TRUEmms_vcalendar: TRUEmms_video: TRUEmodel_name: 6170mp3: TRUEphysical_screen_height: 40physical_screen_width: 32playback_3gpp: TRUEplayback_acodec_amr: nbplayback_mp4: TRUEplayback_vcodec_h263_0: 10resolution_height: 160ringtone_amr: TRUEringtone_mp3: TRUE

ringtone_voices: 4streaming_3gpp: Tstreaming_real_m streaming_video: Tstreaming_video_a uaprof: http://nds1user_agent: Nokiavideo: TRUEvideo_3gpp: TRUEvideo_3gpp2: FALvideo_max_height video_max_width: video_mp4: TRUEvideo_preferred_h video_preferred_w


Integrate & Manage

Analyze & Optimize Create Build / Deploy

Adobe Provides a Complete Ecosystem for a Mobile First Strategy



Multi-channel and the Mobile Web with WEM D

eskt

op

Tabl

et

Smar

tpho

ne

Feat

ure

Phon

e

  Go from desktop to mobile design   Emulates devices and features   Detects devices for optimum

experience   Same tools across desktop & mobile

26



Flash Builder & Flex 4.5.1 Rapidly Build Expressive Mobile, Web & Desktop Experiences

Desktop OS’s

AIR

Flex Application

One Tool, One Language, One Codebase

Common codebase

27


Just How Easy Is It?

28



29



30



31


Web 1995

32

Webmaster Businessdaysword fileshtml websites


Apps 2011

33

Webmaster Businessdaysword fileshtml websitespptapps ha!!

App Developer

+ uncertainty(third party review process)


Updating Deployed Apps Typically Means a Lot of Work

Finance Corp

Home Accounts

Finance Corp

A full service financial

institution

Home Accounts Support

Marketing Requests Changes

Development Team Rebuilds App; Recompiles

App Re-submitted to App Stores

“You have an update…”

User Experience Enterprise Experience

34


Use Content Sync to Easily Update Deployed Applications

Finance Corp

Home Accounts

Adobe Digital Enterprise Platform

Finance Corp

A full service financial

institution

Home Accounts Support

  HTML   SWF   Images   Documents   Video

User Experience Enterprise Experience

Con

tent

Syn

c

35

User restarts app


Experience Architecture Resources

§  Introductory set of blog posts http://craigrandall.net/archives/2011/07/adep-architecture-principles/ http://craigrandall.net/archives/2011/06/what-is-xoa/ http://craigrandall.net/archives/2011/06/what-is-a-ux-component/

§  Technical white paper (additional depth) http://demand.assets.adobe.com/en/downloads/whitepaper/7958.whitepaper.ADEP_Architecture.en.pdf

§  Enterprise developer center http://www.adobe.com/devnet/enterprise-platform.html

36