7 On-Site UX Changes that Boost Conversions

This is a guest post by super gunius Matt Oxley of Dotlabel. For more information about Matt, check out his bio at the end of this post!

Enter Matt:

The goal for most websites is to boost conversion rates, whether that is to drive an enquiry, an online or offline sale, an ebook download or a newsletter sign-up.

However, the goals for your website visitors might be to learn more about your product or service, find out more information about your company or to compare prices.

The discipline of User Experience seeks to understand what your visitors are trying to achieve and to create an experience which is easy and pleasurable, allowing them to achieve their goals effortlessly, without confusion or frustration.

When embracing user experience as part of your web design and development strategy it is important to understand that to optimise your online conversion, the most effective methods aren’t achieved by simply applying surface level User Interface (UI) changes such as changing the colour or size of a button.

User Experience is a concept which delves much deeper into the whole process a user goes through to get their tasks done, it considers the sequence of actions they take, their emotional and sensory responses during their journey, and the final and lasting impressions of the interaction.

That said, with the right knowledge and understanding you can apply these insights and make changes to your website that can have a significant impact on conversion rates.

1. Know your users

Sound obvious?

But is your knowledge based on what you and your colleagues ‘think’ about your customers or based on actual research and insight gathered directly from your audience?  How can you begin to fulfil their needs if you don’t really know them!

UX tools such as User personas are often used to represent the voice of the user throughout the design and development process, ensuring that you continue to meet the needs, wants and expectations of your different user types.

When you have this understanding of your consumers, you can begin to review the types of content that is relevant and appropriate for them.

Your Personas will identify the types of information they want, how knowledgeable they are about your product or service and what things influence their decisions. You can use this insight to decide the formats of your content.

For example, would an infographic be better than a detailed whitepaper, or would a video be best. Would you need to convey the more technical aspects of your offering or would a simplified version be preferred, or is both required to address the different needs of your audience.

UX change to boost conversion: Research your customers to ensure you provide the right format of content.

2. User Journeys and Goals

Having insight into your users is just a part of the puzzle, this element feeds into the

all-important User Journey. The User Journey considers the goals of your different users, the tasks they undertake and the context (or scenario) in which they interact with your website, app or portal.

Once you plot the different possible journeys, you can begin to identify what additional information is required to help someone convert. Would a sizing chart be helpful? Does the delivery information need to be accessible at a certain point in the journey? Could an FAQs or customer reviews section help avoid visitors going to another website?

UX change to boost conversion: Include the relevant supplementary information at the right point in the journey to keep users on track to conversion.

3. Be Relevant

When you understand your visitors and their goals you then have the opportunity to provide them with content that is relevant. Today, web technologies can enable you to personalise your content for your visitors based on their interests, their previous visit behaviour and where they have arrived from, making their online journey a more tailored experience.

UX change to boost conversion: Personalise your content so it is relevant to the individual visitor and what they want.
4

4. Design Mobile-First

Having the insights on when, how and why your audience interacts with you online will indicate the extent to which designing a great mobile experience really matters to your business.

When designing mobile-first, consider the experience within the limitations of a smaller screen size, and this will help to focus the design around enabling the user to achieve their goals most efficiently (usually with just their thumb!).

Also, when designing mobile-first you will need to consider the best ways to capture

information- for example, when the user needs to complete a form or undertakes a buying process. You can prioritise reducing the number of steps and using relevant input fields, such as displaying the numeric keyboard (rather than the fiddly alphanumeric keyboard) for credit card details or having an easy-to-use calendar date picker rather than annoying drop down fields.

When you design for desktop first which is responsive for mobile, it may adapt to fit on the screen, but that doesn’t mean that the experience is optimised for the mobile user.  If you are considering a website redesign, ensure that mobile is considered as your first priority.

UX change to boost conversion: Design mobile-first and optimise processes and input fields for the mobile user.

5. Design Intuitively

When you are designing your digital experience it is important not to be different just for the sake of it. Web visitors have an expectation of how things work, through their experience of other sites; they will expect menus and inputs to work in a certain way. A feature or functionality that is different can make an experience awkward or confusing if the visitor doesn’t know what to do.

Keep content in manageable sized chunks and if you are introducing features like gesture control (which are notoriously inconsistent across the web) it is important that you educate your users on how to use them.

UX change to boost conversion: Be consistent and clear on how things work.

6. Observe Your Users

Research and insights are an incredibly important part of UX.

Watching your users interacting with your website, app or portal can uncover a whole range of issues you hadn’t before realised were a problem.

