modern web experience What is it?

modern web experience 1. A web property that taps into consumer trends to transcend

current user experience standards.

1

HOW FAR THE WEB HAS COME

1998

4

2014

5

1997

2014

HOW CONSUMERS ARE CHANGING THE WEB

RELEVANCY EVOLVED

Consumers expect more relevant content on all their web experiencesMobile usage leads the charge Consumers don’t delineate between screens Context goes deeper than mobile Cravings increase for data-powered experiences

RELEVANCY EVOLVED

SIGNAL OVERLOAD

Due to content overload, consumers crave stimulation through simplicitySnackable content Scannable websites Minimalistic design Mission focus

SIGNAL OVERLOAD

HIGHER EXPECTATIONS

Due to new platforms and technology, consumers are trained to expect an ever-improving choice of rich content and toolsFaster websites = higher quality content Expectations apply to all website

HIGHER EXPECTATIONS

HOW THE WEB IS REACTING

#2

#3

#4

#5

#1

#2

#3

#4

#5

IMMERSIVE CONTENT

IMMERSIVE CONTENT Fluid and heroic visuals envelop user experiences

SMARTWATER

19

IMMERSIVE CONTENT Fluid and heroic visuals envelop user experiencesImmersive video draws the user’s attention

POWERHOUSE COMPANY

21

#2

#3

#4

#5

IMMERSIVE CONTENT

#3

#4

#5

IMMERSIVE CONTENT

FOCUSED NARRATIVES

FOCUSED NARRATIVES Focuses the users on a tight, semi-linear narrative path

WOO AUDIO

25

FOCUSED NARRATIVES Focuses the users on a tight, semi-linear narrative pathUtilizes navigation creatively to inspire story engagement

DREXEL UNIVERSITY

27

FOCUSED NARRATIVES Focuses the users on a tight, semi-linear narrativeUtilizes navigation creatively to inspire story engagementThe narrative flows naturally into an end goal

BEOPLAY

29

#3

#4

#5

IMMERSIVE CONTENT

FOCUSED NARRATIVES

#4

#5

IMMERSIVE CONTENT

FOCUSED NARRATIVES

MINIMALISM

MINIMALISM Snackable content paces user attention

DISNEY

33

MINIMALISM Snackable content paces user attentionContent is the centerpiece and interface

PABLO & RUSTY’S

35

MINIMALISM Snackable content paces user attentionContent is the centerpiece and interfaceStructure elevates focus on the content

FABRIK

37

MINIMALISM Snackable content paces user attentionContent is the centerpiece and interfaceStructure elevates focus on the contentFeatures and content focus only on the meaningful

PAYPAL

39

#4

#5

IMMERSIVE CONTENT

FOCUSED NARRATIVES

MINIMALISM

#5

IMMERSIVE CONTENT

FOCUSED NARRATIVES

MINIMALISM

ACTIVE STATES

ACTIVE STATES Light movements = non-verbal CTAs

CREATE PILATES

43

ACTIVE STATES Light movements = non-verbal CTAsMotion accentuates key action points on a page

ATHENOS

45

ACTIVE STATES Light movements = non-verbal CTAsMotion accentuates key action points on a pageTech bridges gap between web and real world

SURROGAID

47

ACTIVE STATES Light movements = non-verbal CTAsMotion accentuates key action points on a pageTech bridges gap between web and real worldDelights encourage users to be playful with content

COKE

49

#5

IMMERSIVE CONTENT

FOCUSED NARRATIVES

MINIMALISM

ACTIVE STATES

IMMERSIVE CONTENT

FOCUSED NARRATIVES

MINIMALISM

ACTIVE STATES

CONTEXT AWARE

CONTEXT Responsive web design was the first step

CATSCARF

53

CONTEXT Responsive web design was the first stepConsumers crave personal, data-driven stories

APRILZERO .COM

55

CONTEXT Responsive web design was the first stepConsumers crave personal, data-driven storiesSocial places products in real world context

