Skip
Current Issue
This Month's Print Issue

Follow Fast Company

We’ll come to you.

9 minute read

Delightful Design, Deconstructed

What makes design delightful? Four real-world examples

Some websites provide us a service, other websites make us smile—but the best ones do both. In the context of web design, delightful designs give us a special feeling that keeps us coming back.

But a website that only offers delight—no substance, just gimmicks and colorful mascots—doesn't last long in our minds when the initial glamour fades.

The websites we’ll explain are the ones that go above and beyond. They serve their purpose first and foremost, and then offer that little something extra. And while no one can really put into words what that "little something extra" actually is, you can get a good idea by looking at the examples below.

Only the Best Icing

Before analyzing the examples, let’s talk a little about how "delightful" interactions fit into design as a whole.

Writing for Treehouse Blog, Aaron Walter explains delightful design through Abraham Maslow’s Hierarchy of Needs, a classic theory of psychology published in 1943. The theory essentially ranks the priority of human needs, starting with fundamentals like food and oxygen, and ending with inessentials like self-actualization.

Converting the idea to web design, Walters proposes a new hierarchy of needs:

Delight is not essential for a useful interface. A website can still be successful as long as it’s functional, reliable, and usable—even if it has a dry, ugly interface (just look at Craigslist). But, a site that’s delightful without being functional will, sooner or later, lose its appeal. The most important factors are the more practical ones.

That’s not to say delight isn’t important. As Don Norman explains, humans evolved to make decisions based on emotions more so than logic. In fact, he continues to show that delight can even improve usability—by creating an atmosphere of enjoyment, a product relaxes the user, which in turn allows his mechanical processes to run smoothly, making it easier to learn how to use a site.

Delightful design is the icing on the cake, but only the very best icing—sometimes even the best part of the cake. A dry and bland cake is unappetizing, and if there are better options available (more colorful and sugary options), hungry users will choose them. On the other hand, no matter how delicious and tasty your icing is, not many people can stomach eating icing alone.

These following sites are the whole package: a solid premise, a functional interface, comprehensive usability—and that little something extra.

1. Bitly
Bitly is a good place to start, as it’s a well-known brand. The reason it’s popular is because, in the earlier era of the Internet, it provided a service that was greatly appreciated. Bitly shortens URLs to only a few characters, making them "bite-sized" so that, when sharing links, you don’t overwhelm people with long streams of incoherent letters and numbers. It’s a perfect example of how, with a little ingenuity, you can create your own niche market where no one else has looked before.

That’s the core appeal of Bitly, and we’d guess that, with a less interesting interface, they’d still have some success on the fulfilling that service. But what makes them stand out is the delightful interaction design.

The site's functionality is glaringly obvious. Users only need to copy and paste the link in the top left corner, and a side menu immediately slides out to show the new shortened link along with simple icons that allow for archiving, editing, tagging, or sharing the link.

You can go from the most complex link to an automatically tracked short URL in one click, which creates a momentary sense of magic. When framed inside of its fun colors and blowfish cartoon characters, the overall experience is memorable. Add in the intuitive link-tracking and metrics display, and the experience becomes slightly addicting—you want to see which links are clicked more than others, and investigate why.

As UX designer Ben Rowe explains, there are two layers to delightful design: the surface layer and the deeper layer of flow. In this case, the mascots and fun visual design make up the surface layer, while the "passively magical" interaction design forms the much more important layer of experiential flow.

2. Medium
Delightful design is not simply fun colors and cartoons. As Rowe says, the experience builds stronger connections, so delightful design relies on empowerment through usability—which requires far more than just a cutesy mascot.

One of the most popular blogging platforms, Medium uses a trademark minimalist style, a heavy dose of white, and no cartoons or wild colors whatsoever. The reason it’s on our list of delightful sites is the simple yet powerful experience.

Medium's minimalism extends beyond looks: by refocusing on the experience of writing, the site is naturally easy to use and understand for first-timers. You aren’t distracted by widgets, plugins, or any themes to select. That’s not to say the style is bland or lacking—the elegant typography, intuitive controls, and infinitely scrolling newsfeed all create a visually distinct first impression.

But beyond the surface layer of visual delight, the simplicity is only a vehicle for the user to concentrate on writing. It provides just enough interface to accomplish the core user goal, then gets out of the way and lets the magic happen on its own.

Through an applaudable use of hover and hidden controls, Medium offers all the essential options to its users (upload images/video, embedding content, etc.) without bogging them down. Unlike a traditional Wordpress experience which feels more like being in "content management mode," Medium combines the writing and uploading process into one creative flow.

