Shop Talk: Designing Lingo’s Successful Empty State

Shop Talk: Designing Lingo’s Successful Empty State

First impressions are everything, or so the experts of charisma, attraction, and success say. As designers, we tend to agree. While a first impression is certainly not all that matters in successful design, a first impression--the first time your user comes into contact with your product--certainly sets the stage, establishes expectations, and plants the seed for success (or failure). A first impression welcomes users and either encourages them to continue, bright-eyed and inspired--or turns them away, seeking alternatives. And, well, we all know what scenario we’d prefer there.

“The average app loses 77% of its daily active users within the first 3 days after install.”

Generalizations aside, the data supports the claim that first impressions are wildly important (especially when designing apps.) Recent studies suggest that the average app loses 77% of its daily active users within the first 3 days after install. Close to 80% will have been lost within 30 days.

So, why does this happen? Much of it comes down to a very important--and often overlooked--element of design: the empty state. An empty state is what a user sees when there is no data to display. That might be because the user has just signed up, they have cleared data themselves, or they are encountering an error. It’s a temporary state, and therefore easy to become an afterthought.

“ An empty state provides visual cues, prompts and educates, encourages its users and invites engagement ...”

Designers give immense thought to the function of their app in motion: how users will interact with it, how they will populate it with information, how it will function seamlessly and as intended (goals!), and so on. Meanwhile, what the product looks like before any of this even begins becomes resigned to the back-burner. But here’s the thing: it shouldn’t be this way! An app’s empty state is ripe with potential. Designed well, an empty state provides visual cues, prompts and educates, encourages its users and invites engagement.

It’s from this perspective that we set out to redesign the empty states of Lingo, Noun Project’s new visual asset manager. We chat with Skye Selbiger, product designer tasked with the important job, to learn more about the process and approach. Read on.

Hi Skye! Can you describe the service Lingo provides quickly?

At its simplest, Lingo is a visual asset manager. It acts as a shared visual library designed for teams to manage, organize, and use their visual content. You’re able to store photos, illustrations, icons, GIFs, UI elements, colors, you name it, and then distribute them to everyone in your organization, which empowers creation and ensures consistency.

The way we currently browse, find, and navigate to content on our computers is a bit of a trudge: diving through nested folders, reading names, clicking through two, three, four or more folders until we find the item we are looking for. Or, if we know the name, we search for it. With Lingo, we put the visuals front and center, making it easy to browse, find, and implement whatever assets you need, whenever you need them.

Why was the empty state so important for Lingo?

The empty state is so important for Lingo because without any content in the app, we really can't provide any value or service to the user. We didn't want to make the user jump through multiple hoops just so they could add their visual assets in and get to work. So, making this initial stage of adding their own content as easy as possible from the very beginning without anything blocking them was incredibly important for us.

What do you think makes for a successful empty state? What do you want to include, what do you need to consider?

Generally what makes a successful empty state is one that has a clear call to action for what the user needs to do in order to build from that empty state. There should be a clear understanding of why that current view is empty--whether they start there or arrive there. And then, it should be intuitive what they should do next. There needs to be very clear, concise actions and directions that you want the user to take. Also, an empty state does provide a time to be playful and insert a little of your brand’s personality.

In general, people tend to feel uncomfortable with this idea of “empty”--where do you begin? What do you do? The goal was to take an awkward blank slate and make it friendly and inviting.

What did you consider when setting out to design Lingo’s empty state?

In the original empty state, there was nothing telling you exactly what you were adding. Designing this new version, we wanted to extend the visual language of Lingo from the web into the app and thus make it a more seamless experience and story from a visual standpoint.

Also, we had just recently added color to Lingo’s capabilities, so we wanted users to know that!

In general, we wanted Lingo to feel friendly, light, accessible, and encouraging. We made a few tactical choices to evoke that feeling -- for example, we used rounded corners in the design, and provided ample white space, rather than blank space, to make the environment feel clean and approachable. We also decided to use red (a color often perceived as strong and aggressive) in a value that actually feels soft, upbeat, and friendly.

