What Content Marketers Need to Know About UI

UI — and its cousin UX — often look and act differently in content marketing than in other experience design fields.

Think about the user interface and user experience skills required to help persuade a user to first listen to a brand’s podcast, then read two more articles and then sign up for information about a brand’s services. Multi-touch-point engagement is the win.

Now think about the UI and UX skills needed to nudge your target audience to salivate over those super-cute shoes, put them in the cart and hit “buy.” Bottom-line revenue — cha-ching — is the win.

The goal of UI in the former is to add valuable friction: quality content. In the second case, the UI is to subtract friction that might distract the user on their way to check out their cart.

The skills and mindset are different for content marketing UI projects (journalistic versus transactional). Roles and responsibilities are reassigned, too. For example, in content marketing, the content strategist — not the UX pro — does the stakeholder interviews, content audits, personas, user journeys, focus groups and competitive analyses.

To understand how and when to use UI in content marketing programs, I sat down with Rebecca Griftner, former director of digital design and UI at Imagination. She had recently made the switch from product-first thinking as lead UI designer at aviation broadband provider Gogo Inflight.

What’s the difference between UX and UI?

UX is thinking about the entire user journey — how they get there, what they interact with, even user emotions—as an ecosystem. UX means user experience.

UI is user interface. We’re communicating the brand and designing the experience through the brand. We’re visual designers. I’m trying to lead you along a path through an interface. Through a whole system.

UX is usually a lot of research and ideas and sometimes wireframes — not always necessary. If I’m working really closely with a UX designer, I probably don’t need wireframes because we will have been communicating constantly throughout the process.

UI is where the rubber hits the road. It’s the actual interface that someone will experience. It’s a little bit more fine-tuned. A key thing the UI visual designer will develop (or get from a client) is digital brand guides. It’s how a brand manifests itself digitally — colors, typefaces, recurring user patterns and things like that.

Those are really important, especially for larger brands. If you have a microsite that operates differently than another company microsite or than different parts of the parent website, people notice and think something’s off. It will feel weird. Have you ever been to a site where part of it’s an old brand and part of it’s a new brand? You can tell.

What do you think is uniquely compelling about UI for content marketing programs — as opposed to a more sales-driven retail or product experience? Sales goals are often diametrically different.

Right. With product, you’re trying to make it as seamless as possible for the user to complete a transaction. Usually, that’s the end goal. And content is different in that you want someone to linger. The goal is to have them stick around and find value in the content.

I find that kind of inspirational, personally, because it’s more thoughtful. I feel like strategy is such a large part of what we do, and content and strategy are so married. Where sometimes on the product side, it can just be like, “Just get ’em to do it! Real quick, as fast as they can.”

So it’s nice. Providing ways for users to keep reading, watching or listening is always going to get them further down that funnel. It’s useful.

Now we get to design. How do you decide design UI hierarchy?

You work with the content creator to figure out how they imagine it. And then once you get into it, what’s fun about UI is that UX has intentions, and content creators have intentions. Then UI has to make sense of it.

First, you make it legible for yourself but also think about the next person who might not know anything — make sure they can get through it. It’s setting a path that’s clear for the user with all these inputs. The main goal is you’re trying to make sure it’s easy to navigate and understand what’s happening on screen.

“UI is where the rubber hits the road. It’s the actual interface that someone will experience.”

REBECCA GRIFTNER
FORMER DIRECTOR OF DIGITAL DESIGN AND UI, IMAGINATION

UX pioneer Jakob Nielsen has a famous rule that users spend most of their time online at places other than your website. Meaning: Don’t try to design your site in a way that seems cool to you but is so unexpected that people abandon it. He advocates designing for expected user interactions. Do you ever get feisty and go for the opposite? Should content marketers ever ignore this guide and prioritize memorable experiences as opposed to cookie-cutter best practices? I’m thinking of the middle rail in The Daily Beast, which thumbs its nose at the left-rail convention. It’s a fine line, for sure. Certain design patterns are used everywhere on the internet. And when you break those interactions, those patterns, people notice, and something feels off. Maybe they can’t pinpoint it, but something feels goofy. Few brands want that. I’m all for trying new things, but you don’t want to do it at the expense of a successful completion of your design experience goals.

You’re not a proponent of wireframes. Why?

Typically, we tend to just go right to prelim designs because many people misread wireframes anyway. The tricky thing about them is that wireframes are either designed too specifically to really allow for UI, or they’re so generic and fuzzy that they’re not super useful for other people to give feedback on. It’s like my approach to sketching out an illustration. If I can just go straight into Illustrator and start working and drawing, I’m going to do so instead of drawing by hand first because then I’ll have to scan and then outline in Illustrator anyway.

How do you design to convert? For example, say you’re designing an email. What do you build into the design to incentivize users to do what you want them to with your CTAs?

