thinkla adu: digital production 101

Digital Production 101

Agenda

• Introductions

• Credentials

• The Current Market

• Billing, Estimating, and Profitability

• The Digital Production Process

• Questions and Answers

Credentials

Dailey is a full-service agency working in partnership with key technology partners and sister IPG companies. Together, we have with the capabilities to deliver strategic digital experiences to help enhance the brand’s visibility and consumer interest.

Process Is Paramount

Client  signs  SOW. Kickoff  with  all  teams

Client  chooses  /  approves  concept

Digital  Producer  creates  timeline  with  all  

milestones.  SOW  created.

Production  and  development  begin

Delivery  to  media  partner Deployment  and  QA

Client  provides  brief

Concepting  and  internal  approvals

Basic Banner Process

QA  and  testing

INITIATIONClient Brief

Assignment BriefCollect Reqs/SpecsCollect Strategic POVDraft BriefTeam Assignments

Internal NotificationNotify Dept. Directors

Job Opened

General Banner Process: Define and Design

CREATIVE  DEVELOPMENT

Creative BriefingBrief Creative TeamProduction to determineif IA/Tech are required

Media PlanSite ListInitial Specs and LCD Specs

Concept ApprovedInternal Reviews  

Concept DevelopmentConceptsBallpark Cost/TimeRisk Assessment:Technical Approach

ESTIMATION Debrief Rollout Plan: Deliverables ListProduction ScheduleResearch Partners

Pre-Bid (if external)Source VendorsComplete Pre-Bid DocsPre-Bid Call

Cost Approved Agency and Client signed

Estimate/SOWGather formal costsTriple Bid Process (if needed)Image Licensing

Cost review Award

Issue POInternal or Vendor Kickoff

Functional Specs Feature Set:User FlowWireframes

Technical Requirements Technical Specs

Technical Approved Client Approval

Visual Design & Content Design StyleLayoutsContent Deck

Prototyping Prototyping

Visual Design and Copy Approved Client Approval

StartProduction

Internal  Review  and  Client/Legal  Review

UX DiscoveryStakeholder InterviewsRequirementsUsability StudyPersona DevelopmentUser Journey

UX  

VISUAL  DESIGN

Collaboration

PAID  MEDIA

PRE-­‐PRODUCTION

PRODUCTION

Layout Development

ApprovalLayouts  

Develop One Size

One 300x250 comp version of each concept

One Size ReviewAccount, Creative and Client

Determine Tracking Requirements

Files to Rich Media Feature Set:User FlowWireframes

Approval  

Client Approval

Internal QA

Check Click Tags, Files names, versions, regression testing

CampaignLive

Digital Process: Banner Production

QA,  DEPLOY  AND  LEARN

Develop All Sizes

All concepts in all sizes produced

Approval   Creative, Account and Client

All Sizes ReviewAccount, Creative and Client

Rich Media ReviewAccount, Creative and Client

Approval  

Client Approval

Post MortemSite screenshots, performance report, process review

Asset Collection and Production

TraffickingDart/DFA

5 Steps to Success for Digital Production

1. Let each expert take care of their area of expertise.

5 Steps to Success for Digital Production

2. Working with your digital producer is your best route to success.

5 Steps to Success for Digital Production

3. Schedules and milestones are put in place to ensure the success of a project. Any delays will quickly put success at risk.

4.  In  order  to  make  project  tracking  and  research  easier   for  everyone,  it  is  imperative  that  we  all  follow  the  same  rules  of  organization.

5 Steps to Success for Digital Production

5.  We  deliver  brilliant  creative  work  for  our  clients  by  following  processand  communicating  with  each  other.  

5 Steps to Success for Digital Production

Digital Producers: Your Best Resource

Attributes:

• Well-versed in digital production process and methodologies

• Follow the latest tech news and upcoming technologies and trends

• Understand how and why consumers use technology

• Are consummate diplomats with clients and team members alike

• Are the only team members who are involved in the process from start to finish

Digital Producers: Your Best Resource

The Current Market

The Connected Audience