MY BEAUTY

TEA

57

CONTEXT Responsive web design was the first stepConsumers crave personal, data-driven storiesSocial places products in real world contextExperiences will become tailored to external contexts

DOGE WEATHER

FUTURE OF CONTEXT

#1 Context will become a major driving force in the personalization of

web experiences

#2 Contextual awareness will evolve past form

factor and include additional external data

sources

CURRENT WEBSITE PROCESS

PLANNING

THE PROCESS Three major “phases

DESIGN PRODUCTION

PLANNING

THE PROCESS We’ll focus on one

DESIGN PRODUCTION

PLANNING

THE PROCESS We’ll focus on one

DeliverablesDigital strategy Creative brief Analytics brief

STRATEGY DELIVERABLES

65

DeliverablesDigital strategy Creative brief Analytics brief

STRATEGY DELIVERABLES

66

DeliverablesDigital strategy Creative brief Analytics brief Website

YouTube

Search

Facebook

Email

Mobile site

Text/SMS

STRATEGY DELIVERABLES

67

DeliverablesDigital strategy Creative brief Analytics brief Holistic

Digital Strategy

Website

App

Social engagement

Branded content

Search

Online ads

Email

Text/SMS

Influencer outreach

In store

STRATEGY DELIVERABLES

68

DeliverablesDigital strategy Creative brief Analytics brief Holistic

Digital Strategy

Website

App

Social engagement

Branded content

Search

Online ads

Email

Text/SMS

Influencer outreach

In store

STRATEGY DELIVERABLES

69

DeliverablesDigital strategy (website components)

Digital ethnographic researchSecondary research reviewBest-in-class and competitive analysisWebsite’s role(s) for the brandCreative brief Strategic recommendationsProduct roadmap

Website

LIFE AND THYME lifeandthyme.com •  Multiple focused narratives displayed visually •  Responsive approach highly tuned and considered during photo shoots •  Minimal interface amplifies priority of content experience

© CFA Properties, Inc. 35

WHO WE’RE TALKING TO

GRILLEDLOVE.COM CREATIVE BRIEFING

February 12, 2014

STRATEGY DELIVERABLES

70

DeliverablesCreative brief

Objectives and strategyTarget profile (*personas) Targeted behaviorsCreative considerationsKPIs and measurementInspirational influences

CHICK-FIL-A GrilledLove.com Creative and Digital Brief

3

! Direct sharing from the page o Brand social content

! Facebook, Twitter, and Instagram content around #GrilledLove o Cow social content

! Facebook, Twitter, and Instagram content o Inputs from social media campaign

! Details are TBD (Engauge)

• Cow content o Custom renegade content

Creative considerations 1. Consider parallax, mosaic, and flat design techniques for a seamless experience 2. Adhere to brand standards, but explore visual design beyond print, POP, etc. 3. Provide a unified experience regardless of device 4. Adhere to Twitter’s display requirements: https://dev.twitter.com/terms/display-

requirements 5. Mix brand and social content together 6. Consider two distinct types of visitors – those who have tried and have not 7. Cows need to have an active role (i.e., be able to take over content, hashtags, etc.) 8. Online media calls to action

a. Guidelines: i. Must be specific to primary actions

ii. Need to set expectations for the experience on the landing page iii. Focus on driving primary landing page action

b. Suggestions include: “Experience the flavor” and “See the story” 9. Landing page calls to action

a. Guidelines: i. Must be specific to primary and secondary actions

ii. Focus on driving primary and secondary actions on the landing page iii. Communicate what users should expect once they take action

b. Examples include: “Pledge to try it with a tweet,” “Use #GrilledLove to join the conversation,” “Find your nearest store,” and “Follow us on social.”

CHICK-FIL-A GrilledLove.com Creative and Digital Brief

2

Primary actions (in order of priority) 1. Learn about the flavor of the new Grilled Chicken products

