Empty States? More like You-Have-No-Idea-How-Much-Work-Goes-Into-Those States, amirite??

Meg Robichaud
Shopify UX
Published in
13 min readJul 24, 2017

--

**Before I go any further, let me tell you who the “we” is in this story. Our incredible team of illustrators at Shopify include myself ; Ryan Coleman, Holly Schofield & Erin Moncrieff ; with occasional help from Blake Stevenson & Alek Doesnt-have-his-last-name-on-slack-im-not-a-detective-ok**

As someone who previously credited a not insignificant amount of my successes to my attention to detail (read: neurotic perfectionism), learning that working at scale means being extremely deliberate with how you spend your time has been—to say the least—a challenge. Where I previously determined “good enough” and “finished” by —I don’t know—general merit and quality; I now make that call by some complicated calculation of number of users, how long they will see it, and the potential lasting impression it may have.

This puts empty states in a precarious position. Not many users will see them, and if they see them, it will be brief. We’re talking low percentages here people. I don’t do a custom illustration for sub 50K users y’all. We spent a very, very long time considering just leaving the old empty states in all together. Yes, it hurts me to see two different illustration styles on our product. BUT if, say, only 2 percent of users are going to see any given empty state in the old illustration style, briefly, and also they probably won’t notice—or give a shit—maybe our time is better spent somewhere else. Like, c’mon Meghan. Get it together. Are you a designer? Are you someone who solves for actual needs? Or do you just like to make beautiful things? Repeat after me: you can handle an inconsistency in the back corner of your product for the sake of an overall better experience for the majority of users. You can handle an inconsistency in the back corner of your product for the sake of an overall better experience for the majority of users. You can ha—

Yeah I mean you know where I was going with that: we didn’t do that. Despite the low users, low duration, low give-a-shitery, we decided to go all in on empty states. Two reasons: impact, and polish.

Yes, 2 percent* of users are going to see any given empty state, briefly, but when you consider why they’re seeing them, that 2 percent matters. They’re a new user, exploring the product, deciding if they want to stay. They’re getting frustrated because they don’t know what to do next. They don’t understand what your feature is, why it’s there, or how to use it. These are some pretty freakin’ critical moments. Individually, it’s hard to justify spending time on any given empty state, but collectively, these moments matter. Any given user probably won’t see your empty state, but they will eventually see a empty state. Are we really going to serve up “lol something went wrong and we don’t know what it was but look we drew a cat haha we’re so down to earth and relatable, right? Right??” to 100% of users? You know, even though we do in fact know what went wrong? When we are, in fact, perfectly positioned to turn this negative moment into a positive moment with actual education and understanding? No, we’re not. We’re better than that.

AND yes, 2 percent* of users are going to see any given empty state, briefly, but when you consider what abandoning those 2 percent of users says about your product, or your philosophy as an company, that 2 percent matters. Attention to detail, consistency, and polish matter in a product. They build trust. They say we’re thoughtful, thorough and will continue to support you, even if you’re not our primary user. When you come across an empty state that we decided to leave in the old style, it says that we neglect our product. We go after something new and shiny before taking care of what we’ve already built. It’s embarrassing. It’s an unkept lawn; a broken window; a pizza with all the toppings picked off. Attention to detail matters because when you show that you care about the small details, people trust you to care about the big ones.

Once we decided we were committed to creating 39 (and counting) thoughtful, and unique empty states, we had the added benefit of volume. We built ourselves a playground where we could develop and iterate on our new illustration style. It became an opportunity for every illustrator to inject their personality, drawing style and ideas into the new Shopify illustration style, and build off each other as we moved on to the next empty state. It changed the new illustration style from something that was solved by one person, and passed down, to something that was solved as a team (which, if you ask me, is it’s greatest strength). We were able to look at the how we wanted to approach each illustration individually, as well as looking at the body of work as a whole. Simultaneously thinking strategically about what we wanted to say with them collectively, while exploring the nuances how we can change our tone of voice between individual illustrations.

One of the ongoing challenges of working at Shopify, is trying to succinctly capture and articulate what our user looks like. You can’t. Our users are freakin’ snowflakes. We have 9 personas and counting—and they’re only an approximation anyway. The story of how someone became an entrepreneur—what it means to them to be an entrepreneur—is inherently unique. The empty states gave us a new angle to articulate our empathy and understanding of what it means to be an entrepreneur. Instead of trying to capture it succinctly, with a single story or a persona, it became a tapestry. Individually, each empty state a single snapshot any given entrepreneurs day-to-day; collectively the body of work illustrating the diversity—of environment, of daily tasks, of challenges, of age/gender/race/background—of entrepreneurship.

Round one:

Real talk tho, that’s a helluva lot of illustrations.