Email is so interesting. Everyone gets so many. You have to think hard and figure out what’s going to delight the user, the audience, and get them to open it. A lot of it comes to editorial-driven decisions: How do you make the headline awesome? That calls for A/B testing. Test to make sure the subject line and the preview text are great. And once they open it, what’s going to actually give them value? What’s the most important thing to that person that we can provide? Test, test, test.

Email is the same as a website experience design — it has to have a focus. Pick one thing you want it to get users to do. Otherwise, people are not going to return. They might open it once and then after that, no.

Let’s talk multiplatform design. Say a brand has a magazine, a newsletter and a website. How closely do you think their branding needs to sync up?

All the touch points need to have shared brand standards, but they don’t need to have the exact same look and feel. They can be loosely connected and feel like they’re in the same family. It goes back to brand voice. As long as they all evoke roughly the same emotion from the audience, that’s the key. You should be able to go between any medium. It could be video, digital article or magazine. They can all have the same feel but actually have very specific different visual elements.

I’m an advocate of brand design guidelines that cover all formats and user experiences. I don’t love the ones that say: Well, this is our logo. And that’s it. I’m like: No, I want to know everything about how you represent yourself.

Rebecca’s Recommendations

Three go-to tools for UI design from Griftner:

• InVision We use this tool for prototyping and proofing. InVision has a function where you can enable a collaborator to inspect all your pieces. So you can make a developer a collaborator, and then they can hover over everything, click on stuff and see hex codes and typefaces.
• Sketch This one is our primary design program and by now an industry standard. We start all projects here. I like that it allows designers to create symbols, which are repeatable elements. There are a million plug-ins that can really speed up your process. Sketch just makes it super efficient to design in and pretty easy to hand off to development to boot.
• UXPin One of our designers loves this tool for prototyping. The prototyping tools are more robust. I’m checking it out now.

What’s your POV on UI for mobile content experiences?

Most UI designers start with mobile designs because the space is so limited. You have to boil everything down to however many pixels wide it is. It’s efficient and also, honestly, easiest. It’s a single column, and everything gets stacked up.

It helps not to fit too much on the page, on a viewport, at once. If your users have made an effort to find something that you’ve designed, don’t distract them from it. Don’t auto-play videos.

Make it simple, basically, because they have literally everything else at their fingertips. And that gets back to navigation and site maps and things like that. Nothing should be too complicated to navigate. If somebody’s trying to find something on a mobile site, they probably don’t want to spend too much time looking.

Some people will say that you should present almost a totally different experience on mobile. I disagree, especially for content. You can’t have something completely different on mobile versus desktop. You have to make it so that when the user accesses the same site on a different form factor or a different screen size, the patterns are still the same. So clicking and tapping have to do the same thing, right? That’s when you get into interaction definition: When someone clicks this, it will always do this. Maybe those things look a little different, maybe it’s vertical versus horizontal, but it should do the same thing.

From a UI perspective, what are your best practices for bringing UI skills and mindset to quality content strategy projects?

Here are five:

1. Always ask yourself these kickoff questions. The first thing I always want to know is the audience. Who are we talking to? Who are these people reading this stuff? Not your aspirational audience — realistically, who’s your audience now — it’s pretty important. So that’s even before UX begins. No. 1 is audience. And then I want to know: What do you want the site to do? Knowing the desired result is really important. Knowing these two main things spurs a lot of questions and answers, helps build alignment across the entirety of the project and keeps everybody focused.
2. Limit yourself to one goal. Maybe two. Never three. The other part is, when you’re designing a site, a microsite or really any piece of content, there should be only one or two things that you’re trying to achieve. For example, your goals could be: You want people to read these articles and then to sign up for that email campaign. All of your decision-making should be around those one or two things.
3. Keep the user journey flowing. The thing with UX and UI is that you never want to give the user a dead end. Ever. Because that’s where their engagement ends, and they close the window, and that’s it, right? Always give them something to do next.
4. Define user accessibility patterns. The other thing to think about — and this point is for UX and UI — is, how is someone accessing this stuff? Are they younger, and they’re always on their phone? Are they maybe a little bit more traditional, and they’re looking at a big desktop screen? Are they a traveler, and so they always have a laptop open? Thinking about the audience in this way — how they currently consume content — can result in some different design approaches, such as, “Let’s make sure mobile is super easy to navigate.” Whereas desktop would be, “Let’s make sure that they can see as much as they can at once.”
5. Ditch the lorem ipsum for real copy. I like to make sure that editorial is ready to input into the designs at an early stage. Lorem ipsum placeholder is fine in theory. But then you just have to constantly double-check to make sure that the limits — the character limits, word limits that you’ve carefully thought out — make it to the expectations of editorial, so that they’re not writing 50 words when you really only have room for five. That’s why it’s easier if you always make it a rule to work with real copy and work closely with your editor. It also paints a clearer picture of what everything is and says and does for clients. Real copy creates less uncertainty for everyone.