Creating Interactive Content The tools,
the milestones, the skills, the timelines. Behind-the-scenes with our team—see how we create interactive content for our own marketing.

What’s Inside • Inside peek
into two interactive content experiences: • From static to interactive: white paper • Interactive first: 50-item ‘infographic’ • We’ll cover: • The concept • The team, roles and skills • The project plan, timelines and effort

Our Typical Process (tip: In
our case, Design & Build are collapsed into one step, because we use our software to create our interactive content. If you have your interactive content coded by developers, separate this into two distinct steps in your project.) STEP 1 Brainstorm STEP 2 Concept Brief STEP 3 Interactive Wireframe STEP 4 Design & Build STEP 5 QA STEP 6 Launch STEP 7 Review & Measurement

Brainstorm Concept Brief Interactive Wireframe
Design & Build QA Launch Review & Measurement There are two steps in our process we think are critical to our success—the concept brief and the interactive wireframe:

✓ Background ✓ Source content
✓ Traffic ✓ Success measurements ✓ Technical considerations ✓ Samples/examples ✓ Details ✓ Overview ✓ Content outline ✓ Data flow ✓ Marketing insights ✓ Sales insights ✓ Data hand off ✓ Next steps ✓ Additional opportunities The Concept Brief The concept brief is an important part of our process. It provides a narrative and outline of what we will build and ensures we all stay on the same page.

The Interactive Wireframe The interactive
wireframe is a working experience without design elements or final content. It demonstrates functionality & user experience. An interactive wireframe is created before every build. Once approved, we add final content, design and images. This makes our build step go very quickly.

Here’s an example of how
we did it… Transforming a static PDF white paper into an interactive white paper

Interactive White Paper Snapshot OBJECTIVE:
Provide an engaging content experience that encourages un-gated content consumption and continues to drive leads. Capture visitor behavior to surface warmer lead to sales. This approach works well for our content. Check out this link to learn more: http:// www.ioninteractive.com/blog/ungated-and-unbridled AUDIENCE: Prospects (content marketers, direct marketers, online marketers) MARKETING PROGRAMS: Social, email marketing, paid social, paid search, organic site traffic PLANNED INSIGHTS: For marketing: aggregate topic interest, bounce rate, conversion rate For sales: individual visitor topic interest

Justin Executive Sponsor Justyn Web
Designer Katherine Senior Web Designer Paige Content Marketer Rachel Content Marketer The Team Project Lead Concept, Design & Build Consultation, Proofing/QA

Justin • Executive Sponsor Ensuring
the initiative meets our business goals and stays on track How They Worked Together Justyn • Web Designer Brainstorming & planning Katherine • Sr. Web Designer Design & build Paige & Rachel • Content Marketers Does the interactive content structure work? Proofing and QA

The Project Lead Katherine •
Senior Web Designer ✓ Brainstormed with team best ways to add engagement and interactivity to the experience. ✓ Created an interactive wireframe based off the original white paper. ✓ Designed & built the experience in the ion interactive content platform - using graphics and content from the original pdf.

Timeline Brainstorm Time Spent: 1.5h
Time Elapsed: 1d Concept Brief Time Spent: 1h Time Elapsed: 1d Interactive wireframe Time Spent: 3h Time Elapsed: 3d Design/Build Time Spent: 5h Time Elapsed: 5d QA Time Spent: 2h Time Elapsed: 7d Review & Measurement Ongoing Launch Time Elapsed: 7d Total: 13 man hours, 7 days elapsed

The Original Content • PDF
white paper used to generate leads. • Driving traffic from site, paid search and email. Visitors land on a single page and complete the form to download the PDF. • Strong performance– meeting goals for leads gen. Download PDF Rotator with Sneak Peak of PDF Lead-Gen Landing Page

The Situation • The PDF
drives high volume of leads but it is “pass/fail”. • Are people reading it? • How can we ensure the content is helping sales have better conversations with warmer leads? • More on info on “pass/fail” content: http:// www.ioninteractive.com/blog/heres-why-i-am-so- passionate-about-the-digital-dialogue

The Opportunity • Expose the
content to a broader audience by ‘un-gating’ it. • Bring the content out of the PDF, and into an engaging interactive experience where user behavior can be measured. • Offer the PDF version within the interactive version to drive leads.

Interactive White Paper Responsive
Content

Include interactive featuresTabbed Content

Add in fun or educational
quizzesQuiz

Use animations and interactivity to
draw attention to the most important elements Includes Animation

Un-gate the content, but provide
an option to download the PDF for lead gen Asset lead-generation lightbox