Something else to consider was the fact that Lingo has different permission levels that dictate what users have access to. We needed to be able to guide users through the app and not have them be confused or turned off if they encountered something they couldn’t actually use.

How did you try to inject the personality of Lingo into the empty state?

Beyond the iconography, the language is more conversational. Lingo is a service born from a need we, as designers, all felt! We want the fact that there were people behind the creation of Lingo to be obvious.

Can you speak to the process you went through? Different iterations and versions?

Getting started, I evaluated Lingo’s initial empty state and looked closely at what it was doing well and where it could be improved. We were being somewhat clear on what we wanted the user to do (add assets). However, there was no obvious indicator as to where you could drop in assets, or what kind of assets you could drop in. I also felt that we used the right words, but the overall aesthetic was dry and uninviting. It wasn’t a clear extension of our brand and we missed an opportunity to bring Lingo’s personable tone into a place that might otherwise feel intimidating.

After evaluating the original designs, I set out to design Lingo’s new empty state. I knew that we wanted to do a few things differently: 1) make it feel inviting; 2) bring more of our own visual language into the app; 3) clearly communicate what we wanted the user to do; and, 4) make sure our users understood what was going to happen once they did.

 

From some research I had done, I knew that often, the first time a user encounters an empty state (during sign up and onboarding) it looks different than when a user clears their content themselves as they’re using the app. With this in mind, I saw there was an opportunity to make a first impression and inject our brand’s personality and visual language in a way that we might not be able to otherwise.

I started off trying to communicate what the user would see in the “team overview” of the app, while also communicating why they were seeing an empty state and what that view in the app will look and function like when they have added their content.

However, as I explored further, I realized that there was too much copy and that we were not hitting on the original goals of making Lingo feel more inviting while clearly communicating what we wanted the user to do. The copy was too verbose and the visuals added confusion rather than clarification.

Realizing this, I decided to move towards a much simpler design that had clear CTAs and as little copy as possible, while still adding a few bits of Lingo’s friendly tone. While moving to this simplified version, I was able to bring in some of the visual language that we use on the Lingo website (the asset & drop illustrations, in particular).

After talking with our product team, I realized that in the app, there isn’t a clear way of differentiating between a brand new team and an old team that never added anything. Alongside how the empty state would translate across personal, pro, and team users with varying permission levels, this made things a little more challenging from a design and language perspective.

Now using the new simplified version that hit on all the key points and goals, I also worked to avoid the use of first impression language (“Welcome” or “Start doing…”) to make it more versatile and universal.

For the sake of cohesive storytelling, we wanted to avoid using different designs for each of the differing permission states. We settled on these designs because they could be easily translated to the possible states, allowing us to tell an aligned and consistent visual story.

Can you describe the empty state design you finally landed on, and why?

The empty state we ultimately landed on was a clear winner. We were able to hit on all of the key goals that we originally set out to hit, as well create a simple design that could be translated into all states regardless of permission level. We brought in our visual language from the homepage that includes the asset & drop illustrations and made it feel inviting by using the regular weight Brandon font instead of Bold, giving it a less imposing tone. We clearly communicated the options the user had available to them, where the content was going to go, and what they could add. We injected some of our brand’s tone to make it feel more conversational and personable. The empty “kit” design could also be used for empty “group” designs, which again allowed us to continue telling that consistent story visually.

Did the fact that Lingo is a tool designed for designers impact the process in any way?

This is an interesting question. I don’t think I would have designed it any differently if it was just for designers (or, conversely, just for brand managers, for example). We needed the design to allow for scaling of the product. Lingo is meant to be used by anyone inside of an organization that is interacting with the design! It’s intended for use at all skill levels and for all manner of job title, so it was important to strive for clarity and simplicity first and foremost.

Thanks, Skye! Learn more about how Lingo can help empower and streamline your creative process.

Graphic Design on the Campaign Trail: Decoding Clinton and Trump’s Visual Language

Graphic Design on the Campaign Trail: Decoding Clinton and Trump’s Visual Language

Visual Explorations - Lumosity's Lingo

Visual Explorations - Lumosity's Lingo