Product representation

When telling product stories, comp product into a device in a customer hand, into a static device in a customer space, or inside of an illustrated device.

Comp product shots into devices in the hands (or in front) of actual customers, leveraging footage from customer story videos. Use for advertising touchpoints like YouTube pre-roll and Facebook in-stream.

Comp product shots into devices in real customer spaces, using camera movements and close-ups to carry the story forward. Use for touchpoints where photography is common, like Facebook feeds, Instagram, and QB.com pages.

Show the product inside illustrated devices or browser containers over the QuickBooks light gray background. Make sure to use the camera movements and close-ups to carry the story forward. Use for in-product and tutorial hub.

Product shot composition

Product shots should be composed in central framing, making it easy for the viewer to follow the action and understand the functionality and benefits of the product.

Use close-ups to emphasize payoff and delightful moments.

Isolate down to a single component. 

Don’t alter the product design.

Don’t add text or other design elements on top of product visuals.

Live-action product videos

Live-action product videos use footage of real customers interacting with our product. Footage should be leveraged from TV and testimonial content to tie emotional resonance to the product story. Open on a shot of the customer to establish the scene and spend 80% of the video focused on the product.

Repurpose customer footage from TV and testimonial content.

Comp product visuals into the device.

Don’t alter the product visuals or interaction.

Don’t represent an interaction like a button depression if the customer doesn’t take this action. In this case, focus on non-interactive visuals, graphs building, invoicing tracker, load screens, etc.

Product motion: 0.40, 0.00, 0.20, 1.00

Animated product videos

Use the product to tell the story. Place the user experience inside of a photorealistic or illustrated device or browser window. Mobile interactions should be shown using close-ups on elements and browser interactions with an animated cursor.

Use close-ups to emphasize interactions, payoff, and delightful moments.

Don’t alter product design.

Don’t add text or other design elements on top of product visuals.

Don’t feature title motion and product motion simultaneously.

Photorealistic product animation

Use static devices in real customer spaces to create videos that are visually aligned to customer stories. Plates are captured during production and are available for download.

Use plates from customer stories.

Represent interaction and delightful moments through close-ups and camera movement.

Don’t add additional motion elements to product videos for emphasis or style.

Don’t use stock photography.

Don’t insert a hand into frame to represent product interaction.

Don’t use any additional design elements including secondary elements.

Motion: 0.40, 0.00, 0.20, 1.00

Illustrated product animation

Use illustrated product animation to tell stories completely focused on the product. Represent the product inside an illustrated phone (QBM, QBSE) or browser window (QBO, QBOA) over a QuickBooks light gray background. Titles can be used for promotional or educational callouts but shouldn’t be on-screen at the same time as the product.

