{"id":2943,"date":"2016-09-06T18:30:23","date_gmt":"2016-09-06T17:30:23","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=2943"},"modified":"2021-08-05T12:38:37","modified_gmt":"2021-08-05T11:38:37","slug":"empty-state-most-overlooked-aspect-of-ux-design","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/","title":{"rendered":"The Most Overlooked Aspect Of UX Design Could Be The Most Important"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I'm not much of a designer. In fact, I\u2019m awful at it. I am, however, interested in how it\u2019s done. I read and write plenty about <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.process.st\/2015\/09\/concierge-onboarding\/\" target=\"_blank\" rel=\"noopener noreferrer\">customer success<\/a>; along the way, (somehow) I found <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/SamuelHulick\" target=\"_blank\" rel=\"noopener noreferrer\">Samuel Hulick\u2019s<\/a> site UserOnboard.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">His detailed descriptions of the user onboarding process in popular apps give designers an idea about how some of the most successful apps in the world keep you from quitting, becoming frustrated or getting no value. It leads by example.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After being introduced to Samuel\u2019s content, I came across a tweet of his linking to the site <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/emptystat.es\/\" target=\"_blank\" rel=\"noopener noreferrer\">emptystat.es<\/a>, a collection of empty state screenshots that\u2019s been taking user submissions since 2013.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With my brain still whirring from writing about user onboarding, and equipped with <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.process.st\/writing-workflow\/\" target=\"_blank\" rel=\"noopener noreferrer\">Evernote<\/a>, I set about collecting material to write a post about what has been called the most overlooked aspect of design.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What Are Empty States?<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">An empty state is what the user sees when there is no data to display on the screen. This could be because:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>The user has only just signed up.<\/li>\n<li>The user has cleared the data themselves.<\/li>\n<li>There\u2019s been an error.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We\u2019ll quickly go through some examples of these three different kinds before taking a deeper look into how empty states can help increase retention and ensure users get the most out of your app.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Gmail\u2019s New Sign-Up Empty State<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Gmail-Onboarding.png\" alt=\"Gmail Onboarding\" width=\"1024\" height=\"616\" class=\"aligncenter size-full wp-image-2949\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Gmail-Onboarding.png 1024w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Gmail-Onboarding-600x361.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Gmail-Onboarding-768x462.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.useronboard.com\/how-gmail-onboards-new-users\/\" target=\"_blank\" rel=\"noopener noreferrer\">way Gmail onboards new users<\/a> is great, but what happens when you (eventually) end up in the app itself? Well, it gives you further information in the same format you\u2019ll be seeing it in the future: emails. It also sends instructions on how you can get more value out of the app, all designed to increase user success (and subsequently, retention).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Process Street\u2019s Zero Data State<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Process-Street\u2019s-Zero-Data-State-.png\" alt=\"Process Street\u2019s Zero Data State\" width=\"989\" height=\"761\" class=\"aligncenter size-full wp-image-2950\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Process-Street\u2019s-Zero-Data-State-.png 989w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Process-Street\u2019s-Zero-Data-State--600x462.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Process-Street\u2019s-Zero-Data-State--768x591.png 768w\" sizes=\"auto, (max-width: 989px) 100vw, 989px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Like a lot of apps that rely on the user creating their own content, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.process.st\/\" target=\"_blank\" rel=\"noopener noreferrer\">Process Street\u2019s<\/a> zero data state tells you how you can populate the app. Templates are the core of Process Street, and without them, there\u2019d be no checklists, no need for folders, tags or\u2026 you get the idea.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Eventbrite\u2019s Error Page<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Eventbrite\u2019s-Error-Page-.jpeg\" alt=\"Eventbrite\u2019s Error Page\" width=\"736\" height=\"552\" class=\"aligncenter size-full wp-image-2951\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Eventbrite\u2019s-Error-Page-.jpeg 736w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Eventbrite\u2019s-Error-Page--600x450.jpeg 600w\" sizes=\"auto, (max-width: 736px) 100vw, 736px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Even though it\u2019s set in a desert wasteland, this empty state error message is inviting, helpful and full of life. Unlike, <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/fortune.com\/2015\/07\/30\/windows-10-error-message-something-happened\/\" target=\"_blank\" rel=\"noopener noreferrer\">some error messages<\/a>, it tells you what you should do next. Nothing in your app should be a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxmag.com\/articles\/usability-tip-no-dead-ends-please\" target=\"_blank\" rel=\"noopener noreferrer\">dead-end<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The What, Why And How Of Empty States<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A useful empty state tells you what<\/em> it\u2019s for, <em>why<\/em> you\u2019re seeing it, and <em>how<\/em> you can fill it up. There are more elements that we\u2019ll look at later, but an empty state should be useful first, amazing second.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\n\"A useful empty state tells you what it\u2019s for, why you\u2019re seeing it, and how you can fill it up.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When designing, think of those three questions (what, why and how) as the formula for re-engaging your user, but also keep in mind that it\u2019s the bare minimum requirement for an empty state.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Getting The User\u2019s Attention With Empty States<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is a big one. It\u2019s the most efficient way of continuing your onboarding process\u2019 good work and keeping your valuable users sticking around. As I said at the start, empty states can and should be used to (re)engage your users and help them get success.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">How can empty states be used to get attention and drive engagement? Well, what\u2019s the first thing you\u2019d be thinking when you land here?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Empty-State-No-Trips.png\" alt=\"Empty State - No Trips\" width=\"518\" height=\"543\" class=\"aligncenter size-full wp-image-2952\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Very empty. No trips. This tells me <em>what<\/em> the screen is for, but nothing else.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Empty-State-Your-Trips.png\" alt=\"Empty State - Your Trips\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2953\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Empty-State-Your-Trips.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Empty-State-Your-Trips-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Okay, so that\u2019s <em>why<\/em> it\u2019s empty, but the fact I\u2019m here probably shows I don\u2019t know <em>how<\/em> to add a trip.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Empty-State-Start-Exploring.png\" alt=\"Empty State - Start Exploring\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2954\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Empty-State-Start-Exploring.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Empty-State-Start-Exploring-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Bingo. This obvious button and fitting CTA copy tells me <em>how<\/em> to solve my problem. If I just saw that I had no trips, it\u2019d feel like the app was being deliberately unhelpful.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Let\u2019s do this again with another app.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Zero-Data-Zero-Help.png\" alt=\"Zero Data - Zero Help\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2955\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Zero-Data-Zero-Help.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Zero-Data-Zero-Help-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Zero data and zero help. It tells me <em>what<\/em> the page is for\u200a\u2014\u200adisplaying selected profiles\u200a\u2014\u200abut nothing else.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/No-Data-No-Selected-Profiles.png\" alt=\"No Data - No Selected Profiles\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2956\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/No-Data-No-Selected-Profiles.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/No-Data-No-Selected-Profiles-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now I know <em>why<\/em> I\u2019m here, but not how to solve my problem.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/No-Selected-Profile-Select-Profile.png\" alt=\"No Selected Profile - Select Profile\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2957\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/No-Selected-Profile-Select-Profile.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/No-Selected-Profile-Select-Profile-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Is it just me, or is this app being sort of rude? Anyway, helpfulness is what we like. Now we know <em>how<\/em> to fix our problem and fill the empty state with valuable data. Both of these examples follow the same <em>what<\/em>, <em>why<\/em>, <em>how<\/em> formula.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Personality And Benefits Are Icing On The State<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are two more things that there\u2019s room for in empty states, and that is <em>personality<\/em> and <em>benefits<\/em>. Personality makes your app memorable and pleasurable to use. Benefits help communicate why your app is useful to the user, which increases retention and solves user onboarding issues.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"There are two more things that there\u2019s room for in empty states, and that is personality and benefits.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Khaylo Workout<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Khaylo-Workout-Empty-State.png\" alt=\"Khaylo Workout - Empty State\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2958\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Khaylo-Workout-Empty-State.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Khaylo-Workout-Empty-State-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This tells you <em>what<\/em> it is (an empty Challenge screen), <em>why<\/em> it\u2019s there (because you haven\u2019t challenged any friends) and <em>how<\/em> to fix it (tap the + icon). But that\u2019s not all. This empty state communicates the app\u2019s personality with aesthetically pleasing graphics and conversational language <em>and<\/em> tells you the benefits of challenging others.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Let\u2019s take a look at another great empty state that ticks all the boxes.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Beamly<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Beamly-Empty-State.png\" alt=\"Beamly - Empty State\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2959\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Beamly-Empty-State.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Beamly-Empty-State-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I\u2019ve never used Beamly, but this empty state was so helpful I know exactly what the app does. On top of the three basic components (<em>what, why, how<\/em>), it sneaks in a fun remark and explains the core value of the app to new users or returning users that need a handy reminder.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Working Brand Personality Into Empty States<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Empty states are an excellent opportunity to make a human connection with your users and get across the personality of your app. Just like how web designers like to <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.creativebloq.com\/web-design\/best-404-pages-812505\" target=\"_blank\" rel=\"noopener noreferrer\">get creative with 404 pages<\/a>, empty states are no different. Emotional-design guru <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/aarron?lang=en\" target=\"_blank\" rel=\"noopener noreferrer\">Aaron Walter<\/a> turns to the hierarchy of human needs for an <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/speakerdeck.com\/aarron\/learning-to-love-humans-emotional-interface-design\" target=\"_blank\" rel=\"noopener noreferrer\">explanation<\/a> of what makes an app\u2019s user experience successful; while your app should be functional, reliable and usable, it also should be <em>pleasurable<\/em>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Making-User-Experiences-Pleasureable-.png\" alt=\"Making User Experiences Pleasurable\" width=\"680\" height=\"508\" class=\"aligncenter size-full wp-image-2960\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Making-User-Experiences-Pleasureable-.png 680w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Making-User-Experiences-Pleasureable--600x448.png 600w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">According to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.smashingmagazine.com\/2012\/07\/the-personality-layer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Smashing Magazine\u2019s<\/a> <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/s2imon\" target=\"_blank\" rel=\"noopener noreferrer\">Simon Schmid<\/a>, there are a lot of ways to make a user\u2019s experience pleasurable. I\u2019ve narrowed down the list he made to the most relevant kinds of pleasure you can offer with empty states:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Using Emotion In Empty States<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Going back to the topic of inboxes, I noticed something interesting about the attitudes of different empty states; that is, how some inboxes congratulate you for making it all the way there while other apps encourage you to fill it up.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What kind of feeling your empty state conveys depends on the purpose of your app. Hangouts wants you to add content, whereas Outlook (with its Focused inbox, designed to help you read everything important) wants you to remove it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Hangouts<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Hangouts-Empty-State.png\" alt=\"Hangouts Empty State\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2961\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Hangouts-Empty-State.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Hangouts-Empty-State-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whatever this thing is, it\u2019s sad. Is that an <em>incentive<\/em> for the user to get invites on Hangouts? Design works in mysterious ways\u2026<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Outlook<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Inbox-Empty-State.png\" alt=\"Inbox Empty State\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2962\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Inbox-Empty-State.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Inbox-Empty-State-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You\u2019ve achieved success with the feature. Definite <em>positivity<\/em>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Surprising Users With Empty States<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s probably fair to say that most error messages come as a surprise to users. Why not use this surprise to delight them, instead of showing them something that feels like they\u2019re not getting success out the app? After all, an error message isn\u2019t what you want your user to be seeing too often, so taking a fun attitude toward it when it does happen could help lighten the mood.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Cognito Brain Training<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Cognito-Brain-Training-Empty-State.png\" alt=\"Cognito Brain Training - Empty State\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2963\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Cognito-Brain-Training-Empty-State.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Cognito-Brain-Training-Empty-State-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I\u2019m always surprised to see a shark, regardless of the context.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Timehop<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Timehop-Empty-State.png\" alt=\"Timehop - Empty State\" width=\"648\" height=\"680\" class=\"aligncenter size-full wp-image-2964\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Timehop-Empty-State.png 648w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Timehop-Empty-State-572x600.png 572w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you\u2019re going to surprise me by saying my Internet connection\u2019s down, at least do it in a cool way, like with time travel and stuff.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Conveying Benefits With Empty States<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Finally, let\u2019s leave the realm of design and delve in to more comfortable territory for me: copywriting.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The central focus of your first-use empty states should be (re)selling your users on the benefits of your app. Your user onboarding process won\u2019t always go as smoothly as you planned, and it might be that after signing up, your app sits as a half-forgotten icon on the home screen for days, weeks or months before being revisited. A user who stopped using your app during or after onboarding is at the biggest risk of abandoning it for good, so make every effort to:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Remind the user what your app does.<\/li>\n<li>Tell them why they should bother with it.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In other words, the old copywriting axiom of <em>sell with benefits, support with features<\/em>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Note: If you want a quick overview of writing clean copy, check out another article of mine on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.process.st\/2015\/07\/business-writing-tips\/\" target=\"_blank\" rel=\"noopener noreferrer\">business writing tips<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now, let\u2019s take a look at some great examples.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Basecamp\u2019s Projects\u2019 Zero Data State<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Basecamp-Empty-Data.png\" alt=\"Basecamp - Empty Data\" width=\"680\" height=\"281\" class=\"aligncenter size-full wp-image-2965\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Basecamp-Empty-Data.png 680w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Basecamp-Empty-Data-600x248.png 600w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I love it when an app tells me what to do, how to do it and why I should care.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Dropbox\u2019s Team Zero Data State<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2016\/09\/Dropbox-Empty-Data.png\" alt=\"Dropbox - Empty Data\" width=\"680\" height=\"518\" class=\"aligncenter size-full wp-image-2966\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Dropbox-Empty-Data.png 680w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Dropbox-Empty-Data-600x457.png 600w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Dropbox\u2019s copywriters are so slick. I have no use for this feature, but I did it anyway just to get more material for my swipe file.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What Are The Key Takeaways For Empty-State Design?<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Because you made it all the way to the end, you get a special reward\u200a\u2014\u200aa break from my rambling and a clear explanation of what I found while tearing through as many empty states as I could get my hands on. To recap, the basic questions an empty state should answer are:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>What is this screen?<\/li>\n<li>Why am I seeing it?<\/li>\n<li>How can I fix this problem?<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">On top of this, you should aim to:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Communicate personality. Make your app a joy to use and connect feelings with features.<\/li>\n<li>Explain the benefits. This is critical for your first-use empty states so your users know why they should care.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here\u2019s where I found the empty states for this article: <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/emptystat.es\/\" target=\"_blank\" rel=\"noopener noreferrer\">emptystat.es<\/a>; <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.pinterest.com\/statanasova\/ux-empty-states\/\" target=\"_blank\" rel=\"noopener noreferrer\">UX: Empty States<\/a>; <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.pinterest.com\/romanyakimovich\/ui-empty-states\/\" target=\"_blank\" rel=\"noopener noreferrer\">UI Empty States<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">While I\u2019m still on the empty-states kick, if anyone has some particularly good ones, I\u2019d love to see them. And thanks for sticking with me while I enthused.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/techcrunch.com\/2015\/11\/22\/the-most-overlooked-aspect-of-ux-design-could-be-the-most-important\/\" target=\"_blank\" rel=\"noopener noreferrer\">Techcrunch.com<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.prototypr.io\/the-most-overlooked-aspect-of-ux-design-could-be-the-most-important-f1df7a5729e9#.3b1vy4xt3\" target=\"_blank\" rel=\"noopener noreferrer\">Benjamin's Medium profile<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m not much of a designer. In fact, I\u2019m awful at it. I am, however, interested in how it\u2019s done. I read and write plenty about customer success; along the way, (somehow) I found Samuel Hulick\u2019s site UserOnboard. His detailed descriptions of the user onboarding process in popular apps give designers an idea about how some of the most successful&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":31,"featured_media":2967,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[499],"tags":[],"class_list":["post-2943","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"Benjamin takes us through the what, why and how used to provide great empty state \/ empty data designs screens. Looking at great examples in apps today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Most Overlooked Aspect Of UX Design - Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Benjamin takes us through the what, why and how used to provide great empty state \/ empty data designs screens. Looking at great examples in apps today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-06T17:30:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-05T11:38:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Empty-States.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1431\" \/>\n\t<meta property=\"og:image:height\" content=\"740\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"7 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/09\/Empty-States.png\",\"width\":1431,\"height\":740,\"caption\":\"Empty State\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/\",\"name\":\"The Most Overlooked Aspect Of UX Design - Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/#primaryimage\"},\"datePublished\":\"2016-09-06T17:30:23+00:00\",\"dateModified\":\"2021-08-05T11:38:37+00:00\",\"description\":\"Benjamin takes us through the what, why and how used to provide great empty state \/ empty data designs screens. Looking at great examples in apps today.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/37e4f4c76136545486666ac1c174ff5b\"},\"headline\":\"The Most Overlooked Aspect Of UX Design Could Be The Most Important\",\"datePublished\":\"2016-09-06T17:30:23+00:00\",\"dateModified\":\"2021-08-05T11:38:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/#primaryimage\"},\"articleSection\":\"User Experience\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/empty-state-most-overlooked-aspect-of-ux-design\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/37e4f4c76136545486666ac1c174ff5b\",\"name\":\"Benjamin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/13b4f55c4b3a2e89b3fd6cfe6a4b7e143c8de443bfe22e9e75149993da90511d?s=96&d=mm&r=g\",\"caption\":\"Benjamin\"},\"description\":\"Content creator for @processstreet and Writerzone.net. Blogs at benjbrandall.com. Appears on @techcrunch &amp; @thenextweb. Follow me on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/2943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=2943"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/2943\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/2967"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=2943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=2943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=2943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}