Practical tips to bring your website to life
Breathing life into digital products
Unexpected yet delightful events, which serve no purpose other than to make us smile or enhance an experience, can have a profound impact on how a person feels about or remembers your brand. The same can be said for a product just working — getting the basics right. To paraphrase an analogy from a talk Jared M. Spool gave, which has stuck with me:
You expect your hotel room to have basic things like toilet paper, bed sheets and a towel. You wouldn’t thank the hotel, or refer your friends based on this — but you’d be annoyed if they didn’t meet these basic needs. Similarly, you may be delighted by and grateful for things like a warm welcome on check-in, extra luxuries like free toiletries, or nice art on the wall… You wouldn’t necessarily be disappointed if you didn’t get those extra things, as you didn’t need or expect them — but you may be more likely to return to, or refer the hotel.
Meeting people’s basic expectations will keep them satisfied, and delighting people is an experience to strive for. Both are important.
First, a word of caution
For the purposes of this article, we’re going to assume that you’ve got the basics right… right? Your product does what your users need it to do? It’s simple to use? It’s bug free? …Okay, now you are ready to focus on ways you can elevate your brand experience, and delight your audience.
There is no one size fits all solution
This article explores some things you could try to elevate and breathe more life into your digital brand and website or product experience. These little extras, refinements and details can lead to a more memorable user experience, retention, and if you do a really great job, customer referrals. I’ll also include some practical advice for achieving it where possible.
Motion design
We can do pretty damn amazing things now with CSS animations and JavaScript. The possibilities are seemingly limitless! Motion in digital products can be really effective. The key is to incorporate just enough motion for it to be interesting, captivating and engaging, without being distracting.
Try animating key elements in as they load. A simple fade-in can be an effective, subtle way of introducing content. Adding a little movement can be great for drawing attention to key elements. Timing is important, and a little variety too. See in the examples below how different elements animate harmoniously in sequence; some move vertically, some horizontally. Experiment with different easing for more ‘lifelike’ or compelling motion. Try incorporating the motion as a means of ‘building the page’ — so page elements load/animate/appear as you scroll. This can help draw focus to key elements, or just make for a pleasant user experience.
Notice in most examples above and below the blocks of colour ‘wiping’ in different directions, ‘building’ the page and revealing content. Subtle use of parallax scrolling can also be interesting. You could also pair animation with something more dramatic, like video:
Hiring a freelance or full-time Creative Developer or a ⭐️ Front-end Developer to craft and fine tune those little extra details and bring your digital experience to life is a great investment!
But, as a recurring theme in this article, I’ll try to suggest simple, free or budget alternatives. In this case, for animation, go check out Animate.css by Daniel Eden. It’s easy to set up on your website. You simply add classes to elements you want to animate, and choose which animation you want. You’d be surprised how far this will take you, with minimum effort.
<p class=”animated fadeInLeft”>Hello</p>
For example, the above will make the word “Hello” fade in, moving from left to right. And below are a few simple examples, which took minutes to do:
If you want more control, look into CSS animation and CSS keyframes. This article is a good place to start. Be inspired by folks like Aristide Benoist who are doing amazing things with code! And for a daily dose of ‘websites that move, a lot… sometimes too much’ — visit Awwwards to see what’s possible. And remember, moderation. 😉
For what it’s worth, I personally only learned CSS animation a few months back. If you know your way around CSS, you probably won’t find it too hard, and there are loads of resources to help you along the way. My first attempt was Club of the Waves (below) and I’ve since built Owl Studios.
Food for thought for visual designers: Think about how much time you invest in learning design tools that imitate website animation, only to provide a developer with a movie to attempt to recreate. Why not reinvest that time in learning to do it for real. I think you’d be surprised how much you enjoy bringing your own creations to life, and tweaking them to your hearts content. Just a thought. 🙂
The little details
Besides the more dramatic page loads and animations, something as simple as a hover state can come as a delight to users. Micro-interactions and finesse details in a product can make a big difference to the user experience. With as little as a line of CSS, you can make a hover state ‘feel’ nicer, by fading from one colour to another, or easing smoothly from one position to another, as opposed to the default, more abrupt change of state. Below is a button hover state with and without a simple CSS transition:
transition: all .5s ease;
Experiment with CSS transitions. Get started by adding the above CSS to a link (with a hover state) and see what happens. Then play with different hover states like color, width, height, padding and opacity to see what you can create. See here for more transitions, and also CSS transform.
Have some fun with it
Elements of delight shouldn’t be disruptive or too distracting; Google, for example, do a great job of balancing functional and fun. They’re famous for their Doodles, whereby they replace their logo from time-to-time, for one day only, with a ‘special logo’. Sometimes it’s an illustration, sometimes an animation, or even a simple game! Besides being fun, the ‘doodle’ serves a useful purpose of commemorating an anniversary or special event — leading to search results that educate, amuse or inform. Win win.
Less practically, at the extreme end, try [Google] searching: “Do a barrel roll” and see what happens! Or search: “Atari breakout”, then click Images. Also try: “Anagram”, “Askew”, “Zerg rush” or “Flip a coin”.
Brand mascot
In keeping with having fun with your brand, (if your brand lends itself to it) try playful little touches like a brand mascot. You can bring them to life too!
MailChimp are among the best examples of a brand with a fun and lovable mascot, Freddie. They do a great job of integrating Freddie into their product with colourful animations, like the two below for hitting send and scheduling an email campaign — breathing life into an otherwise very ordinary, mundane task. I can tell you it always puts a smile on my face when I schedule emails for Club of the Waves. *Shameless plug ;)
One of my favourite features of the MailChimp product from years back was a moment of delight in their dashboard. Upon logging in — rather than simply displaying the logo as you’d expect — Freddie would have a speech bubble containing a different message on each visit. Most often these were funny, sometimes linking to amusing external content or a YouTube video. I actually enjoyed logging in and seeing what Freddie had in-store for me, and I told other people how delighted I was with this fun product experience. How’s that for engagement, and customer loyalty! I was pleasantly surprised to find MailChimp have created a website to immortalize this feature. Also, I ❤️ the passion this shows their team have for their brand. Way to go, MailChimp! 👏
And a final note on MailChimp: The love people have for this brand’s mascot, Freddie, is nothing short of amazing. He has his own comic, he makes public appearances and even exists as a lovable toy. Now that’s a strong brand!
Breathe some life into those dull wait times
It’s an unfortunate part of using any digital product — things take time to load. And it’s frustrating. We’re impatient beings. It only makes sense we should do something to make that load time feel less frustrating.
Hipmunk handles loading states really well. Their brand mascot is an adorable chipmunk. With a mascot this cute, it would almost be weird not to have fun with it! The nature of their product means you spend a lot of time searching and waiting for results — for flights, hotels and cars. Different product searches feature a different animated [gif] version of the mascot, like the one below for flights. How sweet. How memorable.
Obviously, Hipmunk’s brand lends itself well to this, as does Mailchimp. The answer is not to add a random dancing bear to your product! Think: what could you tailor to your brand that’s more interesting than a stock spinner? Perhaps you could animate your logo, brand mark, or even icons and illustrations throughout your product? An app’s onboarding experience can be a good place to get more creative too. Even a simple load bar or preloader state would be better than staring at a blank screen while content loads.
A good analogy are the wait lines at Disney and Universal theme parks. The queues can be up to 2 hours, but both companies do a great job of crafting an environment that feels like even the line is part of the ride. It’s still frustrating having to wait, sure, but those little details make it a lot more pleasant.
If you’re not a million dollar startup with the luxury of a huge product team with far too much time on their hands, or you don’t have an animator on staff, worry not. There are plenty of decent stock libraries of cool, free loading gifs. Try this, this or this. Or find a freelance motion designer.
Easter eggs
An unexpected feature included as a joke or a bonus.
Now this really is just for fun! But not everything in your product has to serve a function. It’s okay to include things just to put a smile on the user’s face, so long as it doesn’t distract from the product’s key objectives. For instance, you could build in surprises as a user navigates a website or app; even a fun 404 page counts.
The Swarm iOS app is a great example of Easter eggs. I tweeted this 2 years ago. It delighted me then, and I’ve remembered it ever since. Tapping an illustration of a girl holding a coin made the phone vibrate and her intensely cling to her gold coin!! 😯 It was a curious interaction on my part, but it surprised me, and made me smile. Sadly that feature doesn’t appear to exist now, but it says something that I remember this little Easter egg, 2 years later. Even more so that I felt compelled to share it. 🤓
The 2nd to 5th mobile screens above show two more examples, from the same app. A common iOS interaction is to swipe down to reload. Looking to the 2nd left screen above — as you swipe down — in addition to the expected loading icon is an unexpected dotted line… If you keep swiping down, repeatedly without leaving hold of the screen (which is a really abnormal iOS interaction), you eventually find a little bee (a Swarm brand mascot). Just because! 🤷 On the same screen, scroll to the bottom and you see a strange gray circle… Do the same as before, only this time swiping up. This illustration runs deeper and deeper, until you finally reach a door and the app stops resisting to scroll back up. I’ll leave you to tap the door and see where it leads… 😉
Other opportunities…
This article only explores a few ways you can breathe more life into your digital brand or product. You could also try:
- Lose the boring, stale copy. Talk to your customers like they’re people, not data with money. Have a personality. Try being more real, friendly and down-to-earth with the tone of your copy, headlines, call to actions, etc.
- Have an interesting, practical, or just plain fun 404 page.
- Use a non-boring avatar or placeholder profile images. Also, this.
See also: a great three-part article on this subject, from a talk by Meagan Fisher: Bringing the Humanity Back to Digital
Putting theory into practice
I started this article with a goal of sharing something I’ve been working on, then it became an exploration into the value of this exercise. Now, I’ll share my own application of the principles explored in this article. Meagan Fisher and I explored ways we could have fun with our own brand — a new design and development studio we’re founding together. We’re both obsessed with owls, and so the new venture is called Owl Studios. 🦉 I know, I know… Our little bios on our site give more context. If you’ve met either of us you’d know we don’t take ourselves too seriously. We get s*** done, but have fun doing it. It’s important to us that our brand reflects this. I mean, we have the word ‘Owl’ in our title! A stale, corporate brand image wouldn’t fit us, or our name.
Above is a screen capture from our new website. Simple, sequential CSS animations create some movement of each element on page load, for a more interesting and welcoming entrance. And you’ll notice the little owl tilts its head, and winks eventually too! It makes us smile, and we hope our visitors will enjoy it too. 🙂 The remainder of the page builds itself as you scroll, simply for a more visually engaging experience. We also feel that introducing each bit of content in this way makes it more enticing: “And now this…”
As discussed earlier, a motion designer can work wonders with illustrations, icons and brand marks. But if you want to achieve something small, effective and without breaking the bank… Our little owl brand mark is created with only a little CSS and one PNG image. This is something any front-end developer could do. See here for how we did it.
Then things got a little silly… Inspired by MailChimp and Hipmunk, we decided our little owl was more than a brand mark, it was a mascot. And like any good mascot, it needed a name and a personality. We call our little buddy, Waddle. In addition to our brand mark (above-left), you can see Waddle above-right in a change of outfit, with some different movement — again, done with simple CSS animations! You can learn more about Waddle, the story behind the name, and the original brand mark inspiration here.
I hope you found this interesting. Please suggest any other ideas you’ve seen and loved, or have tried yourself in the comments or @andrewcouldwell
Update: 2019. I wrote a book about system design and digital brand guidelines! https://designsystemfoundations.com
