Free: Assessment Does your website build trust with buyers and bring in revenue?

Score My Website
Close

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.
Score My Website
Web Design  |   Marketing Strategy

3 UX and Design Details for Delighting Your Customers

Joe Rinaldi

By Joe Rinaldi

Dec 28, 2015

3 UX and Design Details for Delighting Your Customers


design-details-featured.jpgThink about that feeling you get when wearing new clothes for the first time, or when you pay an even dollar amount while getting gas. How about when you perfectly separate an oreo like a skilled surgeon?

That sudden surge of excitement and joy is “delight” and it’s a feeling that carries over from your day-to-day life to your experiences on the web.

“Customer Delight” has become one of the most common buzzwords within the digital marketing realm, but that doesn’t mean it should be taken lightly. It’s what makes people fall in love with your product and makes the experience that much more memorable (and worth talking about).

In this article I want to help you understand you some of the little ways you can delight your visitors, and show off some companies that are doing everything completely right.

1. Work in a Bit of Brand Personality

Your brand's personality is everything that makes your company unique and different from your competitors. It’s an important part of your company and should be felt throughout your entire website.

You can add in a splash of personality in a number of different ways on your site.

InVision does a good job of subtly adding personality to their site in the example below.

Desing-Details-InVisionApp.gif

Notice how  when you click off the InVision web blog tab, the title text changes to a little reminder to come back to the site. Something as little as this puts a smile on your visitors’ faces  and also playfully gets them to come back to your page.

MailChimp is another great example. In their style guide, they describe the brand’s tone as “fun but not silly”, “informal but not sloppy”, and “weird but not inappropriate." 

Design-Details-MailChimp.gif

As you make your journey throughout the different pages on their site this tone becomes increasingly clear through the imagery they use as well as their conversational voice.  

Design-Details-MailChimp2.png

2. Simple Animations & Transitions

There’s a lot of debate about whether animations on websites are purely aesthetic or they serve a greater purpose.

I’ve always be a strong believer of the latter when they’re used in an appropriate way.

Page transitions and animated GIFs are great ways of captivating your audience and pulling their attention to a specific section on a page. Motion and animation makes it easier for us to explain complex concepts when showcasing products.

Animated GIFs are becoming a valuable tactic for many product-based companies because it help demonstrate functionality. This demonstration helps potential users visualize themselves actually using the app or product.  

Take Wistia, for example on their tour page they use GIFs to showcase different areas of their software. This gives their users a strong idea of what they can expect when using the product before they even sign up.

Design-Details-Wistia.gif

 

On top of animations and GIFs, a number of big brands sites are using page transitions (such as elements fading in) and parallax scrolling.

One of my favorite examples is the tour page for Campaign Monitor's “Monitor” App.

Design-Details-Campaign-Monitor.gif

As you scroll throughout the page you’re followed by an iPhone that is constantly rotating and changing screens to showcase the different advantages of the app and how you can use it.

Something like this takes people “along for the ride” and illustrates your value. It shows them exactly what they’re getting, in turn, eliminating many of their questions and concerns they may have about making a purchase.

3. Interactive Page Content

I’m sure most people can agree with me; there’s just something about a website with  a box that toggles, a switch that flips, or a draggable slider features that make me feel like I’m using a physical object.

These elements might be used to show an additional blurb of information or switch between different product offerings, or they might be purely stylistic. Regardless, they’re one of your most effective tools when it comes to delight.

Take BellRoy for example.

Design-Details-Wallet.gif

They’re a company that prides themselves on offering the thinnest wallets regardless of how many cards or cash you carry and hey really drive  this point home on their product page.

The wallet company uses an interactive slider that allows you to choose the number of cards in your wallet and compare what it would look like in one of their productsalong side an average wallet.

This is not only a great example of using interactivity on a website, it perfectly highlights one of the product’s biggest selling points.

CSS Weekly, on the other hand, takes a purely aesthetic approach with interactive content on their subscribe form.

Design-Details-CSS-Weekly.gif

As soon as you hover over the subscribe area you’re greeted by four friendly-ooking guys cheering you on as you start typing.

Even if I was having second thoughts about subscribing, I’d want to hit subscribe just to see what they’d do next.

How Can I Start Adding “Delight” to My Site?