Customers can be elusive, using multiple devices.More devices means greater overall activity.The lines between work and personal are blurred.People cross devices for one goal.People use multiple screens at once. Be where they expect you to be and be relevant in that particular context.

The Connected Audience

Twitter Mission Statement:“To instantly connect people everywhere to what’s most important to them.”

The Connected Audience

Focusing on Customer Experiences in the Post-PC Era

Invest heavily in mobile user experience and design

Beef up contextual analysis and understandingDevelop a unified customer experience strategyLearn from market leaders

Capitalize on the uniqueness of each screen. A consumer’s intent can be different across them all.

Points to Remember

• Customer experience has to take precedence.

• The consumer decision journey has changed radically and is more social than ever.

• This is the Post-PC Era. Technology and the connected consumer continue to change the face of marketing and brands themselves.

• The brand response to customer interaction must befast, personal, and relevant.

New Perspective on Customer Experience

• Uncover customers’ real goals and needs

• Create seamless transitions across platforms

• Measure journeys and progress

• Think context -- always

• Test and refine as a regular habit

Billing and Profitability

“Can you give me a ballpark cost for a new client website?”

“We’ll have Creative do some comps before we start the estimate.”

“It’s OK. I told the client we could do it in a month and match their budget.”

What’s Wrong?

“Can you give me a ballpark cost for a new client website?”

“We’ll have Creative do some comps before we start the estimate.”

“It’s OK. I told the client we could do it in a month and match their budget.”

• If it even smells like digital, call your digital producer.

• Invite them to every meeting. Every. Single. Meeting.

• No one should agree to a digital production project unless a producer has been consulted and allowed ample time to provide feedback.

• Listen to their feedback and follow it to the letter.

The Rules: Set Them in Stone

Cost Scope

Time

The Digital Production Triangle

• It guarantees that you will cover all staff participating in the project.

• It holds you to what will be promised in the SOW.

• The client will not develop any unrealistic cost expectations, which they will if you give them “a general ballpark”.

• You will be better able to gauge department profitability across accounts.

• Your agency projections will be more accurate and better able to help you gauge where you can bring additional key staff in house.

Accurate Estimating Pays Off

Key Points:

• Include every role that you feel will participate.

• Be fair, but be realistic: do not cut corners to match a client’s budget. You will always lose money on that bargain.

• Understand that a client may not understand why a particular phase or task is important; it is our job to explain it to them.

• You are doing your agency and the brand a disservice by not estimating properly.

Estimating and Profit

Key Elements:

• Describe exactly what you will deliver, when it will be delivered, and how much it will cost

• Provide carefully detailed descriptions of what is promised; this covers you and the client

• Include Terms and Conditions: payment details, arbitration parameters, and key legal statements that protect your agency and the client’s interests

• T&C should include section about scope creep with client’s initials required

SOW: Statement of Work

Digital Production Process

• JIRA!

• Confluence

• Trello

Tool Time

• Box, Dropbox, Drive, SharePoint

• Hangouts, Skype, Slack

Test, decide, implement and use before starting projects.

Define and Discover

We don’t know what we don’t know.

Objectives:

Define the role of the website for consumers

Create the project plan to build the experience

Phase 1: Define and Discover

Create a .com experience that…

• Complements the current marketing initiatives

• Delivers an elegant and simple user experience for the target audience

• Works seamlessly across desktop and mobile

• Is easy to update

• Drives sales with every retail partner

WEBSITE OBJECTIVES

Create an experience that…

• Thumb-friendly

• Adapts to various screen resolutions

• Works seamlessly across devices

• Reflects the most important information for mobile users

• Integrates with current branding initiatives

MOBILE OBJECTIVES

Outputs:

• Discovery Report: • Stakeholder findings • Competitor findings • Research findings • Personas and scenarios • Initial recommendation for features and functionality of the new site experience

Phase 1: Define and Discover

• Comprehensive Project Plan: • Business Requirements Doc (BRD) • Functional Requirements Doc • Technical requirements • Timeline for all deliverables • Editorial plan