Background color: Quickbooks light gray (#ECEEF1)
Device color: Black (#000000)

Use titles to elevate messaging.

Use secondary to call attention and motivate transitions.

Include CTAs and end cards on web videos.

Include CTAs on in-product videos.

Don’t add additional motion elements to product videos for emphasis or style.

Don’t include end logo on in-product videos.

Camera motion: 0.40, 0.00, 0.20, 1.00
Product motion: 0.40, 0.00, 0.20, 1.00
Title entrance: 0.00, 0.00, 0.20, 1.00
Title exit: 0.80, 0.00, 1.00, 1.00

Secondary elements in illustrated product animation

Use secondary elements sparingly to call attention and motivate transitions and motion. Energy beams can be used in title cards to indicate offerings and motivate transitions. Dot patterns can be used in interstitial titles to call attention and drive camera movement. Secondary elements should not occupy more than 25% of the screen and should follow the guidelines defined for the individual elements.

Use offering color in secondary elements to indicate video subject.

Use very sparingly, keeping the product the focus of the video.

Don’t include secondary elements in product shots.

Don’t overlay text or design elements on top of product.

Titles in illustrated product animations

Use titles and interstitials to give context, provide guidance, or visually elevate the storytelling. Use secondary elements sparingly to call attention to titles or motivate motion. Use camera movement to transition between title screens and product shots.  

Text:
Color: White (#ffffff) or QB Dark Gray (#393A3D)
Size: Bold 152/156
Case: Sentence case
Title safe: 1080×1080 px

Motion:
Entrance: 0.00, 0.00, 0.20, 1.00
Exit: 0.80, 0.00, 1.00, 1.00

Use titles to set context.

Use interstitial titles to provide guidance or call out benefits.

Don’t feature text on screen at the same time as product visuals.

End cards

We use the horizontal QuickBooks lockup as our end card in videos. This is a fixed element with flexible variants for specific use cases. The lockup serves as an impactful ending with durable brand resonance designed to land directly in the viewer’s eye line at the end of a video, creating a strong emotional connection between the subject of the video and the QuickBooks brand.

Use downloadable templates.

Use music that carries motion.

Always end on this image.

Don’t create your own versions.

Don’t use as a title card or anywhere other than the end of your video.

Don’t add any additional text or motion to this end card.

Primary: two-second animation
Secondary: two-second static
Both variants available in 16:9, 9:16 and 1:1

Voice and tone

Video script principles

Design toward your call to action

Define the action you want your audience to take after viewing the video. Ideally, your content encourages viewers to sign up, use a feature, download our app, etc. CTAs should appear as on-screen text adhering to interstitial title design guidelines.

Answer one question

Communicate the main idea to your audience. Get specific about their takeaway, whether it’s task completion, feature capability, or how QuickBooks fits into their lives.

Brevity goes a long way

Keep your script as short as possible. If it feels like you’re squeezing in too many ideas, instructions, or benefits, you probably are. Consider creating another video that picks up where this one leaves off.  

Writing product video scripts

The QuickBooks video voice is a proactive champion. We speak directly to the viewer in an aspirational but relatable way. We write our scripts the way people speakwith common contractions and no filler words. We never make assumptions about the viewer.

Write in active voice.

Favor simple tenses.

Be precise and definitive.

Use everyday contractions.

Write conversationally — for example, it’s OK to end sentences with prepositions.

Don’t overuse exclamations.

Don’t ask rhetorical questions.

Don’t include fillers (uh, ah, um), unnecessary pauses or slang.

Don’t make assumptions or speak for the viewer.

Don’t get specific in ways that could alienate the viewer.

Product motion: 0.40, 0.00, 0.20, 1.00

Voice-over

Keep it human. Even if it means breaking grammar rules, the voice-over copy should sound like we talk, using our voice and tone guidelines. Keep it warm. Be a champion. Use short sentences and phrases.

When creating a voice-over, cast your voice talent based on these criteria.

  • Age 30-50
  • Sex: Male or Female
  • Tone: Passionate but conversational. Not salesy.
  • Pacing: Slow enough to guide but not so much that we belabor the point.
  • Delivery: Voice-over should sound colloquial—the way people actually talk, not the way they write. This might mean breaking minor grammar rules or speaking in phrases instead of sentences.

writing for on-screen text

Titles
Titles should accurately reflect the content of the video—the customer story, product feature, benefits, etc. If the copy is placed over an image, ensure they complement or tie into one another. Prioritize clarity over cleverness.

Interstitial titles
Use these to introduce important info not covered in the storyline. Be brief. Be clear. Create resonance. Expand upon the passion, person, product, service, or overall business. Use bold words or phrases to emphasize key details, but don’t overdo it. Don’t place text and product UI on-screen at the same time. These two elements often compete for audience attention.

accessibility

Captions
Use a preferred vendor to provide human-generated timecode captions. Upload to caption-enabled platforms, like YouTube or Facebook.

Transcripts
Provide a transcript for every video we create. It allows viewers to read at their own pace, especially if it’s a tutorial video.

Use words like select, enter, or choose.

Find opportunities to give instructions like “save your work” instead of “tap save.”

Avoid using words like tap, touch, push, press, click, swipe, or hit. Avoid describing a location-based interaction—right, left, up, down, etc.

 

  • Was this Helpful?
  •