Offer a ‘contact sales’ option
to generate hot inbound leads for your team Contact Form

Tag user behaviors behind the
scenes so marketing can evaluate content consumption and sales can meet the lead at the point of interest

How we use it in
our marketing: Social, email, organic, paid search

Here’s another example of how
we did it… Creating content, “interactive first”

Interactive Infographic Snapshot OBJECTIVE: ‘Show”
rather than ‘tell’ the advanced features of our software (demonstrate the feature within the experience itself, rather than writing copy about the features) AUDIENCE: Prospects (content marketers, direct marketers, online marketers) MARKETING PROGRAMS: Social, email marketing, paid social, paid search, organic site traffic PLANNED INSIGHTS: For marketing: aggregate feature interest, bounce rate, conversion rate, average score For sales: individual scores, as tallied by number of ‘features’ viewed

The Concept • Create an
interactive ‘product’ marketing brochure showcasing key features of our product and service. • A massive “info-graphic”-style interactive content experience that includes 50 unique items, grouped by categories of content

Justin Executive Sponsor Matthew Art
Director/ Designer Jay Product Specialist Paige Content Marketer Rachel Content Marketer The Team Project Lead Concept, Design & Build Copyediting, Proofing/QA

Justin • Executive Sponsor Ensuring
the initiative meets our business goals and stays on track Matthew • Art Director Conceptualize, Design & Build Jay • Product Specialist Brainstorming, Planning Technical Copywriting Paige & Rachel • Content Marketers Does the interactive content structure work? Copywriting & editing Proofing and QA How They Worked Together

Project Leads Jay • Project
Specialist ✓ Identified the 50 key platform features ✓ Organized features into a workable outline ✓ Wrote copy for technical content ✓ Provided product guidance for advanced features Matthew • Designer ✓ Using Jay’s outline - conceptualized the visual flow and layout of the experience directly within the platform ✓ Created all graphics / animations ✓ Built the experience without code

Timeline Brainstorm Time Spent: 4h
Time Elapsed: 1d Data Flow Design Time Spent: 1h Time Elapsed: 1d Interactive wireframe Time Spent: 10h Time Elapsed: 7d Design & Build Time Spent: 23h Time Elapsed: 23d QA Time Spent: 1d Time Elapsed: 25d Review & Measurement Ongoing Launch Time Elapsed: 25d Total: 46 man hours, 25 days elapsed

Responsive

Flow & multi-step forms Multi-Step
Rotator Include a Form

Include video Include video

Show vs. Tell

Add wow Video Backgrounds

Social sharing

Social sign-on

Lead-Generation

Tag user behaviors behind the
scenes so marketing can evaluate content consumption and sales can meet the lead at the point of interest

1+ 1+ 1+ 1+ 1+
Score each of the 50 features (increment +1 for every feature visited) behind the scenes so marketing and sales can gauge level of engagement with content.

How we use it in
our marketing: Social, email, organic, paid search

Here are some tips &
tricks for planning your own interactive content…

• Confined by the content:
Creativity in re-purposing is key • Content editing • The content often dictates the modality & presentation • Content and presentation are conceived separately • Content team can be separate from design & build team • No pre-defined guardrails: Concepting is key • Content concepting & writing • The desired interaction dictates the modality & presentation • Content and presentation are conceived together • Content, design and build teams work closely together vs STATIC FIRST INTERACTIVE FIRST Considerations

• Brochure = Interactive lookbook
• Whitepaper = Interactive white paper, assessment, interactive infographic • Pricing sheets = Calculators • Product sheets = Solution finder or product configurators • Factoids = Game or quiz Ideas For Scaling Static Content Into Interactive Experiences

How to uncover strategic opportunities
for interactive content from content you already have: • What content do you already have, and how you can make it more useful and engaging for your buyer? • Meet with sales or the field to determine gaps in your buyer experience—what information do you have that needs to be surfaced more effectively? • Understand the conversations that sales and/or customer support are having today—what static documents are they using in their communication with customers and prospects? • Use the ion solution finder to provide ideas to scale your existing content: http://apps.ioninteractive.com/site/ solution-finder/interactive-content

• What does your buyer
need to help evaluate or make a purchase decision? • Meet with sales or the field to determine gaps in your buyer experience • Understand the conversations that sales and/or customer support are having today • Scour the web for inspiration and ideas (or just call us!) Considerations for Interactive-First

Want to see these two
interactive experiences in action? Check out: http://www.ioninteractive.com/examples We help transform static content into engaging, educational, useful interactive experiences. web: www.ioninteractive.com twitter: @ioninteractive email: info@ioninteractive.com