MasterCard  - Online ad builds and website development
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


MasterCard - Online ad builds and website development

Uploaded on

A presentation outlining the online ad build process and the MasterCard website development process....

A presentation outlining the online ad build process and the MasterCard website development process.
Presented by Micah Howard of MercerBell 26-08-09

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 4 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. The Brief
      • “ Tell us a bit about how a banner is built and how you put a website together”
  • 2. MasterCard Digital Training “ Online Ads - 101”
  • 3. Agenda
    • Sit on my space
    • How long’s a piece of string?
    • Playing Big Brother
  • 4. Sit on my space The more common formats for online ads
  • 5. Standard Banner ads
  • 6. What are they?
    • “ Display ads”, “banner ads” or “creative placements” found on the majority of web pages linking users to other websites.
    • Usually made in Flash (SWF files)
    • Usually limited to between 30Kb and 40Kb file size
    • There are many sizes but some standards:
    • 728 x 90 pixels (leaderboard)
    • 468 x 60 pixels (banner)
    • 234 x 60 pixels (half banner)
    • 300 x 250 pixels (tile / island / medium rectangle)
    • 120 x 600 pixels (skyscraper)
    • 160 x 600 pixels (wide skyscraper / vertical tower)
  • 7.  
  • 8.  
  • 9. What can they do?
    • Banners can be animated and animations can loop
    • Banners can be interactive (roll-over or click interactions)
    • Banners can read external XML files (e.g. News headlines, product prices etc.)
    • Banners can drive response but are generally more passive
    • The average click through rate for the financial sector is 0.04%*
    • Standard banners are therefore often sold on a cost per click (CPC) or cost per acquisition (CPA) basis
    • *Source – EyeBlaster 2008 report
  • 10. So why buy standard banners?
    • Relatively inexpensive, leaving more budget for media buys
    • Can be sold based on performance, helping to manage media costs
    • Relatively quick to design and build (especially if a concept already exists)
    • Wide range of formats available across websites
    • Can be made to read external information sources so can be easily updated
  • 11. Rich media ads
  • 12. How are they different to standard ads?
    • Larger file size allowance
    • Wider range of interactions available
    • Support more than just flash formats
    • A lot more “engaging” from a user perspective, helping to drive response
  • 13. What do they look like?
    • Some of the more popular formats include:
      • Expandable ads
      • Overlay / Over The Page (OTP) / Floating ads
      • Synchronized ad units
      • Video or Streaming video ads
      • Data capture ads
      • Homepage take over or Site take over
  • 14. Expandable ad Other Examples 1. 2. 3. 4.
  • 15. Over The Page ad (OTP or Overlay) 5. 2. 3. 4. 6. 1. Medium rectangle ad appears on page On roll-over things start to happen across a fixed area of the page More stuff happens on the page, or within the medium rectangle ad space, resulting in a call to action
  • 16. Synchronized ads (Sync ads or “Talking” ads) 1. 2. 3. 4. 5. Other great example:
  • 17. Video ads
  • 18.  
  • 19. Video Egg
  • 20. Increasingly popular formats
  • 21. Rich media examples – Data capture This ad was run as an OTP. The user entered their friends’ details and that person was “called” with a message. Data captured was then added to a database for further promotions
  • 22. Widgets Video, additional navigation and social bookmarking all included in one ad
  • 23. Homepage skin
  • 24. Homepage takeover
  • 25. What else can they do? Online chat HD video Interactive games Data-driven functions (e.g. postcode locator) File upload/download
  • 26. So why buy Rich media ads?
    • More engaging, so excellent for driving direct response – CTR of 0.09% for financial sector (versus 0.02% for standard ads)*
    • Wider range of file formats and technologies can be supported (e.g. video, gaming and data capture)
    • Rich media ads are starting to replace the traditional microsite
    • *Source – EyeBlaster 2008 report
    Expandable ad 0.18% Overlay/OTP/Floating ad 2.06% Video ad 0.20% Standard banner 0.06%
  • 27. So to summarise…
    • There are several formats of standard and rich-media ad type available with more being developed every day
    • Rich media ads will cost more to develop however, campaign managers (such as Eyeblaster and DoubleClick) are continually developing tools to help reduce development costs
    • Rich media ads offer considerably more interactivity opportunities that standard ads and will return higher response rates
    • Due to their comparatively low response rates, standard ads can be purchased on a cost per response basis
  • 28. How long’s a piece of string? How the media schedule & ad specs affect the design and build process
  • 29. The build process
  • 30. Concept creation
    • The media schedule (or at least an idea of the proposed schedule) will directly impact on the concept creation process
    • Selecting a rich media campaign will offer the potential to develop a wider range of concepts
    • Publisher file-size allowance will determine concept direction and asset selection
    • Available ad formats (within a schedule) can also drive concept development…
    The affect of the media schedule on….
  • 31.
  • 32. So…. Where possible, ensure the creative team is involved in the media planning process – a strong creative concept can often help shape the media schedule.
  • 33. Costing and timeline development
    • Multiple formats and file sizes take longer to produce
    • Individual publisher requirements (odd sizes for example) can also heavily impact on timeline, effort and cost
    • Rich media ads can take longer to develop than standard ads
    • Skill-set requirements can be different between rich media and standard ad build jobs
    • Additional producer time may be required to upload rich-media creative to ad servers
    • Additional click-tagging requirements for rich media ads can take longer to implement
    • Media agency’s lead time can be up to 10 days prior to live date
    The affect of the media schedule on….
  • 34. So…. When allocating budgets, be aware that rich media campaigns will cost more and take longer to produce. They will drive a better response though!
  • 35. Building the ads
    • Publisher permitted maximum file size will determine how the creative eventually looks
      • Use of vector images versus photo images
      • Ability to re-use assets within a banner
      • Complexity of patterns and assets
      • Nature of animations or interactions
      • For example…
    The affect of the media schedule on….
  • 36. Supplied artwork Finished ad with a 25Kb file-size allowance
  • 37. Building the ads
    • Different publishers will have different maximum flash version requirements
    • Different publishers will have their own requirements regards looping, interactions and user-initiated events
    • Publishers may also have rules for back-up GIFs* (e.g. file size limit, static only, no animation)
    • * What’s a “back-up GIF”?...
    The affect of the media schedule on….
  • 38. 99% of PCs in “Mature Markets” have a flash player installed – Millward Brown global survey 2009
  • 39. So…. Keep in mind that even the simplest concept will be affected by publisher specifications. High-res and complex images can be used but will need to be reduced in quality or modified before being featured online.
  • 40. Quick lesson on ad-serving……
  • 41. Publisher ad-servers
  • 42.
    • Ad Server Records:
    • Creative served
    • No. of impressions served
    • Clicks generated
    • Other interactions
  • 43. Trafficking the ads
    • Rich media ads often require the creative agency to upload creative
    • Delivering finished creative to media agency often problematic as there will be several files destined for several publishers websites
    • Publishers will often change specs requirements from those provided requiring ads to be tweaked (file size, dimensions etc.)
    The affect of the media schedule on….
  • 44. So…. Even after the ads are built, there is a lot of work involved to get them up onto publisher websites, involving several parties, and despite everybody’s best efforts, ultimately, we are all at the mercy of the publishers!
  • 45. To summarise
    • Creative concepts are directly affected by the media schedule and publisher specs
    • Costs and timelines will differ between ad-build jobs based on the complexity of the media schedule and types of media selected
    • Publishers are prone to changing their specs so even handed-off creative can sometimes need re-working
  • 46. Playing Big Brother Tracking, Reporting and Optimising your campaign
  • 47. What are Ad Tags?
    • Ad serving will be charged to the media agency on a CPM (cost per thousand), CPC (cost per click) or CPI (cost per interaction) rate by the ad server
    • Ad tags are inserted into flash ads (prior to hand-off) allowing click-through to be specified and allow campaign success to be measured by tracking and reporting on the number of impressions, clicks and interactions returned by the ad
    • Corresponding “action” or “post-click” tags are often inserted into destination pages to track activity and conversions delivered by ads
  • 48.
    • Ad Server Records:
    • Creative served
    • No. of impressions served
    • Clicks generated
    • Other interactions
    • “ Conversions”, allowing CPA measurement
    Interaction with web page recorded
  • 49. Measurement and reporting
    • Reporting configured and provided by the media agency
    • The Ad server will typically provide stats on:
      • Campaigns trafficked
      • Impressions served
      • Click through rates
      • Conversions
      • Flight comparisons (“Flight” refers to ads served in a position on publisher’s page)
      • Creative comparisons
  • 50. Campaign optimisation
    • The media agency can often specify an increase/decrease of impressions per ad type based on activity reports
    • The media agency can set the weighting of creative per flight based on performance (e.g. Click through rate) , or can request this of a publisher
    • The media agency can (sometimes) set weighting of flights across publisher pages/sites for RON (Run Of Network) ads (negotiated by publisher)
    • Additional creative can often be added to a campaign once scheduled (edited copy, new creative or updated links)
  • 51. So…
    • Request frequent updates on your campaign from your media agency
    • Optimise your campaign based on successful creative, flights and sites
    • Update creative whenever necessary to ensure relevance and maximise response
    • Always try to include conversion tracking in your campaign….where possible
  • 52. Summary
    • Several types of online ad available – budget, timeline and campaign objectives should all be considered when selecting creative media type
    • Budgets and timelines will be directly impacted by the media schedule and publisher specifications – highlighting their importance
    • Ad build process consistent for most types of ad. Alterations at any point will often have a knock-on effect
    • Campaign creative reporting is provided by your media agency for ads. Campaign effectiveness is relatively easy to track and should be requested during planning
    • Monitoring effectiveness throughout campaign should be agreed to and optimization reviews scheduled
    • Resources
  • 53. MasterCard Digital Training “ Building a MasterCard website”
  • 54. Agenda
    • Scoping the idea
    • Designing a website
    • Building
    • Implementing
    • Launching and updating your site
  • 55. So whaddya want? Scoping a project
  • 56. What is “scoping”?
    • Scoping is the process by which we examine what we are trying to achieve with a website and decide how we are going to deliver it
    • Through scoping,
      • you will determine how content will be included on your web pages
      • you will define the user-journey through your site
      • you will define how a user will interact with your site
      • you will decide upon and define the technical architecture for your site
      • you will define how much your website build will cost and how long it will take
    … a degree of accuracy!
  • 57. What’s involved?
    • A number of tasks can be performed during the scoping phase of a project, producing a number of elements, including
    • Stakeholder feedback/Executive summary
    • Statement of work
    • Functional specification (often also called a Scoping Document)
    • Technical specification
    • User, Functional or Data work-flows
    • Tracking requirements
    • Site map
    • Page wireframes
    • Timeline
    • Cost estimate
    • For MasterCard projects, the functional spec will form part of the DIF to be supplied to the GTO
  • 58. Why is it important?
    • Should go without saying, but:
    • Allows both consumer and business goals to be identified and set
    • Allows all appointed stakeholders to input into project and agree outcomes
    • Allows content inclusions, priorities and layout to be specified and reviewed before any design or build has commenced
    • Allows timeframes and cost estimates to be identified
  • 59. How long does it take? Typically, the scoping phase of a web-build project will count for 40% of the total project timeline For MasterCard projects, this would include (several) conversations with the GTO to discuss functional requirements, timelines, resource requirements and CMS access
  • 60. Making pretty pictures Concepting and creative design
  • 61. The Creative brief
    • Written by the Account Service team, the creative brief outlines the campaign requirements, objectives and brand considerations
    • It dictates the desired tone and style of both the copy and creative concept
    • It indicates where inspiration should be drawn from (if specific sites have been identified)
    • It identifies the target audience and communications objectives
    • It allows all parties (internal departments and the client) to input into the desired outcomes from a creative perspective
    • The result of which will be…..
  • 62.  
  • 63. And…
  • 64. The studio brief (Task brief)
    • Written by the Digital Producer, the task brief outlines to the digital studio the “nuts and bolts” of the design build
    • Identifies the selected concept with any amends
    • Provides the location of any supplied assets or outlines sourcing requirements
    • Details technical requirements relating to design including minimum supported screen resolution, style guide to follow and CMS or other code restrictions affecting design
    • Will incorporate the functional and technical specification documents
    • The result is “pixel-perfect” PSDs which can be used to create page code…..
  • 65.  
  • 66. How long does it take? Typically, the concepting and design phase of a web-build project will account for 20% of the project timeline
  • 67. Slice ‘n’ dice Front-end coding
  • 68. Front-end coding
    • The front-end developer (often called a Web Designer) will take the PSD files and use Photoshop to “slice” them into assets
    • Like this…
  • 69.  
  • 70. Front-end coding
    • Images then need to be made “web-ready” and resized to between 72 and 96DPI
    • Colours matched and made “web-safe”
    • Flash elements will also be developed at this time
    • They will then produce a mixture of HTML and CSS code which will replicate the design in a web-browser
    • They will produce the code in line with SEO best practice standards
    • They will adhere to W3C standards for accessibility
    • They will liaise with the back-end developers (GTO) to ensure the code they provide is usable in the CMS
    • They will provide place-holders for additional functions to be included later (e.g. XML files, Video player, Photo gallery etc.)
    • They will set up their code in a “development” environment where all parties can review and comments on design and layout
    • The result will be the “shell” of the website with a completed design, but without the functionality.
  • 71. HTML code CSS + Assets + =
  • 72. How long does it take? Typically, the front-end development phase of a web-build project will account for 20% of the project timeline
  • 73. <Code> Monkey Business Back-end coding and implementation
  • 74. Back-end coding and implementation
    • At this stage, front-end code is handed off to the GTO for implementation onto the CMS
    • Code is also provided to dload so form pages can be created
    • Javascripts (allowing interaction and functionality) are also added at this point
    • The front-end developer will work closely with the GTO, dload and other back-end developers to ensure code is implemented correctly and all assets are provided
    • The Producer will begin uploading materials (images, videos, flash files etc.) to the CMS
    • The Producer will work with dload to set-up the required databases and data-capture requirements
    • Tracking tags will usually have been created by this point and provided directly to the GTO for inclusion within page code
    • The pages will be uploaded to a staging environment for review and testing
  • 75. How long does it take? Typically, the technical implementation phase of a web-build project will account for 10% of the project timeline It is also typically one of the largest cost-points
  • 76. Go for launch Testing, fixing and launching a website
  • 77. Testing and bug-fixing
    • Well-run projects will contain several testing phases throughout the development phases
    • A master bug-list should always be prepared for the final testing phase
    • Typically done in a staging environment
    • Amends made in a local development environment then pushed to staging for review
    • Once all amends are made and site is approved, the site can be launched
  • 78. Amends briefed and staging site updated Amends pushed to live site
  • 79. Post-launch
    • Live-site should be checked following same process as pre-launch testing
    • Tracking code should be checked to ensure it is working
    • Typical live-site updates will follow the same process as launch
    • Larger updates may require coding by MercerBell and review on local staging environment
  • 80. How long does it take? Typically, the launch phase of a web-build project will account for 10% of the project timeline
  • 81. Finished!.....almost
  • 82. In summary
    • There are 5 major phases of a web-build project for MasterCard
    • Scoping, specification and technical design can contribute to 40% of the overall timeline but is by far the most important phase
    • Agreeing page layout and content inclusions during scoping will save time later in the process
    • Front-end coding not only covers design, but also search, accessibility and browser compatibility
    • While back-end implementation can be a relatively short phase, it is often one of the more costly
    • Testing is vital at all stages of the project, even after a site has launched
  • 83. Thank you