The first thing we did was create a generic empty state (although we were, like, mostly definitely pretty sure we could get through them all). This served us two fold: it gave us tangible means to find and replace every thing in the old illustration style (a first step in creating the polish we were aiming for); and it gave us the breathing room to take the time necessary to figure out how we wanted to talk about each empty state. Pressure is good, holy-shit-I-need-20-more-illustrations-by-tomorrow-where-are-they-hello-I-dont-care-what-time-zone-you’re-on is bad. We decided we’d rather do 30-something well, than all 39 rushed. It has since become a great tool to help us maintain the integrity and consistency of the illustration style across Shopify—but that’s a post for another day.

Illustration by Holly Schofield

With the generic illustration in place, we tried to identify high-impact, high-priority states first. Turns out it was kind of pointless. The first iteration of the empty states was largely about building the story, and establishing the illustration style—differentiating what illustrations we tackled first didn’t really serve us. Although, we did it anyway.

We had a baseline style already established: background, foreground, characters, colours. We knew we were drawing the details differently—her joints curve, his joints bend; realistic clothes here, generic clothes there, RYAN what did you do to his feet??—but when you’re on version 1.0, you speak in generals. Do they generally follow the same style? Do they generally feel like they came from the same place? Ship it. We have a lot of work to do. Instead, we spent most of our of time one what we were going to say; less time on how we were going to say it. As long as the metaphor is right, we can update the style later.

On demand deliveries by Erin Moncrieff
Discounts by Ryan Coleman
Pages by Meg Robichaud
Themes by Holly Schofield
Buy button by Meg Robichaud

Round two:

Speak now or forever draw noses my way

We launched Polaris with round one, patted ourselves on the back, and set straight into tearing it apart. The second iteration is about deciding how we are going to move forward together. Suddenly agreeing on how we draw feet matters, because holistically, it’s not just a minor detail, it’s a tool we use to maintain consistency across all of Shopify, and across all our illustrators.

So we did what every good designer does: we put our shit on the wall.

oh sorry we work in a basement, apparently, we don’t believe in a light source that isn’t the hunched blue glow of a laptop screen

Looking at everything at once on the wall is just shockingly useful. It gives you the opportunity to obnoxiously picky, because, like, you may as well. I wouldn’t normally say you should have 3 lines on the back of your credit card instead of 4, or you drew that with a fill but I wish you drew it with a stroke— backseat illustrator much?—but putting everything up on the wall for a holistic critique creates that space. There is no right or wrong; no his-is-better-than-hers; just hey these two are different, huh. The inconsistencies stand out clearly; the repeated elements we can use to create consistency stand out too. Some are very easy to find and address—shadow treatment, point size, holy-crap-that-is-a-lot-of-shades-of-purple. Others, like playfulness, whimsy and solemnity, are more challenging—none of them being wrong, just different. Sometimes you just have to identify that you can’t have both, pick one, and move forward.

It’s not a good use of time to go back and update the feet, exactly. No one notices or cares that we changed the hands to be 10% more organic. In the interest of creating a robust illustration guide that we can move forward with, where we make the changes just so we can track them, however, it makes sense to go back to the empty states, and be picky as hell.

Changes to empty states:
- Changed every leg that was two tone to one tone + shadows
- Changed foreground stroke to “black” & added rounded caps
- Changed shirts to white
- Deleted clouds (too whimsical)
- Added clothing details (shape; shadow; creases)
- increased 1pt details to 2 pt details
- Changed BG baseline to 6pt
- changed perspective on feet to 2 point perspective
- deleted shadows on necks
- Changed strokes to 2/4/6 px (@ 2x)
- Changed wood grain to less dense/20% opacity 2px
- changed ears to more organic; face pointed more forward
- Rounded corners on geometric shapes
- Changed proportions to more realistic
- updated hands to more realistic/organic
- probably some other stuff

After finding and updating the minor details—feet, hands, curves of joints—there was still a disparity between some of the empty states. Like, cool, they look the same, they’re drawn the same, I went back in and freakin’ removed the shoelaces, what more do you want from me? It comes down to a discrepancy in opinion from Shopify. Where is Shopify’s baseline? We can totally be jazzed about everything; and we can be cool-calm-collected too—both are in Shopify’s voice. But you can’t jump for joy in one breath, and be totally blasé the next. Make up your mind, Shopify. Who are you?

The illustrations below are at two ends of the spectrum, and we decided we wanted to land somewhere in the middle. We want a personality, but we don’t want to add to the chaos. An entrepreneur’s day is hectic enough, our neutral voice should be something stable, calming and informative, but with enough flexibility to join in celebration when necessary.

