Alive Design vs. Static Design: Mobile Experience for the Future
As someone who has worked on mobile web and mobile apps, and in product management in general for the last 14 years at companies such as Zynga, Tatcha, Playforge Games, Match.com, and other startups, I’ve been noodling on this trend I call “Alive Design.”
It’s the wave of the future for GOOD mobile experiences — who wouldn’t want that? It translates to better engagement and retention, and if designed well, ultimately better monetization. I see a good number of apps that could benefit from these learnings. Hence I decided to put this out there.
Using the Alive Design framework, I will walk through learnings being pioneered by top mobile apps like Pinterest, Instagram, YouCam Makeup, Snapchat, Twitter, and Facebook, that illustrate how to create more engaging, dynamic experiences around discovery and social connection by bringing “aliveness” to the mobile design. For mobile apps to stay innovative and relevant with consumers in today’s market, static design won’t cut it anymore.
What is the premise of Alive Design?
Alive Design is designing through the lens of giving you the feeling that something is alive, fresh, new, and tailored to you.
Similar to how you interact with a friend in real life — every time your conversation is different, it affects your mood, and the conversation is based on knowing you as a person. Alive Design is emotive and aims to create a meaningful connection. By humanizing your product, you provide personality and ambiance for your product, as well as a big-picture approach — from the holistic design of the experience, to the small yet meaningful and emotive interactions, like emojis.
Even Harry Potter has Alive Design — you may recall The Daily Prophet, which is a living newspaper where people are moving around in the images.
On a philosophical level, Alive Design is about being in the present moment, and creating an experience about what’s going on right now, not what was going on yesterday or two hours ago, not what’s going on tomorrow. It’s about real-time experience — I like to think about it as being immersed in the world as in real life, living in the moment — whether it’s on Facebook, Instagram, Snapchat, Pinterest, or in person.
The main thing about Alive Design is that it FEELS alive and fresh.
“I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.”
— Maya Angelou
Who Does It Well and What Can We Learn From It
Emotive design isn’t a new concept, so what does this mean in terms of native mobile apps?
Apps that are pushing the envelope in the Alive Design arena are: Pinterest, Instagram, YouCam Makeup, Snapchat, Twitter, and Facebook.
There are 2.2 million iOS apps in the Apple App Store alone and I’m only pointing to a handful of examples. For the purposes of this post, my examples are based on the iOS versions of these mobile apps.
What are traits of GOOD Alive Design?
The framework below is intentionally abstract to allow room for creativity in how others might apply it to their products, but I will walk through inspiring examples to illustrate the principles of the Alive Design approach.
#1: Alive Design traits are upfront in the main experience!
Two key areas for engagement in mobile design are the Home screen experience and the Discovery screen experience.
Different apps have different names for what I’m referring to as the “Discovery screen” experience (e.g. “Search,” “Explore,” “Stories,” “Trending,” etc.) but essentially it is the experience in the app that is devoted to helping the user discover new content or connections that they would find useful or interesting. The Discovery screen is typically given prominence in the main navigation as well.
Top mobile apps with inspiring Alive Design traits in the main experience in BOTH key areas: Pinterest, Instagram, YouCam Makeup, Snapchat, Twitter.
The mobile experiences for Facebook and LinkedIn do not feature the Discovery screen experience but they do have inspiring Alive Design in their Home screen experiences. Likewise, Uber and Lyft are great examples of Alive Design in the Home screen experience, albeit on a smaller scale (to be discussed in point #3 “Aliveness in Motion” below).
#2: Different and new content each time, in mobile time.
This doesn’t necessarily have to be new content as in the most recent content, as long as it’s presented fresh to the customer.
Quora does a good job of surfacing existing interesting new content that might have been written months ago but it’s still relevant, intriguing, and fresh to the user.
LinkedIn is another great example of re-purposing and surfacing existing content that is interesting and could be useful to you. Granted, LinkedIn had to get the good content first — through their Pulse acquisition, encouraging Influencers to write posts, and creating a publishing platform for anyone on LinkedIn to write articles. Over the years, LinkedIn has become better at leveraging and surfacing social activity and social news that you might be interested in.
A pronounced trend is that the content is fresh in mobile time. The expected gratification time on mobile is very short, sometimes instant or as in-the-moment as you can get. For some apps, this means fresh content upon manual refresh, for others it means upon automatic refresh. New content only every time you open the app isn’t good enough anymore. It may seem obvious from the common mental model established by the speed of updates on our home page feeds on Facebook, Twitter, Instagram, or LinkedIn but not every app has calibrated its aliveness in this way. Some apps don’t do manual or automatic refresh at all.
In addition to the Home screen experience, the inspiring apps also show fresh content upon refresh in their Discovery screen as well— which intuitively makes sense as it lends to browsing and stumbling upon things you might find interesting if the first lineup of content doesn’t appeal to you.
These are just some tactical examples but as to the underlying question as to WHY — it makes the community feel alive and kickin’, like people are still actually on the app, that the app is not a ghost town and it’s not dead.
#3: Aliveness in motion.
“Aliveness in motion” adds the most emotive aspect of Alive Design. Motion as in physical movement — animated GIFs and autoplay videos, for example. That’s why people love sending around cat animated GIFs — it makes you smile and gets a good laugh.
The inspiring mobile apps have captured this essence, in this trend towards autoplay videos (as in the videos start playing right on screen without the user having to press “Play”). The most optimal use cases are still being figured out, but you can see these apps experimenting with the best ways to use autoplay video in the mobile experience.
Pinterest, Instagram, and YouCam Makeup are using autoplay videos in creative interesting ways in this realm.
Pinterest’s iOS app shows autoplay videos in your home feed. One of the more delightful implementations is a pin that serves as a scroll-activated animated GIF — as you scroll down your mobile screen, the images moved in animation, like an old-school picture flipbook.
This autoplay video trend is particularly interesting to me since at Tatcha last year, we launched autoplay videos on desktop web but were not able to do autoplay on mobile web due to technical limitations with YouTube on iOS (iPhones and iPads) and we used YouTube platform to host our Tatcha.com videos. Pinterest launched their own native video platform on iOS in November 2016 — hence the new autoplay videos (though YouTube videos uploaded to Pinterest do not autoplay).
At Tatcha, we received great feedback on the autoplay video feature. When you landed on a product page, a short ~10 second video clip would automatically play as you were browsing and reading about the product. Our intent was to more quickly surface “the good stuff,” e.g. show the texture of our skincare products, especially since our products such as the rice enzyme powder are more complex and not as well known in the U.S. market.
The consumer market might even already expect this level of aliveness on mobile at this rate. We’ve already been seeing this trend with autoplay videos in our Instagram, Facebook, and Twitter feeds (and support for animated GIFs with the latter two). When I tested our Tatcha autoplay video feature with my mom, her response was basically “Yeah that’s obvious. Everyone loves videos!”
To take an example outside of mobile apps — my mom is a real estate broker and explained that video slideshows are a critical part of online housing listings nowadays, especially in a down market where sellers are not getting offers left and right. Videos “walk you through” the house and give a sense of what it’s like to be there in person. And these aren’t even fancy videos — it’s just an animated slideshow of photos that give the FEELING of walking through the house. Static photos don’t cut it anymore (unless it’s a hot real estate market, in which case the property sells itself).
Instagram creatively uses autoplay video in their Discovery screen experience (sparingly in just a few places) to call out “Videos You Might Like” but it also just adds to the aliveness of the page even if you don’t tap on anything.
An inspiring example off the beaten path is YouCam Makeup. You may not have heard of YouCam Makeup but it has over 160 million downloads on iOS and Android and I was impressed by the depth of their community design in the app. YouCam Makeup also uses the autoplay video and animated GIF effect sparingly but creatively — to call out Live Shows in their Discovery screen, and even in their navigation menu! The aliveness adds more fun and personality, as well as draws attention to their daily live shows feature.
The purpose of aliveness in motion is two-fold: it adds flavor to the moment but it also makes for more efficient usability. It’s more efficient to see that autoplay video while scrolling down your Instagram feed without having to interrupt the main flow of swiping and skimming down your feed. You still get the essence of being in that passing moment, of say being by the ocean overlooking the waves with your friend.
Aliveness in motion doesn’t have to be video or animated GIFs either! For example when you open the Uber or Lyft apps as a rider, you see these little cars driving around on the map. It’s alive and in the moment! Once you’re matched with a driver, you see a car in that car’s actual color driving towards you on the map. Could they live without this in the design? Probably. But does it make it more personal and more alive? YES.
I look forward to seeing what other creativity and innovation manifests in this arena. We’re only at the beginning of aliveness in motion on native mobile apps.
#4: Aliveness in UX Interactions.
The best Alive Design apps reinforce aliveness in the UX interactions by reacting to your actions and guessing what suits you better. It’s like a friend who’s listening — humanizing the interactions with compassion.
A familiar example that we all know is autocomplete when you’re using say Google search, and the suggested search queries are changing dynamically as you type (and ideally more accurately guessing what you’re looking for).
There was a time not too long ago when I only occasionally opened my LinkedIn mobile app — to add someone I met at an event or perhaps to look up something I was talking about in the moment. However now LinkedIn has cultivated what could even be considered a daily habit with their Alive Design, partly due to point #2 above (“Different and new content each time, in mobile time”) but also in aliveness in their UX interactions.
This includes having designed a notifications system that reinforces training this habit, in a natural way that makes sense in the daily experience. LinkedIn does a great job effectively using iOS badges (the number in the little red circle on the app icon on your iPhone home screen indicating how many notifications you have in the app). But more importantly, this is driven by a designed purpose for daily notifications — about activity within your network, such as your connections changing jobs or publishing a new post, or people viewing your profile. On top of that — even more effective for cultivating a daily habit are the notifications about new news in your LinkedIn feed, which is populated from a much wider and more interesting pool of content.
Another example of Aliveness in UX interactions: As you’re looking at your LinkedIn home screen feed, there is a “New Posts” cue that invites you to tap the Home button or scroll to reveal more — simple interactions to refresh the feed with new posts.
Sometimes the “New Posts” cue is already there when you open the app — a cadence that is wisely tailored to mobile time. The immediacy and real-time in-the-moment-ness is an expectation as people check their apps on the go, and sometimes only take a glimpse for a few minutes while they’re waiting, in transit, or multitasking. Twitter and Facebook also have similar “new posts” cues.
Some apps also allow you to manually refresh the screen by swiping down to “pull down” on the screen with your finger — but the most inspiring examples proactively add aliveness with UX like the “New Posts” cue, which trains the mind that there is always new and different content, that this community is ALIVE. I bring this up because other apps could be leveraging this type of alive design but don’t have design elements like the “New Posts” cue or manual refresh capability.
For aliveness in native mobile UX interactions, I like looking at Pinterest and Snapchat for inspiration, especially for innovation with native mobile gestures.
The Pinterest app knows when you’ve stopped scrolling down your feed and only then the menu buttons on each pin (each item) change from being almost not visible to visibly prominent. It feels alive, like it knows what you’re doing and it’s reacting to that. The dynamic UX lessens the clutter and allows for maximal enjoyment of the aspirational photos and videos as you’re scrolling along feeling inspired.
Another example is one of Pinterest’s main native mobile gestures:
To do something with a pin in your feed, you press and hold down the pin menu button and drag your finger over to the other menu buttons (mobile equivalent of hover state on desktop) which give visual feedback as you drag your finger over them. The UX just visually looks alive as you’re using it.
Snapchat is likewise inspiring in their innovation with new native mobile gestures. I admire their creativity in thinking way outside the box (and their ability to handily get people to adopt it) though I also find their usability not as accessible to a wider audience. Josh Elman discusses how this could be by design in a great post about Snapchat’s Shareable Design vs. the predominant typical approach of Intuitive Design. Anyway people love Snapchat so much they clearly find a way to figure it out.
Snapchat’s core product functionality is inherently Alive Design by default since it’s about sending snaps in the moment to your friends, so that part is not necessarily comparable learnings for other apps.
However, what is interesting to me is the Alive Design instilled beyond that. Snapchat doesn’t just leave the main product experience at the default plain boring level. They are innovative in the aliveness in UX interactions throughout the main product experience with Snapchat Lenses and Geofilters, which are alive by design — the Lenses change in real time with your face using augmented reality animated overlays and Geofilters change based on your location.
The availability of certain Lenses and Geofilters is also as fleeting and in-the-moment, with the Lenses lineup changing on a daily basis and Community Geofilters changing depending on say what neighborhood you’re in or which businesses are sponsoring On-Demand Geofilters for an event or for a limited time.
There is also Alive Design in the usability of these features (granted they are obscure to find) — you swipe in Lenses or Geofilters from offscreen in the moment when you would need it but otherwise it is not accessible.
These are merely a few examples to illustrate what I mean by “aliveness in UX interactions” — the actual implementation depends on the holistic view of your product’s design as well as the goals and personality of each app, not to mention the many many nuances and iterations that come with actual execution. These are just some seeds that might help with team brainstorming.
#5: Personalization (for real, not the buzzword).
Personalization is like advanced level Alive Design and would take up its own entire post so I won’t delve too deeply here. The essence is about “knowing me as a person.” In human words, it’s what happens in normal relationship building, just powered by data and tech. Feeling like you’re genuinely known and truly understood for who you are is what fuels authentic, deeper human connection.
“I define connection as the energy that exists between people when they feel seen, heard, and valued; when they can give and receive without judgment; and when they derive sustenance and strength from the relationship.”
— Brene Brown
It’s what any savvy business owner does intuitively in the real world: “What can I do to serve my customers better and make them feel special?” They know your name, they ask about your family, they remember what you like to order or buy, they might surprise and delight you with an extra freebie for being a special customer, and they make suggestions that make you think they really remember you and know you as a person. It’s easy to forget about the human element and get bogged down in all the technology and buzzword fanfare.
In tech products, your app is your personal advisor who knows you well and is constantly looking out for you and making your life better — like telling you inspirational quotes when you need it, finding the new hole-in-the-wall restaurant they know you would like, getting you that Hillary book they know you would be excited about, or giving you a heads up about a protest they know you would want to go to and five other friends are going.
This Racked article captures it well in how YouCam Makeup embodies the principles of Alive Design:
And for consumers, it has seemingly figured out the magic combination of tailored content provided in the context of an experience that somehow feels personal, real, and intimate. “Each user should be able to create her own smart beauty world by making her own choices, “ says [CEO Alice] Chang. “I think ultimately the goal is that we should become every woman’s virtual beauty consultant.”
In mobile apps this means giving recommendations that give the person this feeling of “Wow it really knows me!” Personalization can be based on the customer’s past behavior and usage in the app — their bookmarks/saves/pins, Likes, their friends or who they follow, social activity, search history, check-ins, purchase history, content they engage with, memories of what they did on this same day 5 years ago, as well as based on things nearby, using the geolocation capabilities of the phone.
These are some of the many factors that make for a good news feed or Discovery experience, as well as useful push notifications for things you would actually want to know. For example Yelp sends “Hot & New” push notifications to tell me a hot business has just opened near me. Pinterest has invested a lot in machine learning to tailor push notifications and emails that recommend pins you would actually like. Twitter shows Trending Hashtags based on your geography and people you follow. These are just a few examples on the tip of the iceberg of personalization.
The main gist to think about is how we can give people that feeling of “Wow it really knows me!!”
What Can We Learn From This?
As a business person, I would want to know what’s the ROI (return on investment) on this. Not everyone has the resources to invest in a native video platform to get those cool autoplay videos on their apps so what tangible learnings are there?
Learning 1. Test to get to ROI that works for you.
If the Alive Design approach resonates, brainstorm with your team, experiment, test, and iterate to see if you can get to ROI that makes sense for you, as per the usual modus operandi in iterative web/mobile product development nowadays.
Or as we say in yoga class: “Modify for yourself! Don’t compare yourself to your neighbors. Everyone’s body is different.” This is another way of saying — decide for yourself what Alive Design means for your particular app experience and your customers and type of business.
Remember it’s often hard to get it right on the first try. The design guru revered by other design gurus LukeW gave a recent mobile talk and reminds us, “Design is obvious in retrospect” — it often takes a ton of iteration and work to get to a good design.
Learning 2. Alive Design is tailored for Discovery and Engagement.
The Alive Design examples I gave are most conducive to experiences around discovery or creating engagement through social connection, especially if your mobile app experience can leverage existing visual imagery, whether it be photos, videos, animated GIFs, or any other emotive medium.
The mobile apps that would benefit the most are ones that already have a wealth of user-generated content and social activity, because they would be leveraging the company’s core competencies. Alive Design strengthens both the individual experience as well as the community experience. In gaming we would say this has both a strong single-player and multi-player experience. Alive Design leverages the brainshare and creativity of the community. It surfaces all the “good stuff” they’re contributing! It gives loose structure to stumbling around and discovering cool new things you like that you wouldn’t find otherwise without Alive Design.
If you don’t have user-generated content — some apps leverage their existing professional in-house content or work with content-producing partners.
Sephora’s app has “The Daily” which highlights a different Sephora product each day.
Snapchat Stories are a mix of snaps from users and professional content from media outlets like Cosmopolitan, BuzzFeed, and Comedy Central.
Bottom line: the main premise is the app content feels alive and fresh. Otherwise it’s like showing up to a party and thinking it’s dead, when really you just have to go downstairs to where the party is really happening.
Learning 3. Alive Design cultivates the experience into a habit.
If people think of your app as something alive and fresh, and regularly think of your app as somewhere to go to browse for ideas, trends, etc., then it more easily becomes a natural regular habit. Keyword being natural.
It’s similar to how everyone knows if you go to the New York Times everyday there will be new articles. I know if I go on Pinterest or Instagram at any second in any given moment, I will find new inspos (inspiration) for anything — food porn, zen nature scenery, fitness, travel, inspirational quotes, nails, hair, fashion, home design, recipes, DIY projects, the list goes on. I know if I go on Twitter at any given moment, I will have a real pulse on what’s happening in the world even before the news articles come out.
This habit forming reminds me of learnings from gaming. For example there is the harvest mechanic as well as the daily bonus mechanic. FarmVille trained people in the habit of coming back every X minutes to harvest their crops. For the daily bonus — games would offer say free coins or a special item if you come back to the game everyday to claim the prize. Sephora’s “The Daily” feature where they merchandise a different product each day is analogous to the daily bonus mechanic.
Alive Design is a more abstract form of these gaming mechanics. Both give people the motivation to go back on a daily or regular basis, but the inspiring Alive Design examples create a more natural habit because it comes out of a genuine interest in connecting people with other people or ideas that make their lives better and expand their minds. The aliveness draws people to WANT to come back regularly.
Learning 4. Ultimately, Alive Design is about better serving customers.
Better serving customers = happier customers = more opportunities for business.
Pinterest didn’t build a native video platform solely because it would be super cool to have autoplay videos in their mobile apps; this is clearly part of their monetization strategy as well. Having their own native video platform allows more flexibility in integrating good video ad experiences.
In its recent earnings report, Twitter said video is its largest revenue-generating ad format, as it is trying to figure out how to best capitalize on the video ad trend, as are Facebook, Snapchat, and Google.
Thinking through the lens of Alive Design can help product teams stay grounded in what would serve consumers better while still keeping in mind monetization design, as Pinterest seems to be balancing.
In the same vein, Snapchat has astutely balanced fun, creative Alive Design that delights the consumer with designing for monetization (and smartly investing in augmented reality technology). Snapchat’s Sponsored Lenses are one of their main revenue streams and On-Demand Geofilters are targeting small and medium-size businesses.
The opportunity for engagement is real. As Racked noted, “The typical YouCam-Makeup-er comes back every two days — a major win, when factoring in a stat by Localytics that as of May 2016, 23 percent of users abandon an app after one use.”
On a business level, product managers get excited because having your product experience become a regular habit means higher engagement and retention which ideally means better conversion and customer LTV (lifetime value) which means more money for your business. $$$! Who wouldn’t want that?!
Good mobile experience is good for business and wonderfully inspiring when your contribution to the world is about bringing more ALIVENESS to products people love and improves their lives for the better.😊
Thank you to Angie Chang and Alex Pan for providing invaluable feedback on my drafts. I’d like to give a huge shoutout to Angie for generously sharing her editorial prowess and influencer expertise, as well as for encouraging and inspiring me to write more, and a huge shoutout to my brother Alex for always providing insightful feedback and being there for me.
Thank you to GIF Brewery for making awesome free software so that I could make all these crazy animated GIFs.
Thank you to Dan Moren for this post which is how I found out about GIF Brewery. Thank you to Josh Elman whose post shaped how I created my visuals.
Thank you to Medium for creating this wonderful publishing platform that also supports animated GIFs! (and up to 25MB each file!)
Sources for animated GIFs:
Harry Potter: http://giphy.com/gifs/harry-potter-scream-newspaper-883Tl1MmwuTug
Cat hacker: http://giphy.com/gifs/cat-hacker-webs-o0vwzuFwCGAFO
Howard Thurman quote (thank you Oprah & Brene Brown): https://www.pinterest.com/pin/44191640074647559/