a. View content that supports Chick-fil-A’s claims (See: Brand Food Content)

2. Engage with social content directly from the page (See: Social Content) 3. Use the #GrilledLove hashtag

a. “I’ve tried it” b. “I’m going to try it” c. “You should try it” d. “I love grilled ____” e. “I love grilling because ____”

Secondary actions 1. Click the button/link to store locator (non-frequent customers) 2. Follow/Like Us: Chick-fil-A, Inc. and the Eat Mor Chikin Cows on Facebook,

Twitter, and Instagram

Content types • Brand food content

o Exploratory menu content ! High impact, interactive visuals ! Nutritional information

o Ingredients, sourcing, preparation, and cooking visualizations o Infotainment style videos

! How it was made (Perfecting the recipe, building a custom grill, etc.) ! Stunt (Details are TBD)

o Phased content: Grilled chicken sandwich, grilled salads and wraps, and grilled nuggets, respectively

o Adhere to Grilled Chicken Conversation Map (See conversation map): ! Our new grilled chicken brings you craveable, backyard flavor

• Unmatched backyard, grilled taste • One of fast food’s most nutritious options • New grilled chicken enhances all grilled entrees • We invented our own grill

• Social content

o User-generated content ! Text, photo, and video content around #GrilledLove

• Twitter • Instagram

CHICK-FIL-A GrilledLove.com Creative and Digital Brief

1

Why are we developing a landing page? To raise awareness and increase trial of the new Grilled Chicken products. Who are we talking to on the landing page? Choosy people who are in a hurry and have taken the time to visit the landing page from our banner ads, their social feeds, or shared links. They can easily return to what they were doing before, if the experience isn’t more interesting than their usual social, video, and news content. Some have tried the old Chargrilled Chicken Sandwich and found it bland. What do they currently think? “Okay Chick-fil-A, I try to be good about what I eat, so I’m interested. I know that the other food you have is consistently tasty and better for me than a burger or anything else that’s fried, so unless you convince me otherwise, I’ll stick with that. I also like Chipotle, or Subway when I’m in a hurry.” What do we want them to think? “I’ve been looking for another healthy fast-food option, and this one looks promising. With the backyard grilled flavor Chick-fil-A is promising with their new Grilled Chicken, I think I’ll give it a try.” Single most persuasive idea Try it, and you’ll fall in love. Why should they believe it? Chick-fil-A’s new Grilled Chicken is a lighter version of the delicious chicken you’ve already come to love. The chicken is cooked on a new proprietary grill platform that gives it the slightly smoky flavor as if cooked on a backyard grill. Judging from the user endorsements on the site, the people who have tried it like it. What do we want them to do? We want them to go to Chick-fil-A and try the new Grilled Chicken products, as well as think of Chick-fil-A more often when they are seeking a healthier fast-food option.

• A landing page will tell the story of the new products • Near real-time social content will validate the story we’re telling • The Cows will bring an element of surprise and fun

Landing Page The landing page should communicate all aspects of the New Grilled Chicken products, including the backyard flavor, the preparation process, and social proof.

STRATEGY DELIVERABLES

71

DeliverablesAnalytics brief

Measurement platformsGoals overviewExpected actionsKey results to analyzeFuture takeaways to report

2

KEY RESULTS TO DOCUMENT AND ANALYZE

• InsightExpress: toy awareness/purchase intent and brand/campaign awareness • Sizmek:

o Display: cost per click (CPC) or cost per thousand (CPM) driving traffic to the website hub

o Retailer.com: cost per click (CPC) driving traffic to retailer.com o Video / native: cost per click (CPC) or cost per thousand (CPM) driving video

starts and traffic to the website hub • Google Analytics: Visits, average time spent, BLI starts, BLI completions, result

shares, coupon clicks, and video views o Using Sizmek tokens, we will track these metrics by:

! Campaign Identifier I: ! Site Identifier ! Ad Identifier (creative) ! Placement Classification (description of ad type)

