profile

Charli Marie

How Zendesk has solved the product imagery problem

publishedabout 2 months ago
4 min read

Hey Reader,

Here's what's in this issue:

  • A tale of woe
  • How Zendesk's product imagery system works
  • An article about design systems and how they came to be
  • A fun poll

A couple of weeks ago I finally tackled a task that had been on a my to-do list for WEEKS: creating the product imagery for a landing page.

If you're a marketing designer, you likely understand why this was a task I'd put off for so long. Preparing the right image of the product to represent the feature and benefit that's being communicated on the page always takes about three times as long as I expect it to.

You can't just take any old screenshot. It has to be a screenshot that exemplifies a best use case; one that feels real, but not too complicated, but still commnunicates what the feature does. And sometimes it's not even a screenshot at all but a design recreation of the screen in Figma!

Clearly I need a better system for product imagery to make it less of a burden, which is why I jumped at the chance to learn more about Zendesk's design system for product imagery: Blockframes.

Creating a product imagery system

Zendesk's product imagery strikes a great balance between feeling like the real UI without including all of the real-UI visual complexities.

I was excited to discover in a recent interview with Design Director, Kristina Alford, and Senior Digital Designer for Design Systems, Meghan Kelley, that there's a whole design system behind these images that allow not just the marketing designers to pull imagery into feature pages, but for others in the company to pull the demo images into presentations and ad assets as needed.

I eagerly started taking notes.

At Zendesk, product imagery can included stylised low-fidelity elements (like the one above) or go full high-fidelity, like this one below, and look more "real".

Unlike me, their designers aren't creating these images bespoke for each landing page. Instead, they're set up in a system in Figma that allows their team to choose:

  • The feature they want to showcase
  • Whether it should be high fidelity or more abstracted
  • Additional details to add context
  • The color scheme that best fits with the page they're designing

The system pulls from other Zendesk libraries to align icons, colors and typography. Here's a Blockframe broken down:

Now, of course, the idea of creating a design system for product imagery had occurred to me before; but it's never been something I've been able to prioritise. Hearing from Kristina and Meghan about their system, how they maintain it, and how it serves their team was the push I needed to start actually making plans for this though.

Here's what I think our system will allow you to choose at ConvertKit:

  • What feature to showcase (we'll start with the main sections of the app, then break them down into more specific jobs-to-be-done)
  • What creator to showcase (archetypal personas for now, with a goal to shift to featuring real creators–with their permission of course–instead)
  • Color accent (depending on what background the image will appear on)
  • Additional details (like hand drawn elements and zoomed-in pieces) or plain

Now to actually build it 😅 That'll be a task for Q1.

Watch the Zendesk episode of Inside Marketing Design to hear for yourself about this system and other great processes the team use to get work done.

video preview

Stickers: fun personal expression or "ruining" a laptop?

Did you catch the unboxing video where I showed you my brand new Macbook Air? Watch it here if you missed it, but let me show you what I did to that new laptop this weekend.

NOW it feels like my laptop 😅 I went with a black-and-white-only theme for this stickerbomb, figuring it would bring a little bit more organization to the chaos. I love how it turned out, but I know it's not everyones cup of tea!

If stickering is your thing... send me a photo of your stickered laptop in a reply to this email! It'd be fun to share a gallery of Dispatch-readers creative expression in the next issue. (And plus, I need sticker inspiration to fill that gap at the bottom right of mine)

Thanks for reading! I genuinely hope you enjoy this newsletter, and if you don't: then please know I'm always open to feedback.

I'm entering my third year of writing this weekly newsletter, and I want it to be one of the most valuable reads in your inbox, so please let me know if there's anything you'd like to see done differently in 2023.

Have a good week,