There are so many ways you can gather this insight, either face to face, remotely and installing software like HotJar on your site, all of which can begin to reveal obstacles and hurdles which are hindering your conversion rate.

Combining this observation with your website insights means you can begin to build up a picture of what changes you need to make on site.

Is the need for an account registration becoming a barrier?

A rather dated but relevant example, is how UX Expert Jared Spool attributes a $300 million increase in revenue by giving customers the option of not having to register for an account in order to buy something. This valuable discovery was made as a result of user research.

Are your calls to action in the right place? Are there too many distracting messages confusing the user to what their next action should be? Are visitors missing vital information that can help them along their journey?

UX change to boost conversion: Watch how your customers interact with your site to find out what needs to change.

7. Test, Learn, and Iterate

Changes that work for one site won’t automatically work for another, as the best

conversion rates will be achieved by the sites that ‘listen’ and ‘respond’ to the needs of their own audience.

To create the optimal online experience you need to use insights and feedback to inform changes. A/B testing and Multi-variate testing are commonly used methods to live test different hypotheses on how to improve conversion. Making changes and comparing two live versions will determine which changes have the most impact on conversion.

Regular testing and improving a website should be an ongoing process. Users expectations will evolve as they interact with different websites, and the only way to ensure that your site keeps up, is to maintain a culture of continuous improvement. If you don’t, there is a real danger of needing a significant capital investment to do a complete ground-up redesign and build.

UX change to boost conversion: Invest in a continuous improvement programme to ensure your site remains relevant and up-to-date.

Matt Oxley – Author Bio

Matt Oxley is co-founder and Director of the award winning User Experience (UX) and digital agency DotLabel. Matt comes from a creative design background with a passion for user-centred digital experiences. In his career Matt has held the role of Creative Director at agencies Intercea and NetSitePro providing expert advice to household brand names such as GlaxoSmithKline and Scottish Courage.

Extended Information:

DotLabel delivers a range of UX-focused digital experiences including websites, apps, intranets and portals.  Dedicated to a UX design approach, the team at DotLabel know that when you combine a company’s objectives with an understanding of the users’ goals, attitudes and frustrations, you can create digital experiences that get better results and drive really conversion, whether that be increased enquiries and sales, improved engagement or reduced calls to customer support.

DotLabel was listed in the top 40 agencies in the South by Wirehive100 in 2018. Celebrating its 10-year anniversary in 2017, the company works with a prestigious client list includes Hendricks Gin, The Balvenie, Barclays, SDL, ATPI and Anthony Nolan.

The agency is proud to have recently won two awards at the Digital Experience Awards 2018, as well as the winner of the Best User Experience award and finalist for Consumer site of the year at the 2018 Wirehive 100 awards.

In addition, they are awaiting results of becoming a finalist at the UXUK awards for the not-for-profit category for their work with Anthony Nolan – results revealed on 22 November 2018.  Plus, DotLabel have also been recognised as a 2018 Top UX agency and Top Digital Design agency by Clutch.


Ultimate Frisbee Rules App

ultimate frisbee rules app

As far as could tell, there wasn’t an easy way to navigate the absolutely ridiculously confusing rules of ultimate frisbee. The closest thing I could find was the Montreal Decision Tree, but who wants to print that out and bring it to the field?

So I created a web app to get to rulings faster. I don’t think it will be useful for rulings at the time of a decision needing to be made, live, in a game – but it would be great for followup and clarification after the fact.

Hopefully this little web app goes a long way in helping make the rules of ultimate frisbee more accessible, and less intimidating.

https://butterwebdesign.com/ultimate-frisbee-rules-app/index.php

What Are You Doing With Your Free Warehouse?

We’ve all left websites because we’ve been asked to log in to access what we want. Nobody wants to set up yet another account if it can be avoided. So, as a business, how do you grant certain powers to your visitors (like making a wish list) without making them log in first?

Without getting technical on you, it’s called LocalStorage, it’s relatively new, and very awesome. Instead of storing user information in your database, you store this information in their browser!

Prior to LocalStorage, the only ways (that I knew of) to store information in the user’s browser was with cookies and session variables. A cookie was limited to 4kb in size. How much more space does LocalStorage allow? A lot more. How much is “a lot” you ask? 10x more? 100x more?

No.

1250x more space on mobile (5MB), and up to 50MB on desktop. For free.

That’s like someone coming to your house and turning your garden shed into a warehouse.

Warehouse contrasted with a garden shed.

The only question you need to ask yourself now is, what are you going to do with your warehouse?

Here’s an example of what we did for Creative Landscape Depot:

 

 

 

The Machines Are Taking Over