• Facebook Insights: Impressions, Engagement with posts (shares, comments, likes, video views), and growth in followers.

• Sysomos: Volume of mentions, reach, impressions, engagement and sentiment FUTURE TAKEAWAYS, OPTIMIZATIONS, AND RECOMMENDATIONS TO INCLUDE IN FINAL REPORT

• Media: Site, placement, creative message, creative rotation • Website Hub: Content, engagement, entry points, mobile, social • BlogHer Event: Content, engagement • Influencer program: Content, engagement • Social: Content, engagement • Overall: Annotations between all to tell the full customer journey/brand experience

1

ANALYTICS BRIEF CLIENT/CAMPAIGN: KIDS II BABY LAUGH INDEX CAMPAIGN CAMPAIGN DATES: JULY 2014 - DECEMBER 2014 TRACKING TOOLS BEING USED

• Sizmek, InsightExpress, Google Analytics, Facebook Insights, Sysomos WILL ART (TRACKING TOOL) BE USED FOR THIS CAMPAIGN?

• Yes OVERALL GOALS:

• Display: Create toy awareness/purchase intent, brand/campaign awareness, and drive traffic to the Baby Laugh Index website hub.

• Video / Native: Drive video starts and traffic to the Baby Laugh Index website hub • Retailer.com: drive traffic to Bright Starts toy content on retailer.com • Website Hub: Generate engagement with the Baby Laugh Index and the

Monkey/Lion/Jungle toys • BlogHer Event: Increase reach, generate website engagement and collect assets for

later use in media/social. • Influencer program: Generate conversation about the toys and Baby Laugh Index. • Paid Social: Generate engagement, conversation, and excitement around the

campaign, as well as drive traffic to the Baby Laugh Index website hub

EXPECTED ACTIONS TO MEASURE GOALS: • Display: clicks from banners to the website hub • Video / native units: video starts, clicks to website hub • Retailer.com: clicks from banners to Bright Starts toy content on retailer.com • Website Hub:

o Primary: Visits and page engagement, including: BLI “quiz” starts and BLI “quiz” completions.

o Secondary: Quiz result shares, coupon clicks, toy section pageviews, and video views (homepage and laugh therapy)

• BlogHer Event: Blogger conversation, social impressions from bloggers, and organic social posts from the event

• Influencer program: o Pinterest: repins, traffic to website hub or retailer.com (TBD based on

retailer.com partner) o Blogs: visits, traffic to or retailer.com (TBD based on retailer.com partner)

• Paid Social: o Facebook: page likes, post likes, comments, shares, and video views

those are our core activities

but the process is much bigger than just us

Approve strategy Approve requirements Approve architecture Approve design Approve test plan Approve site

Project kickoff Strategy review Requirements review Internal creative reviewWireframe review Site review

PostmortemMonitor budget, timeline, and deliverablesDefine budget, timeline, and deliverables

Client

Brand!manager

Project !manager

Business!analyst

UX !architectCreative !

team

Production !team

QC !analyst

Strategist Research and stakeholder interviews Write creative brief Review creative

Monitor and document functional changesGather requirementsDefine use cases

Competitive research Create site map Create wireframes

Strategy review Creative concepting Design/art directionCopywriting

Define technical requirement Prototyping Development CMS training

TestingWrite test plan

Studio !design

Bug fixes

Digital preproduction

Reconciliation

PLANNING DESIGN PRODUCTION

Site analysis includes the gathering of functional requirements for the site structure, along with a technical discovery process.

Based on site usability, The Richards Group develops a site map and wireframes to determine the overall architecture of the site. This is also where content generation takes place.

During the creative design phase, The Richards Group produces concepts based on the approved information architecture.

Once site creative !has been approved, The Richards Group begins template development !of all front-end components as well as CMS development.

The Richards Group performs quality control testing. Testing will include components such as user interface, site functionality, and browser compatibility.

After site launch, !The Richards Group monitors server traffic to ensure stability. Client CMS training also takes place at this point.

