Ronny Lempel*Hayim Makabee*Scott Roy#

Oren Somekh*

Ronen Barenboim#

Edward Bortnikov*Nadav Golbandi*Amit Kagian*Liran Katzir*

Hierarchical Composable Optimization of Web Pages

*Y! Labs Haifa # Y! Inc. Sunnyvale

- 2 -

Introduction• Traditional media is designed by human editors:

– layout, content (including ads), format (rendering)

• Printed media: – No way to receive immediate feedback– Editions are published at fixed intervals

• Digital media:– Instrumentation allows immediate feedback– Not bound to the concept of editions

• Proper automation can enable experimentation with a huge varietyof generated pages

- 3 -

FAME – Framework for Agile Media Experiences

• FAME Defines a hierarchical logical model for describing complex self-optimizing web-pages

• Allows fine-grained interplay between algorithmic decisions and editorial control

FAME

- 4 -

FAME – Flexible and Composable

• FAME Allows independent plug-ins to optimize various decisions on a page

• Orchestrates plug-ins to satisfy constraints while performing well on a target function

• Separation-of-concerns: architecture emphasizes decoupling and composability of all artifacts

FAME

- 5 -

Agile Media Creation Ecosystem

Degrees of Freedom

Constraints Optimization

UE DesignContent

- 6 -

• Degrees-of-Freedom: What, Where, HowDefine content/design alternatives (product owner)

• Constraints: Maintain semantic consistency by applying constraints over certain content/design combinations (media editors)

• Optimization: Optimize content/design selections (optimization experts) subject to various goals (business owners)

• Composable and reusable software and configuration

Agile Media Creation

UE DesignContent

- 7 -

Logical Page Description

Yahoo! HeaderToday

Main Story

#1 #2 #3 #4

Trending

Ad

Video

Vertical

News

Yaho

o! S

ites

RegionsModules

Layout

Rendering

- 8 -

Logical Page Description

<layout label=“MainPage”>… <region label=“TodayRegion”> <module label=“TodayModule” render=“Design7”> <MainStory> <image href=“../10BlackFriday.jpg”/> <title> … </title> <description> … </description> </MainStory> <TeaserNewsItem label=“teaser1”> <image href=“../thumbnail1.jpg”/> <title> … </title> </TeaserNewsItem> … </module> </region></layout> …

Today

Main Story

#1 #2 #3 #4

MainStory Teaser4Teaser1

TodayRegion

Layout

Arbitrary Tree

TodayModule

- 9 -

Logical Page Model

Logical Page Description

Logical Page Model FAME

Operators

- 10 -

fetch operator (dynamic content)

TodayRegion

TodayModule

fetch

News FetcherResult Set

News Item1 News Item5

- 11 -

choice operator

VerticalRegion

AutosModule

choice

Choice

FinanceModule

TravelModule

- 12 -

map

NewsItem 1

map operator

NewsItem 5

MapItem 5

Map Item 1

Map

Position5Position1

News Item A

NewsItem E

TodayModule

- 13 -

constraints operator

Position5Position1News

Fetcher

Map

Constraints

TodayModule

TodayRegion

Constraints

TrendsModule

TrendsRegion

Position10Position1TrendsFetcher

MapPage

ConstraintJava Script

Page ConstraintJava Script

constraints

- 14 -

MapItem 30

Map Item 1

NewsItem 30

NewsItem 1

Fetcher

XSLT

Hierarchical operator composition

NewsItem 30

NewsItem 1

Result SetPosition5Position1

Map

Result Set

Result Set

NewsItem E

NewsItem A

TodayModule

NewsItem 30

NewsItem 1fetchmap

- 15 -

Operator implementation

• Operator: interface (fetch, choice, map)• Resolver: implementation• A resolver can have a custom business logic or

to conduct experimentation• Example: a choice operator experimenting with

choosing an item that maximizes CTR • Available interface for collecting Real Time User

Feedback (RTUF): clicks, views, mouse-hovers, etc.

- 16 -

Resolver

UserFeedback

Model

Resolver

UserFeedback

Model

End-to-End 2-Façade Architecture:   

FAME

RTUFDispatcher

ModelExecutor

Front-EndPage Model

Request

User Request

Real Time User Feedback (RTUF)

+ RTUFPage Description

Instrumentation

Request Update

- 17 -

Summary

• FAME: Framework for agile Web media experiences – Algorithmic experimentation and optimization

• Logical page model:– Fetch dynamic content – Degrees of freedom– Editorial constraints

• Open platform: interfaces and extension points for multiple implementations of optimization algorithms to be plugged-in

• Separation of concerns: allow players with different roles and skill sets to work independently – Compose and reuse artifacts

- 18 -

Thank You!