To take it a step further, the editing interface looks nearly identical to the live interface, which makes users feel like they’re adding their genius to a blank slate instead of switching between states. The paper-like layout entices you with the anticipation of creation, empowering even the most amateur blogger to be like Hemingway in front of a typewriter.

Medium offers other nice touches. Each post shows an average reading time so you know what you’re getting into. On a purely functional level, the interface even allows for users to copy and paste images straight from Google Docs without drag-and-dropping or re-uploading (a nice surprise for bloggers who have grown used to the tedious task).

None of these subtleties are required for a decent blogging platform, but they elevate the design to a delightful level precisely because they are unexpectedly helpful. These features don’t just make users smile, they make them better at what they do. If you want to create meaningful delight, always strive to incorporate "magical discoverables" into your interaction design.

3. Carbonmade
What happens when you mix a solid experience with fun colors and cartoons? You get something like Carbonmade, a site that allows professionals to create online portfolios painlessly.

The deeper level of its delightful experience—the important base of the pyramid—is the ease with which users can create their online portfolios. As the creators explain, the inspiration for the site came from their personal irritation at how expensive or annoying it was posting their own illustrations online.

On first impression, the site fulfills the surface layer of delight with stylized elements appropriate for its designer user base: lighthearted copy, vibrant colors, and generous use of fun animal icons. The visual treatment captures your attention. In fact, the onboarding message even boldly claims that Carbonmade will drop users right into the experience without any boring tutorials or explanations.

As you dive a bit deeper, you see Carbonmade fulfills its promise with a smooth experience that feels like the Medium of portfolio sites. Create your project, drag and drop the works you’d like to show off, type text in the left-hand sidebar, and the changes automatically reflect in a true WYSIWYG interface.

Want to update your profile? Just type it in the sidebar, and you’ll see the new text exactly as it would look live. Instant gratification.

While more advanced users have to upgrade to a paid plan for more personalization, even the free plan has helped the user build a ready-for-primetime portfolio in less than 30 minutes from start to finish.

Like Rowe suggests, that frictionless functionality is what gives the delightful interface its meaning. Users aren’t using a tool to build their portfolio, they’re actually building their portfolio. The learning curve is virtually nonexistent and users immediately enter a deep flow of accomplishment right from the first click. The slick visuals simply ease the user along.

4. MailChimp
Last but not least is MailChimp, an ideal balance of usefulness and delight. Like Bitly, MailChimp fulfills a fairly technical niche, one so practical it could theoretically survive with a barebones interface. What makes MailChimp thrive is its smooth functionality wrapped in cheeky humor and visually friendly design.

MailChimp specializes in sending mass emails, a subject that inherently sounds impersonal and cold, which should explain why the company markets itself as putting a more personable face on newsletters. By being a "warmer, friendlier, funner" tool that packs just as much under the hood as its competitors, MailChimp transforms a dry task into an inviting experience.

The company's delightful design is good business since it’s a core differentiator in the market.

The no-clutter interface, straightforward choices, and conversational multiple-choice forms boils down a complex discipline into a simple and emotionally validating experience. MailChimp even generates a fun high-five screen after you send a campaign, an experience so memorable, some users even tweet themselves high-fiving the monkey right back.

Beyond the cute monkey mascot Freddie, the rest of the site feels friendly and lively. The sans-serif fonts create a casual air, and the tone of the text is simple and light (certainly no accident).

Combining fun cartoons with tongue-in-cheek messages like "This is your moment of glory," MailChimp softens the nervousness of sending your first email campaign. The actions and reactions of the interface feel less like an email marketing app and more like an empathetic instructor that understands you.

The humor and mascot are all part of the surface layer of delight. But when we dive deeper, we see that the conversational feedback and effortless task flow helps MailChimp connect with users on a more intangible level. The product instructs, entertains, and facilitates. As a result, even the most novice email marketer feels like a pro—and that’s a truly unforgettable experience.

Conclusion

Delightful design can be added to any website, in varying degrees. Weave in your elements of delight so that it doesn’t distract from usability, and you’ll create a state of pleasurable functionality.

The ultimate goal of delightful design is empowering users while creating an invisible emotional connection. It’s not an easy task, but it will absolutely makes your product stand out.

Never forget that "people don’t buy better products, they buy better versions of themselves."

For more UX advice, download the free 109-page e-book Interaction Design Best Practices. Thirty-three case studies are analyzed from companies like Airbnb, Google, Apple, Etsy, and others.

loading