And that’s a damn good thing because who wants to stare at excel sheets for the rest of their lives when a computer can do it?

Saving time is the best. It’s even better when it’s a computer doing it for you, and simultaneously increasing likelihood of someone actually buying your products. There are all kinds of ways of making our business processes easier by letting computers do more of our work – we just need to get better at asking ourselves what we’re doing that we shouldn’t be.

Clues a given task doesn’t need to be done by you:

The task is repetitive.

The task requires no human judgement.

There are hard rules and absolute outcomes for the process.


One of the strange and awesome side-effects of outsourcing tasks to algorithmic apps (like the Backsaver Finder) is that it improves User Experience (UX). People have fun using intuitive programs to find what they’re after. And that’s the whole name of the game right there. Give your users what they want, and make it as enjoyable as possible.

An Egg Timer for Your Life

Sometimes we need an egg timer for our lives, like when we spend HOURS sitting at a desk. I’ve written a little script that lets you set an alarm for yourself – to remind yourself to get up and stretch? Eat? Blink?

This project provided opportunities to make a sexy user experience, like preventing the “minus” sign from appearing if you count down to 1 (to prevent negative numbers from being possible… otherwise we’d be setting an alarm for a point in time that has already passed, no?).

Another bit of UX: the text in parenthesis disappearing when you run the timer. You only need to read that once, then it can go away.

The flashing green bar indicates how many seconds remain per minute. It’s 60 pixels wide, so I remove a pixel with each passing second. This wasn’t terribly obvious at first, so I also made the seconds countdown toggle between a lighter “limegreen” and just normal “green” css values. This gives the impression that it’s flashing. The dark grey background makes the colours feel like they’re lights on a digital display, which makes the whole application seem sleeker somehow. I don’t know how or why, but it looks cool that way.

If you’ve already started the countdown but don’t want to wait the full 25 minutes to hear the alarm, just click the minus sign furiously until you’re down to 1 minute.

 

Baking up a Colour-Randomized Calculator from Scratch

While coding a calculator from scratch (using HTML/CSS/Javascript) I thought it would be good, wholesome fun for the buttons to change colour randomly. They probably make buttons on calculators boring for good reason. Once the random colour-changing was in place I found myself forgetting about the math and taking far too much pleasure in clicking buttons at random. Like a child.

Go ahead, try it out!

I thought this project was going to be way trickier than it turned out to be. Apparently you can pass an ugly string into the javascript eval() function and it does all kinds of magic (including treating strings as numbers and operators (like +-/x) as operators. It just crunches through and gives you an answer. This last bit is super helpful because I was trying to store an operator in a variable and getting all kinds of errors!

Eval() does its best to resolve whatever you throw at it. Even if you try something stupid like 5 – + 5 it simply ignores the first operator and adds the 5s together to give you 10.

Neat.

 

Freshly Launched Website: Craig Containers Inc.

Smell that? It’s a freshly launched website! http://craigcontainers.com/

The coolest part about this website is the intro video, no doubt about it. In 47 seconds you get a vivid sense of the history and values of Craig Containers – which is to just keep making damn sturdy laundry carts.

Another massive addition to Craig Containers’ online arsenal is the “Products for Home” section. This is exciting because it exposes them to an entirely new market (their old website only showed the industrial stuff).

industrial website categories

I also got heavier into Photoshop than I generally do for a website because everything needed to be on a white background for consistency. This cart was a nightmare, but worth it:

As with most of my sites, I’ve used native Bootstrap hidden classes to show text phone numbers at wider widths (computer screens) and dialer buttons at narrow (mobile) widths. Really hoping this drives up inbound phone calls for these guys!

dialer phone number button

 

New From Google: Posting on Your Business Listing

Google business listings are so insanely important because they appear alongside search results (over on the right hand side of the page) and contain reviews for a business as well as hours, location, and so forth. Today I got an email from Google announcing a brand new feature: the ability to create posts directly on your business listing and include fancy “call to action” buttons like “buy now” and “learn more”. Video screencast opportunity? I think so:

50 Years in 50 Seconds

Well, the day has arrived: we’ve reached a point where mobile data is fast enough to justify having video on pretty much every type of website I can think of. This is why I’m now pushing for video content wherever possible on my clients’ websites. And, when appropriate, I enjoy handling production of the video personally.

A video can communicate in seconds what might otherwise take minutes (using photos and text). And with the damn-near-zero attention span of typical website visitors, we just don’t have minutes anymore.

If a picture says a thousand words, a video says a million.

Consider this 50 second cross-section of a 50-year-old company: