Imagine walking into a grocery store, but there are no employees in sight. There's no one to greet you, help you find products, slice your deli meat, or check you out. Or maybe there is an employee—but they're exceptionally rude. Or they won't stop cracking jokes. Maybe they don't even speak your language.
You probably wouldn't shop there again.
In digital experiences, you have to rely on written words in place of conversations with actual people. If the words aren't right, the whole experience is ruined.
As a content designer, it’s my job to ensure every online conversation we have with customers is as effective and enjoyable as shopping in an H-E-B store. People love our stores for the friendliness, unique offerings, community-centered ethos, and proud Texan vibes. Well, that, and the ice cream.
Content designers at H-E-B Digital are responsible for nearly all the words in our digital experiences. We collaborate with researchers, designers, product managers, and engineers to create digital interfaces that balance our four key content principles: useful, clear, concise, and consistent.
Still fuzzy? Compare content design with copywriting. Copywriters use romantic language to inspire an emotional response and get users to buy something. Content designers use simple language to help users understand their experience and help them accomplish something. As content designers, we solve problems and shape experiences through content.
Write simple. That means it's easy, right? Not exactly. Because words are the source of truth, content designers need to be experts in all the ways a product functions, often sitting with engineers to turn complex ideas into something useful. And because no one likes to read (it's okay, we get it), the copy usually needs to be short. And it needs to sound like a human, not a robot. And don't forget it needs to go through user testing to make sure it actually works. So what does simple look like? It's spending 30 minutes writing a single error message, coming up with 35 versions of a single headline, or asking anyone within earshot if they understand what the word "biometric" means.
Simple is hard, y’all.
When I joined the H-E-B Digital team, our brand new H-E-B app was already full steam ahead. We had to build the car as we drove it, so to speak. While collaborating with designers to craft content for each screen, we were also documenting guidelines, researching and learning about our customers, and trying to understand and define our brand voice for the digital space.
To get up to speed, we audited what existed in our stores and online, talked with H-E-B Partners, and even worked as a personal shopper for a few hours (and wow, that's not easy). We used these learnings to ensure our writing matched our customers' mental models and honored our larger brand voice. For the app, we focused on making our voice sound conversational and upbeat without being too casual or overly playful.
To make sure we were being consistent, we also drafted a style guide, documenting use cases as they came up. This style guide sets rules around things like punctuation, capitalization, and word choice. This guide will likely always be changing as we evolve.
While keeping the big picture in mind, we also got deep into the details. Thinking back to our handy metaphor: you wouldn't want to be halfway through checkout in a store, only to have your cashier tell you they were unable to add the item to your cart and ask you to leave. That shouldn't happen in the app either. Every piece of content was crafted to reflect the type of experience you'd want in a real store, whether things are going well or not.
Let's see what that looks like: Here's some of the content we wrote for the My H-E-B app so you can see the difference a few words can make.
Often called a "permissions primer," this dialog shows up when your phone needs approval to access information, for example, to use your location to find your nearest store. Sharing data can be a little scary so we use primers like this to let customers know what data we need and why.
The copy in the first image below sounds impersonal and doesn't help the user understand why sharing their data would be helpful. Rewritten, it sounds more like something a real person would say to you. And details like button copy matter too: "Continue" gives the user a hint that there's another step, and "Not now" lets them know they can always change it later.
Sometimes, things go wrong. When they do, we rely on error messages to help users keep moving. There are entire articles out there (like this one and this one and this one) dedicated to the art of error message writing, but we'll dive into a simple example here, where there was an issue deleting a credit card.
In the example on the left, "credit card error" sounds scary and might alarm someone. The message itself isn't very specific and doesn't tell the user what they might do to fix it. In the rewritten version, we're letting them know there was an issue without any alarming language. We're very explicit about what went wrong and give them a nudge to try it again, knowing the glitch probably won't happen twice in a row.
Some areas of our experiences allow us to use more traditional copywriting skills. When users open the app for the first time, we want to evoke excitement and help them learn what they can do. While cleverness can be a distraction in other areas, like error messages, adding some wit in here is akin to a friendly greeting when you enter a store. You know you don't have to engage, but you appreciate a little extra zest.
After trying a few versions of this copy, we landed on options that are concise and clever. These screens serve as a place to show our personality, while still highlighting what's great about the app.
Short, clever copy invites customers to want to know more
With our new flagship app, we set out to create an experience that feels like our stores: welcoming, reliable, and fresh. By carefully crafting the language in the app, from button labels to prompts to instructional text, we hope our online customers feel the same delight they do visiting an H-E-B store. Want to know what a digital high five feels like? Just open the app.
Tiffany Duening is a Senior Content Designer. You can connect with her on LinkedIn.
For years, customers using SNAP benefits had to pay in store—but when COVID struck, we wanted customers to be able to use their benefits however they felt safest.
When COVID drove massive traffic to H-E-B’s online experience, we realized our work for the big game had been the perfect scrimmage.