• SOW and Budget for Phases 2, 3, 4

Objectives:

• Gain agreement with stakeholders

• Provide a foundation to communicate to a technology partner what the solution needs to do to satisfy the users’ and business’ needs

• Provide input for the next phase

• Describe how these needs will be met by the solution

BRD: Business Requirements Document

Objectives:

• Describe how the system or solution will work

• Focuses on how users will interact with the system or solution

• Purpose: How each team knows what needs to be built and tested

• Process: How it will be developed, who will do it, and when

• Methods: Technical diagrams, flowcharts, functionality descriptions

Func Reqs: Functional Requirements

Design Phase

• “Design is the conscious and intuitive effort to impose meaningful order.” — Victor Papanek, Design for the Real World

• Design is about planning what to build before you build it (especially when it’s expensive or dangerous to get it wrong).

• Design allows room for exploration.

• Design requires collaboration with the builders.

Thoughts on Design

Phase 2: UX and Design

Objective:

Create the user experience and the design of the site

Phase 2: UX and Design

Pro Tip:

Do not start by making pretty pictures that make the client smile.

Activities:

• Persona development and customer journey(s) development

• Wireframe development

• Visual design and copy development based on the approved wireframes

Phase 2: UX and Design

Outputs:

• User personas

• Site map

• Annotated wireframes

• Design Elements • Mood boards • Design for key pages and elements • Style Guide

• Copy deck for all pages of the site

Phase 2: UX and Design

Do it right the first time, or pay the consequences

Return On Investment

Emotional Engagement

People will look to comfort, variety, connection, and uniqueness as the hallmarks of a good experience.

IA/UX: It starts with the user. Dedication to detail begins with clearly defining the business requirements for the project, doing consumer research, and developing a clear framework for the interface before creating visual experience that will assist, guide and benefit the user.

WHAT IS UX?

WHAT IS USER EXPERIENCE?

DONALD NORMAN

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

WE ALL INSTINCTIVELY KNOW WHAT

GOOD UX LOOKS LIKE…

WE ALL INSTINCTIVELY KNOW WHAT

BAD UX LOOKS LIKE…

UX IS MORE THAN UI

UX IS MORE THAN USABILITY

DESIGN THINKING

Development Phase

Objective:

Bring the creative design direction together with the technology platform, code the site and ensure content management and publishing

processes are aligned

Phase 3: Develop

DEVELOP

Build the project Check quality & accuracy

Test on dev servers Test again and verify

Phase 3: Develop

Phase 3: Develop

Activities:

• Content creation and development

• Technical coding and development

• Technical platform testing

• Content integration

Outputs:

• Development of all content for new site

• Technical coding and content management system integration

• E-Commerce integration

• Bug list and resolutions

• Technical annotations for CMS/code

• Technical and functional user acceptance testing (UAT)

Phase 3: Develop

A member of your dev team should be included throughout the entire project process from pitch to deployment.

This helps prevent over-promising and aids in planning the level of effort.

Pro Tip

Front-End Development

Back-End Development

Analytics

Pro Tip:

When possible have some

expertise in-house so you can tackle issues when they

arise.

• Ramp up • Develop features • Test along the way • Apply Visuals • Add SEO & Analytics • Test Again • Send to QA

Typical Process

Deployment Phase

DEPLOY

Send it live to the world Continue to QA

Fix bugs that occur Plan for maintenance

Phase 4: Deploy

Activities:

• Knowledge transfer

• Production readiness and migration

• Supporting documentation

• Post mortem

• Next steps

Phase 4: Deploy

Outputs:

• Site launch and production support including and production bug resolution

• Content management system documentation

• Editorial/content planning documentation

• Project review, pros and cons through post-mortem

Phase 4: Deploy

Final Thoughts

Users want a seamless, personalized experience across platforms and environments.

Final Thoughts

Consumer empathy will help ensure that each digital experience remains relevant to their needs.

Final Thoughts

Following process and best practices leads toclient satisfaction and agency profitability.

Don Lupodlupo@daileyideas.com www.daileyideas.com 310.360.3622