Because they both follow the same style and speak with the same voice, we had the opportunity to keep both, and just define when each tone is appropriate. Abstracting away from the character itself—because I can’t tell you what character pose to use for every. single. illustration—we looked at the story each illustration is telling. Each illustration containing a beginning, middle and end; a build-up, a climax and a calm after the story arc is complete. Instead of defining how to illustrate each character, we defined the point in the story that is appropriate to the tone, and the movement, energy or stability associated with each.

Extremely positive situation
This tone should only be used in exceptionally positive situations. Before using an extremely positive tone, be certain that the merchant will not encounter multiple illustrations using this tone in a short time period. When you appear extremely excited too often, Shopify looks disingenuous. An extremely positive tone is used to join in celebration with the merchant — they should say to the merchant: these moments don’t come very often, so take a minute to congratulate yourself.

Shopify illustration uses the following tools in extremely positive situations:
- Illustrates the climax/tension of the story
- A more saturated colour palette
- Exaggerated, energetic character poses
- Motion lines
- Confetti

Examples: First sale; launched store

Moderately positive situation
This tone can be used regularly. They are moments where we can be playful, but not overly animated. These are moments of definitively good news, but collectively lose their effect and risk taking too much attention away from the task at hand if they are too loud.

Shopify illustration uses the following tools in moderately positive situations:
- Illustrates the calm at the end of the story, or the process/build up before
- Dynamic/energetic but not exaggerated character poses
- Cool palette + one accent colour
- Motion lines

Examples: Anniversary; New feature announcement;

Neutral situation
Shopify illustration uses a neutral tone in moments of education or when the content needs to be presented plainly. It is not an announcement of a new feature, but rather an explanation of a feature that has been there all along. Literary tools (metaphor, exaggeration, juxtaposition) can still be used, but with the overall feeling of a quiet conversation.

Shopify illustration uses the following tools in neutral situations:
- Illustrates the calm at the end of the story, or the process/build up before
- Cool palette + one accent colour
- Calming, stable character poses

Examples: Empty states, illustrations pertaining to sensitive subjects (eg. money)

Negative situation
Shopify illustration does not use a negative tone, however it does encounter negative situations. These situations are treated as education opportunities. The information is illustrated literally, as an unembellished presentation of what the merchant needs to know, followed by guidance to their next steps.

Shopify illustration uses the following tools in negative situations:
- Cool palette + one accent colour
- Characters are not used in negative situations; objects only

Examples: You are not eligible for capital

To apply that to our empty states, it was suddenly easy to find the characters which were appropriate to the situation, and which were using the wrong tone of voice. Moving forward it gave us the tools to change our tone easily across all touch points of Shopify. Using what we learned in being hella picky on our empty states, can now move seamlessly from product to marketing and back again without making a single change to the actual illustration style. And hey look, that’s why we started this whole friggin’ undertaking in the first place.

From this:

To this:

I really wanted this to be the story of how we found 3–4 core elements that represent entrepreneurship, boiled them down to something simple and built them back up into an illustration style. Look but triangles mean money and circles mean opportunity, right? See what I did there? That story is a fucking sexy way to build an illustration style. Our story was not sexy. We stole from each other because we thought it worked and we weren’t sure why. We fought it out, held our ground on noses and faces and colours. We said what about this 1000 times until we could track down the piece that was bothering someone. We backwards rationalized. I hate backwards rationalizations. Oh really? Really. You thought from the beginning that hexagons represent communication? You definitely didn’t just think hexagons look cool? Get over yourself. But we backwards rationalized. We said why do we all keep coming back to plants? Is it actually just because they look cool? That ain’t gonna hold up y’all. Or is it because they are actually calming? They do actually create a sense of abundance, growth and life moving forward? Like I know you didn’t think to yourself “how can I create a sense of abundance” but also, you’re not wrong.

It was messy. Like, definitely zero amounts of sexy. Tied on my sweatpants for a long night of binge watching netflix with snacks on my belly amount of sexy. But the thing about messy, backwards rationalized, chase-what-works, ditch-what-doesn’t process, is that when you take a step back, the good work holds up. It’s not that we chase after what’s pretty (I hope), it’s that we have a good sense for what works and what doesn’t long before we can articulate it. We don’t just find what works, and what doesn’t, we figure out why. I guess it turns out it doesn’t really matter what order you do them in. Sure, you can find core elements to build off of, or you can pull elements from a finished illustration, as long as you’re putting the needs of your product first. Our process was not the sexy one I dreamed of, but in the end, the work was— and holy crap that’s something to be proud of.

And for the rest of the Shopify empty states, check ’em out here.

✌️

*Jesse wants me to remind you this is a made up number, based off real experience working with empty states, but definitely made up🙄🙄🙄

--

--