Subscribe
Join 40,000+ sales and marketing pros who receive our weekly insights, tips, and best practices.
Thank you! You have been subscribed.
Back to Learning Center
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer

What is <span>They Ask, You Answer</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
Free Courses & Certifications

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
Navigation_8_2021_flywheel

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Optimization

Website Design & Optimization
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close

3 UX and Design Details for Delighting Your Customers

3 UX and Design Details for Delighting Your Customers Blog Feature

Joe Rinaldi

UX Designer, HubSpot Design & GDD Certified, Designer for 70+ Sites for HubSpot and Various CMSs

December 28th, 2015 min read


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.

Keep Scrolling to Continue Reading

Watch Liz Moorehead’s opening keynote from the Website Optimization Summit, FREE on-demand inside IMPACT+. Learn how you may be unwittingly undermining the money-making potential of your website and how to fix it!
Watch Free On-Demand
Here Are Some Related Articles You May Find Interesting

Want to Contribute Content to impactplus.com? Click Here.

IMPACT+ Sign Up
A FREE online learning community with on-demand courses, hundreds of expert-led sessions, thousands of your peers ready to support you, and much more.
Check it out