• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
MasterCard  - Online ad builds and website development

MasterCard - Online ad builds and website development



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



Total Views
Views on SlideShare
Embed Views



1 Embed 4

http://www.slideshare.net 4


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    MasterCard  - Online ad builds and website development MasterCard - Online ad builds and website development Presentation Transcript

    • The Brief
        • “ Tell us a bit about how a banner is built and how you put a website together”
    • MasterCard Digital Training “ Online Ads - 101”
    • Agenda
      • Sit on my space
      • How long’s a piece of string?
      • Playing Big Brother
    • Sit on my space The more common formats for online ads
    • Standard Banner ads
    • 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)
    • 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
    • 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
    • Rich media ads
    • 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
    • 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
    • Expandable ad http://stage.mercerbell.com.au/ourwork/content/2008/MCA071/index.html Other Examples http://creativezone.eyeblaster.com/ 1. 2. 3. 4.
    • 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
    • Synchronized ads (Sync ads or “Talking” ads) 1. 2. 3. 4. 5. http://stage.mercerbell.com.au/ourwork/content/2008/MCA094/index.html Other great example: http://www.bannerblog.com.au/2006/12/mini_tug.php
    • Video ads
    • Video Egg
    • Increasingly popular formats
    • 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
    • Widgets Video, additional navigation and social bookmarking all included in one ad
    • Homepage skin
    • Homepage takeover http://creativezone.eyeblaster.com/?ItemName=Jumper%20Overlay
    • What else can they do? Online chat HD video Interactive games Data-driven functions (e.g. postcode locator) File upload/download
    • 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%
    • 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
    • How long’s a piece of string? How the media schedule & ad specs affect the design and build process
    • The build process
    • 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….
    • http://www.bannerblog.com.au/2007/08/nt_tourism_map.php
    • 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.
    • 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….
    • 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!
    • 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….
    • Supplied artwork Finished ad with a 25Kb file-size allowance
    • 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….
    • 99% of PCs in “Mature Markets” have a flash player installed – Millward Brown global survey 2009
    • 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.
    • Quick lesson on ad-serving……
    • Publisher ad-servers
    • www.mastercard.com.au/debit
      • Ad Server Records:
      • Creative served
      • No. of impressions served
      • Clicks generated
      • Other interactions
    • 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….
    • 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!
    • 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
    • Playing Big Brother Tracking, Reporting and Optimising your campaign
    • 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
    • www.mastercard.com.au/debit
      • Ad Server Records:
      • Creative served
      • No. of impressions served
      • Clicks generated
      • Other interactions
      • “ Conversions”, allowing CPA measurement
      Interaction with web page recorded
    • 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
    • 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)
    • 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
    • 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
      • http://creativezone.eyeblaster.com/
      • http://www.bannerblog.com.au/
    • MasterCard Digital Training “ Building a MasterCard website”
    • Agenda
      • Scoping the idea
      • Designing a website
      • Building
      • Implementing
      • Launching and updating your site
    • So whaddya want? Scoping a project
    • 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
      … ..to a degree of accuracy!
    • 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
    • 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
    • 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
    • Making pretty pictures Concepting and creative design
    • 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…..
    • And…
    • 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…..
    • How long does it take? Typically, the concepting and design phase of a web-build project will account for 20% of the project timeline
    • Slice ‘n’ dice Front-end coding
    • 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…
    • 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.
    • HTML code CSS + Assets + =
    • How long does it take? Typically, the front-end development phase of a web-build project will account for 20% of the project timeline
    • <Code> Monkey Business Back-end coding and implementation
    • 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
    • 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
    • Go for launch Testing, fixing and launching a website
    • 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
    • Amends briefed and staging site updated Amends pushed to live site
    • 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
    • How long does it take? Typically, the launch phase of a web-build project will account for 10% of the project timeline
    • Finished!.....almost
    • 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
    • Thank you