News

How to design interactive experiences and create impact

1

Transitions and interactions are fast becoming a way for web designers to increase user engagement. Used correctly, they can even improve your conversion rates.

In this article, I’m going to explain why interactive experiences are so powerful, and then share some examples to show you what I mean and inspire you.

Emotion creates engagement

Emotion is the one ingredient that guarantees engagement and conversion. If you can make somebody feel something, then your brand will get lodged in their mind. That’s the kind of memory that you can build long-lasting customer relationships on.

Used effectively, transitions and interactive experiences can elicit strong feelings in the user. It means that they aren’t simply looking at a lifeless website. 

Interactive experiences and transitions are great at encouraging users to engage with your site. And the more users engage with your site, the better chance you have of converting them.

Innovate to accumulate

At Yoyo, we’re firm believers in the importance of innovation. As far as we’re concerned, one of the most effective ways of building a brand is by innovating, especially when it comes to digital experiences.

With so many brands out they're competing for your users’ attention, you have to innovate if you want to stand out. Now, when I talk about innovation, I’m not only talking about emerging technologies such as AI or VR. You can innovate in lots of different ways.

One of those ways is with the design of your website and the experience you provide for your users.

Here’s a good first step:

Take a look at your brand identity, and the core drivers behind what you do. Then think about how you can distil that into an engaging interactive experience. If your experience doesn’t match your brand, then it’ll come across as gimmicky. It’ll be ineffective.

But when a brand and interactive experience work together in perfect harmony, that’s when something magical happens.

Inspiring interactivity

I’m going to show you a few examples of how interactions and transitions can elevate a website and create a memorable experience for your users.

First up, it’s Pest Stop Boys, a pest control business.

Incredible brand name aside, their website provides a fun and engaging experience. But most importantly, it stays on brand.

Once the site loads, you’re greeted with a vibrant burst of colour, and some large text proclaiming “Pest Stop Boys”. Once your eyes have adjusted, you realise that your cursor acts as a searchlight. As you move it around the screen, you occasionally glimpse an insect scurrying across.

Pest Shop Boys

I spent an embarrassing length of time searching for the creepy crawlies. It was fun, utterly unexpected, and incredibly engaging. Were I in the market for pest control, these guys would undoubtedly stand out from the rest.

My next example comes from Travelshift, an online travel agency.

Lots of websites have a carousel in their hero, but Travelshift have innovated. They have produced an interactive carousel with mesmerising transitions.

You’re initially shown a large panoramic image of a beautiful holiday destination. But then you discover there’s a twist. If you hold down a left click, the image warps and transforms before your eyes. Release the click and a new, equally beautiful image will settle into view.

Lifelong

This transition gives the effect of travelling through time and space. It’s breathtaking, and it sets the scene for the rest of your experience with Travelshift.

The final example is a project that we worked on at Yoyo. It’s for A Story About Trusts, an initiative run by J.P. Morgan.

We could have simply created a nice-looking website to explain investment funds. But where’s the fun in that?

Instead, we created a fully interactive experience. Thousands of particles arrange themselves into graphics right before your eyes. With your cursor, you’re able to disrupt the arrangements, lending a fluidity to the site.

This was inspired by the concept of investment funds and trusts, in which customers spread their investments across different areas and places. By providing a more tactile experience, we were able to engage far more users and develop better relationships.

Jp

Making the transition

Technology is constantly developing. WebGL, for example, is a Javascript API that makes it easier than ever to add interactive experiences and transitions to your website.

As more companies and designers embrace these advances in technology, we’ll see them pushing the boundaries of what’s possible. That means you need to start thinking about how you’ll use your own interactions to provide a memorable experience for your users. 

But remember that any interaction you add needs to provide value and enhance the overall user experience. It also needs to stay aligned with your brand identity.

Feel inspired to add interactive experiences to your own site? We’d love to help. Get in touch and we’ll have a chat.

Related post

How to break free from the tyranny of the to-do list

Read next

038 Yoyo February 2020 Hires