This is a presentation I gave to the digital strategy team at The Richards Group during our annual training seminar. Overall, the presentation focuses on emerging trends in web design and how best-in-class brands are responding to those trends. The goal was to inform and inspire the strategy team around what is possible in modern web design today, as well as educate the newer team members on the agency's process for designing websites, microsites and landing pages.

1. modern web experience
What is it?

2. modern web experience
1. A web property that taps into consumer trends to transcend
current user experience standards.
1

3. HOW FAR THE WEB HAS COME

4. 1998
4

5. 2014
5

6. 1997

7. 2014

8. HOW CONSUMERS ARE CHANGING THE WEB

9. RELEVANCY
EVOLVED

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

11. SIGNAL
OVERLOAD

12. Due to content overload, consumers crave
stimulation through simplicity
Snackable content
Scannable websites
Minimalistic design
Mission focus
SIGNAL
OVERLOAD

13. HIGHER
EXPECTATIONS

14. Due to new platforms and technology,
consumers are trained to expect an ever-
improving choice of rich content and tools
Faster websites = higher quality content
Expectations apply to all website
HIGHER
EXPECTATIONS

15. HOW THE WEB IS REACTING

16. #2
#3
#4
#5
#1

17. #2
#3
#4
#5
IMMERSIVE CONTENT

18. IMMERSIVE CONTENT
Fluid and heroic visuals envelop user experiences

19. SMARTWATER
19

20. IMMERSIVE CONTENT
Fluid and heroic visuals envelop user experiences
Immersive video draws the user’s attention

21. POWERHOUSE
COMPANY
21

22. #2
#3
#4
#5
IMMERSIVE CONTENT

23. #3
#4
#5
IMMERSIVE CONTENT
FOCUSED NARRATIVES

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

25. WOO
AUDIO
25

26. FOCUSED NARRATIVES
Focuses the users on a tight, semi-linear narrative path
Utilizes navigation creatively to inspire story engagement

27. DREXEL
UNIVERSITY
27

28. FOCUSED NARRATIVES
Focuses the users on a tight, semi-linear narrative
Utilizes navigation creatively to inspire story engagement
The narrative flows naturally into an end goal

29. BEOPLAY
29

30. #3
#4
#5
IMMERSIVE CONTENT
FOCUSED NARRATIVES

31. #4
#5
IMMERSIVE CONTENT
FOCUSED NARRATIVES
MINIMALISM

32. MINIMALISM
Snackable content paces user attention

33. DISNEY
33

34. MINIMALISM
Snackable content paces user attention
Content is the centerpiece and interface

35. PABLO &
RUSTY’S
35

36. MINIMALISM
Snackable content paces user attention
Content is the centerpiece and interface
Structure elevates focus on the content

37. FABRIK
37

38. MINIMALISM
Snackable content paces user attention
Content is the centerpiece and interface
Structure elevates focus on the content
Features and content focus only on the meaningful

39. PAYPAL
39

40. #4
#5
IMMERSIVE CONTENT
FOCUSED NARRATIVES
MINIMALISM

41. #5
IMMERSIVE CONTENT
FOCUSED NARRATIVES
MINIMALISM
ACTIVE STATES

42. ACTIVE STATES
Light movements = non-verbal CTAs

43. CREATE
PILATES
43

44. ACTIVE STATES
Light movements = non-verbal CTAs
Motion accentuates key action points on a page

45. ATHENOS
45

46. ACTIVE STATES
Light movements = non-verbal CTAs
Motion accentuates key action points on a page
Tech bridges gap between web and real world

47. SURROGAID
47

48. ACTIVE STATES
Light movements = non-verbal CTAs
Motion accentuates key action points on a page
Tech bridges gap between web and real world
Delights encourage users to be playful with content

49. COKE
49

50. #5
IMMERSIVE CONTENT
FOCUSED NARRATIVES
MINIMALISM
ACTIVE STATES

51. IMMERSIVE CONTENT
FOCUSED NARRATIVES
MINIMALISM
ACTIVE STATES
CONTEXT AWARE

52. CONTEXT
Responsive web design was the first step

53. CATSCARF
53

54. CONTEXT
Responsive web design was the first step
Consumers crave personal, data-driven stories

55. APRILZERO
.COM
55

56. CONTEXT
Responsive web design was the first step
Consumers crave personal, data-driven stories
Social places products in real world context

57. MY
BEAUTY
TEA
57

58. CONTEXT
Responsive web design was the first step
Consumers crave personal, data-driven stories
Social places products in real world context
Experiences will become tailored to external contexts

59. DOGE
WEATHER

60. 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

61. CURRENT WEBSITE PROCESS

62. PLANNING
THE PROCESS
Three major “phases
DESIGN PRODUCTION

63. PLANNING
THE PROCESS
We’ll focus on one
DESIGN PRODUCTION

64. PLANNING
THE PROCESS
We’ll focus on one
Deliverables
Digital strategy
Creative brief
Analytics brief

65. STRATEGY DELIVERABLES
65
Deliverables
Digital strategy
Creative brief
Analytics brief

66. STRATEGY DELIVERABLES
66
Deliverables
Digital strategy
Creative brief
Analytics brief Website
YouTube
Search
Facebook
Email
Mobile
site
Text/
SMS

67. STRATEGY DELIVERABLES
67
Deliverables
Digital strategy
Creative brief
Analytics brief Holistic
Digital
Strategy
Website
App
Social
engagement
Branded
content
Search
Online ads
Email
Text/SMS
Influencer
outreach
In store

68. STRATEGY DELIVERABLES
68
Deliverables
Digital strategy
Creative brief
Analytics brief Holistic
Digital
Strategy
Website
App
Social
engagement
Branded
content
Search
Online ads
Email
Text/SMS
Influencer
outreach
In store

69. STRATEGY DELIVERABLES
69
Deliverables
Digital strategy (website components)
Digital ethnographic research
Secondary research review
Best-in-class and competitive analysis
Website’s role(s) for the brand
Creative brief
Strategic recommendations
Product roadmap
Website

70. 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
Deliverables
Creative brief
Objectives and strategy
Target profile (*personas)
Targeted behaviors
Creative considerations
KPIs and measurement
Inspirational 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.

71. STRATEGY DELIVERABLES
71
Deliverables
Analytics brief
Measurement platforms
Goals overview
Expected actions
Key results to analyze
Future 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

72. those are our core activities

73. but the process is much
bigger than just us

74. 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 !
architect
Creative !
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.
MaintenanceTestingDevelopmentCreativeArchitectureAnalysisStrategy
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

75. 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

76. 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

77. 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

78. Development
6-­‐8
weeks
very digital
savvy

79. Development
6-­‐8
weeks
but separate…

80. Development
6-­‐8
weeks
Strategy
>4
weeks
Analysis
3-­‐5
weeks
Architecture
4-­‐6
weeks
Crea:ve
4-­‐6
weeks
Digital knowledge gap

81. CONCEPTING
&
PROTOTYPES
PROCESS HAS SHIFTED
Crea:ve
3-­‐5
weeks
Development
4-­‐6
weeks
Architecture
4-­‐6
weeks
Strategy
&
Analysis
>4
weeks

82. 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

83. 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

84. 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

85. keep adapting

86. ?s