Our strategists create a holistic digital strategy that results in actionable steps and recommendations for you to achieve a digital vision.

MaintenanceTestingDevelopmentCreativeArchitectureAnalysis Strategy

Deliverables: •  Strategic deck•  Competitive analysis•  Creative brief•  SEO strategy

Deliverables:•  Functional specs•  Use cases•  Statement of work•  Budget•  Project timeline

Deliverables:•  Site map•  Wireframes•  Technical specs•  SEO keywords

Deliverables:•  Concept layouts•  Copy deck•  Template layouts

Deliverables:•  Interactive site reviews•  QC test plan

Deliverables:•  Test plan results•  Live site

Deliverables:•  CMS instructions•  Site updates

Average!timing 4-6 weeks 3-5 weeks 4-6 weeks 4-6 weeks 6-8 weeks 2-3 weeks Ongoing

 Strategy  

>4  weeks  

 Analysis  

3-­‐5  weeks  

 Architecture  

4-­‐6  weeks  

Crea:ve  

4-­‐6  weeks  

Development  

6-­‐8  weeks  

Tes:ng  

2-­‐3  weeks  

Maintenance  

Ongoing  

PLANNING   DESIGN   PRODUCTION  

 Strategy  

>4  weeks  

 Analysis  

3-­‐5  weeks  

 Architecture  

4-­‐6  weeks  

Crea:ve  

4-­‐6  weeks  

Development  

6-­‐8  weeks  

Tes:ng  

2-­‐3  weeks  

Maintenance  

Ongoing  

PLANNING   DESIGN   PRODUCTION  

Collaboration with strategy

 Strategy  

>4  weeks  

 Analysis  

3-­‐5  weeks  

 Architecture  

4-­‐6  weeks  

Crea:ve  

4-­‐6  weeks  

Development  

6-­‐8  weeks  

Tes:ng  

2-­‐3  weeks  

Maintenance  

Ongoing  

PLANNING   DESIGN   PRODUCTION  

Development  

6-­‐8  weeks  

very digital savvy

Development  

6-­‐8  weeks  

but separate…

Development  

6-­‐8  weeks  

 Strategy  

>4  weeks  

 Analysis  

3-­‐5  weeks  

 Architecture  

4-­‐6  weeks  

Crea:ve  

4-­‐6  weeks  

Digital knowledge gap

CONCEPTING  &  PROTOTYPES  

PROCESS HAS SHIFTED

 Crea:ve  

3-­‐5  weeks  

 Development  

4-­‐6  weeks  

Architecture  

4-­‐6  weeks  

 Strategy  &  Analysis  

>4  weeks  

CONCEPTING  &  PROTOTYPES   PRODUCTION  

PROCESS HAS SHIFTED

 Strategy  &  Analysis    Crea:ve  

3-­‐5  weeks  

 Development  

4-­‐6  weeks  

Architecture  

4-­‐6  weeks  

Development  

6-­‐8  weeks  

Tes:ng  

2-­‐3  weeks  

Maintenance  

Ongoing  >4  weeks  

CONCEPTING  &  PROTOTYPES   PRODUCTION  

PROCESS HAS SHIFTED

 Strategy  &  Analysis    Crea:ve  

3-­‐5  weeks  

 Development  

4-­‐6  weeks  

Architecture  

4-­‐6  weeks  

Development  

6-­‐8  weeks  

Tes:ng  

2-­‐3  weeks  

Maintenance  

Ongoing  >4  weeks  

CONCEPTING  &  PROTOTYPES   PRODUCTION  

RESULTS

 Strategy  &  Analysis    Crea:ve  

3-­‐5  weeks  

 Development  

4-­‐6  weeks  

Architecture  

4-­‐6  weeks  

Development  

6-­‐8  weeks  

Tes:ng  

2-­‐3  weeks  

Maintenance  

Ongoing  >4  weeks  

keep adapting

?s