thinkla adu: digital production 101
TRANSCRIPT
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 [email protected] www.daileyideas.com 310.360.3622