Remember, as subtle and simple as these elements of  “delight” may seem, it isn’t something that shouldn’t just be added onto a site as an afterthought or without reason.

It has to work hand-in-hand with a site’s functionality and purpose. A site will reach its full potential when all three of these key ingredients are blended and baked together.

Here area couple of tips for you to start delighting your visitors:

For Brand Personality --> Start with  Microcopy

When adding  brand personality to your website, start with your microcopy.

Using clever microcopy can go a long way for your company's overall tone. This can be anything from instructional text to form labels.

User Onboarding includes some friendly content when having users sign up for their email course. Talking to your visitors in this way humanizes your brand and reminds visitors that they’re working with real people.

Design-Details-User-Unboarding.png

Some other simple ways to sprinkle your brand across your site is to:

Take Advantage of Free Tools for Animations & Transitions

Don’t worry if your design expertise doesn’t go much further than opening up MS paint.

Animations like those in this article have become increasingly more simple to implement on sites due to the vast array of online tools and softwares that are out there.

Use Heat Maps and Analytics to Find Opportunities for Interactive Content

If you’re looking to add some extra punch to your site by using interactive content, start by dissecting the heat maps or analytics of your high traffic pages.

You can gain a lot insightful information from this and it will give you a clear roadmap of where to start brainstorming.

For example, maybe you have a tour page that’s too long, causing prospects to fall off before reaching your form or offer.

Try solving this issue by condensing some of the less important content with expandable tabs that show more information when clicked. Use online resources such as CoDrops, CodePen or CSSDeck for inspiration when looking for interactive elements.

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.

Related Articles

Can I Use AI Tools To Build My New Website?

September 18, 2023
Vin Gaeta Vin Gaeta

What Is a 'Learning Center' and Why Does My Website Need One?

September 14, 2023
John Becker John Becker

How Much Does a Website Redesign Cost in 2023?

July 20, 2023
Vin Gaeta Vin Gaeta

Do You Need a New Website? Maybe Not

July 19, 2023
Vin Gaeta Vin Gaeta

14 Award-Winning Website Designs (& What They Did Right)

July 17, 2023
Christine Austin Christine Austin

What a New Self-Selection Tool for Your Website Will Cost

July 13, 2023
John Becker John Becker

9 Self-Selection Tools to Inspire Your Business Website

July 10, 2023
John Becker John Becker

Website Conversions in 2023 — STOP, START, KEEP

January 25, 2023
Vin Gaeta Vin Gaeta

8 of the Best Business Website Designs to Inspire You in 2023

November 17, 2022
Joe Rinaldi Joe Rinaldi

What Does a Great Inbound Marketing Website Look Like in 2023?

November 14, 2022
Joe Rinaldi Joe Rinaldi

Your 2023 Website Strategy Must Include These 6 Things

November 4, 2022
Mary Brown Mary Brown

4 Ways To Recession-proof Your Website In 2023

November 1, 2022
Marcus Sheridan Marcus Sheridan

Website Mastery: A better redesign process for your business website

November 1, 2022
John Becker John Becker

8 Best Content Management Systems for Digital Marketing in 2023

October 1, 2022
Joe Rinaldi Joe Rinaldi

12 Essential Tips for Improving Your Web Design in 2023

September 13, 2022
Christine Austin Christine Austin

23 of the Best Examples of Business Blog Design

May 30, 2022
Christine Austin Christine Austin

5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)

May 16, 2022
John Becker John Becker

Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful

February 22, 2022
Joe Rinaldi Joe Rinaldi

11 Pricing Page Examples for Business Websites (Updated for 2023)

January 18, 2022
Joe Rinaldi Joe Rinaldi

8 Crucial Elements Every Homepage Design Should Have

January 15, 2022
Joe Rinaldi Joe Rinaldi

What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By

December 18, 2021
Joe Rinaldi Joe Rinaldi

Google Shares New Tools to Audit Website User Experience

August 12, 2021
Joe Rinaldi Joe Rinaldi

New HubSpot CMS Hub Starter Tier Released for Growing Businesses

August 6, 2021
Joe Rinaldi Joe Rinaldi

Too many internal links in content can confuse Google about site structure

July 9, 2021
Joe Rinaldi Joe Rinaldi

Google July 2021 core update rolling out over next 2 weeks

July 2, 2021
Joe Rinaldi Joe Rinaldi