We invited Holly Ingram from our partner REO Digital, an agency dedicated to customer experience, to talk us through the practical ways you can use experimentation when doing a website redesign.
Testing entire site redesigns at once is a huge risk. You can throw away years of incremental gains in UX and site performance if executed incorrectly. Not only do they commonly fail to achieve their goals, but they even fail to achieve parity with the old design. That’s why an incremental approach, where you can isolate changes and accurately measure their impact, is most commonly recommended. That being said, some scenarios warrant an entire redesign, in which case, you need a robust evidence-driven process to reduce this risk.
Step 1 – Generative research to inform your redesign
With the level of collaboration involved in a redesign, changes must be based on evidence over opinion. There’s usually a range of stakeholders who all have their own ideas about how the website should be improved and despite their best intentions, this process often leads to prioritizing what they feel is important, which doesn’t always align with customers goals. The first step in this process is to carry out research to see your site as your customers do and identify areas of struggle.
It’s important here to use a combination of quantitative research (to understand how your users behave) and qualitative research (to understand why). Start off broad using quantitative research to identify areas of the site that are performing the worst, looking for high drop-off rates and poor conversion. Now you have your areas of focus you can look at more granular metrics to gather more context on the points of friction.
Scroll maps: Are users missing key information as it’s placed below the fold?
Click maps: Where are people clicking? Where are they not clicking?
Traffic analysis: What traffic source(s) are driving users to that page? What is the split between new and returning?
Usability testing: What do users that fit your target audience think of these pages? What helps them? What doesn’t help?
Competitor analysis: How do your competitors present themselves? How do they tackle the same issues you face?
Each research method has its pros and cons. Keep in mind the hierarchy of evidence. The hierarchy is visually depicted as a pyramid, with the lowest-quality research methods (having the highest risk of bias) at the bottom of the pyramid and the highest-quality methods (with the lowest risk of bias) at the top. When reviewing your findings place more importance on findings that come from research methods at the top of the pyramid, e.g. previous A/B test findings, than research methods that come at the bottom (e.g. competitor analysis).
Step 2 – Prioritise areas that should be redesigned
Once you have gathered your data and prioritised your findings based on quality of evidence you should be able to see which areas you should focus on first. You should also have an idea of how you might want to improve them. This is where the fun part comes in, and you can start brainstorming ideas. Collaboration is key here to ensure a range of potential solutions are considered. Try and get the perspective of designers, developers, and key stakeholders. Not only will you discover more ideas, but you will also save time as everyone will have context on the changes.
It’s not only about design. A common mistake people make when doing a redesign is purely focussing on design and making the page look ‘prettier’, and not changing the content. Through research, you should have identified content that performs well and content that could do with an update. Make sure you consider this when brainstorming.
Step 3 – Pilot your redesign through a prototype
It can be tempting once you’ve come up with great ideas to go ahead and launch it. Even if you are certain this new page will perform miles better than the original, you’d be surprised how often you’re wrong. Before you go ahead and invest a lot of time and money into building your new page, it’s a good idea to get some outside opinions from your target audience. The quickest way to do this is to build a prototype and get users to feedback on it through user testing. See what their attention is drawn to, if there’s anything on the page they don’t like or think is missing. It’s much quicker to make these changes before launching than after.
Step 4 – A/B test your redesign to know with statistical certainty whether your redesign performs better
Now you have done all this work conducting research, defining problem statements, coming up with hypotheses, ideating solutions and getting feedback, you want to see if your solution actually works better!
However, do not make the mistake of jumping straight into launching on your website. Yes it will be quicker, but you will never be able to quantify the difference all of that work has made to your key metrics. You may see conversion rate increase, but how do you know that is due to the redesign and nothing else (e.g. a marketing campaign or special offer deployed around the same time)? Or worse, you see conversion rate decrease and automatically assume it must be down to the redesign when in fact it’s not.
With an A/B test you can rule out outside noise. For simplicity, imagine the scenario where you have launched your redesign, in reality it made no difference, but due to a successful marketing campaign around the same time you saw an increase in conversion rate. If you had launched your redesign as an A/B test, you would see no difference between the control and the variant, as both would have been equally affected by the marketing campaign.
This is why it is crucial you A/B test your redesign. Not only will you be able to quantify the difference your redesign has made, you will be able to tell whether that change is statistically significant. This means you will know the probability that the change you have seen is due to the test rather than random chance. This can help minimize the risk that redesigns often bring.
Once you have your results you can then choose whether you want to launch the redesign to 100% of users, which you can do through the testing tool whilst you wait for the changes to be hardcoded. As the redesign has already been built for the A/B test, hardcoding it should be a lot quicker!
Step 5 – Evaluative research to validate how your redesign performs
Research shouldn’t stop once the redesign has been launched. We recommend conducting post-launch analysis to evaluate how it performs over time. This especially helps measure metrics that have a longer lead time, such as returns or cancellations.
Redesigns are susceptible to visitor bias, as rolling out a completely different experience can be shocking and uncomfortable for your returning visitors. They are also susceptible to novelty effects, where users can react more positively just because something looks new and shiny. In either case, these effects will wear off with time. That’s why it’s important to monitor performance after it’s deployment.
Difference in performance for new vs. returning users
Redesigns are all about preparation. It may seem thorough, but it should be with such a big change. If you follow the right process you could dramatically increase sales and conversions, but if done wrong you may have wasted some serious time, effort and money. Don’t skimp on the research and keep a user-centred approach and you could create a website your audience loves.
If you want to find out more about how a redesign worked with a real customer of AB Tasty’s and REO – take a look at this webinar where La Redoute details how they tested the new redesign of their site and sought continuous improvement.
The combination of intense competition and rapidly evolving technology requires businesses to prioritize customer experience optimization (EXO) to stay ahead.
The fact is, the cost of poor customer experience is high. According to a PWC survey, a third of consumers would stop using a brand they love after just one negative interaction.
In this article, we look at some common EXO challenges businesses face and strategies to overcome them, including practical insights for enhancing the digital customer experience. By implementing these strategies, you can ensure your business takes a customer-centric approach to optimizing the customer experience and building brand loyalty.
What is customer experience optimization?
Customer experience optimization refers to everything your business does to improve the customer’s experience at every touchpoint of their journey. It entails deeply understanding your customer’s needs and preferences and leveraging these insights to develop strategies to improve their interactions with your brand.
In today’s digital landscape, customers are flooded with choices across most categories of products and services. As a result, if you fail to deliver a positive experience, your customers will simply switch to a competing brand. EXO strategies are designed to keep customers satisfied and engaged, build brand loyalty, and reduce churn.
With EXO, it’s essential to deliver an experience that surpasses customers’ expectations and provides them with a seamless experience across all touchpoints and channels, including websites, mobile apps, social media accounts, and email.
Why customer experience optimization is important for business growth
First and foremost, EXO streamlines the customer’s path to purchase. Offering customers a frictionless, positive journey that makes it easy for them to get the information they need to make their purchase decision increases the likelihood of a successful transaction.
Customer EXO is also an ideal way to foster brand loyalty. Customers who have a superior experience with your brand are more likely to become repeat buyers. In fact, Deloitte research shows that a high-quality customer experience makes a customer 2.7 times more likely to keep buying from a business than a low-quality experience. Not only are customers likely to return, but they will also pay up to 16% more for an optimized experience, depending on the product category.
Positive experiences also trigger word-of-mouth recommendations, enhancing your brand’s reputation. Recommendations don’t entail the same acquisition costs as traditional marketing methods, making EXO a comparatively cost-effective way to boost sales and expand your customer base.
Challenges and solutions to customer experience optimization
We recognize there are challenges associated with EXO that may prevent you from delivering the best possible experience to your customers. Here are some strategies for tackling these challenges.
Compiling the right data for accurate measurements
Thanks to the various technologies available, we can now access a wealth of customer data. If interpreted and applied correctly, this data offers invaluable insights into the customer experience and ways of enhancing it. However, the sheer volume of these metrics can lead to information overload. It’s easy to get distracted or focus on the wrong metrics, including pitfall metrics that result in misinformed conclusions when considered in isolation. Some metrics, like cost of sale or cross-sell, don’t offer any meaningful insights into EXO.
The solution is to prioritize the metrics that matter. These include:
Keep in mind that this data may reside in various departments across your organization, extending beyond sales, marketing and customer service teams. Consolidating this disparate data is essential to gaining a complete and accurate picture of customer experience in your organization.
Developing the right hypothesis
Experimentation is a powerful tool for delivering an optimal customer experience. However, randomly choosing hypotheses to test is a quick route to overlooking optimization opportunities. For example, simply changing the location of the checkout button in response to low conversion rates may not address the underlying issue.
Effective experimentation requires a considered approach to develop the correct hypothesis to test. The first step is identifying the genuine problem that needs addressing. You can then formulate a hypothesis to test to uncover the root cause of the issue and identify a concrete solution.
This second step requires a critical analysis of your current site and potential improvements from the customers’ perspective. Sourcing a range of data, including web analytics, user tests, and customer feedback, can help guide your analysis. You should also consider the psychology of the prospective customer. Getting in their mindset can guide you toward potential solutions.
If we continue with our checkout button example, the core issue may extend beyond conversion rates to a more specific concern: high cart abandonment rates. A hypothesis with a potential solution to this issue may be: “Many customers exit the checkout process at step 5. Reducing the number of steps in our checkout process will reduce cart abandonment rates.” Crafting the right hypothesis is a crucial step in optimizing customer experience.
Resource constraints
Ideally, businesses would have unlimited resources to optimize customer experiences. However, in reality, EXO usually competes with numerous other business priorities, all vying for time, human, and financial resources. Investing in the infrastructure and technology for EXO can be costly. Hiring and retaining people with the necessary skills to implement effective optimization strategies can also be challenging. Data availability is another common resource issue, especially for businesses with lower website traffic who feel they need more information for optimization.
The good news is you can tailor your approach to EXO to align with your business’s circumstances. This includes starting with smaller-scale initiatives and expanding your efforts as your optimization strategies gain traction or more resources become available. Another option is to outsource EXO by engaging the services of a specialist customer optimization agency.
It’s also important to note that high-volume website traffic isn’t a prerequisite for identifying and implementing effective EXO strategies. While a 95% confidence level is often cited as the magic number for drawing meaningful conclusions from your data, you can still optimize websites with less traffic by lowering the threshold. Focusing on optimizing the top of the funnel, where there may be greater opportunities for EXO, is another useful strategy for low-traffic websites.
When a company works on improving EXO, its main focus is often on immediate ROI in experimentation, sometimes at the expense of other important metrics. While the bottom line is relevant to any business strategy, focusing solely on the financial outcomes of EXO can lead to short-sighted decision-making, jeopardizing longer-term sustainability.
Prioritizing immediate revenue gain above all else can negatively impact the customer experience. It makes it almost impossible for an organization to adopt a customer-centric approach, a fundamental requirement for EXO.
Experimentation isn’t always neatly quantifiable. Experiments are typically run within complex contexts and are influenced by various factors. While measuring ROI may be a criterion when assessing the success of your EXO strategies, it should never be the primary or sole one. Instead, shift your focus to the broader impacts of experimentation, like its contribution to better, more informed decision-making.
Not knowing what your customers want
A customer-centric approach is vital to delivering an optimal customer experience. This requires an in-depth understanding of who your customers are, their needs and preferences, and precisely how they interact with your business. Without these insights, you’re in the dark about what your customers want and when they want it. Meeting—let alone exceeding—customers’ expectations is impossible.
Customer wants and needs are as diverse as your customer base. They may include a desire for higher levels of personalization, seamless online interactions, flexible payment methods, faster customer support, better pricing, transparency or increased mobile responsiveness. What customers want also evolves as their journey progresses. If your EXO strategies fail to align with your customers’ desires at the right time, they are unlikely to succeed.
While there are several ways to uncover customer needs and wants, one of the most effective methods is to go directly to the source. Collecting customer feedback at each stage of their journey—via surveys, feedback management systems, voice of customers, and user interviews—lets you tailor your EXO strategies and deliver the improvements your customers truly want.
Lack of customer experience optimization tools
Successful EXO relies on quality data for insights into your customers’ journeys, needs, and preferences. To achieve this, you need the right tools to capture and analyze accurate data in real-time across multiple channels.
These tools include:
CRM systems to track historical customer behavior and relationships
Customer feedback and survey software to collect individual feedback for deep insights into what your customers want
Behavior analytics tools to interpret your customers’ interactions and identify opportunities to improve their experience
Experience optimization platforms, like AB Tasty, to design and deliver digital omnichannel customer experiences via experimentation
It’s important to review the needs of your EXO strategy and the available tools to choose the ones that best align with your customers’ and business’s needs.
How to improve the digital customer experience
Observe user behavior patterns
A robust data foundation lets you observe and understand customer behavior individually and identify broader trends. This information serves as a compass, guiding your EXO efforts.
Customer insights may reveal common pain points. For example, a frequently searched term may highlight a topic customers want more information on. These insights also help you understand how users interact with your site, how that impacts their journey, and potential improvements. Is there a particular page where customers spend a lot of time? Do they have to navigate back and forth between pages to find the details they need?
Behavior patterns also reveal customer preferences, allowing you to personalize touchpoints within their journey and identify what triggers customers to complete their purchases. These insights serve as a powerful foundation for developing EXO strategies and hypotheses for A/B testing.
Create a journey map to understand the user flow
EXO involves optimizing every customer interaction with your business. A common pitfall to avoid when addressing EXO is approaching it narrowly from a specific touchpoint rather than considering the entire customer journey. A holistic approach delivers more impactful insights that help you manage the root causes of negative or neutral customer experiences.
A great way to understand your user flow and how it affects customer experience is to create a journey map, setting out every touchpoint during the buying process. Navigate your website like a potential customer, systematically stepping through the user journey and noting your findings.
Putting yourself in the customer’s shoes ensures you don’t overlook opportunities to optimize customer experience. This approach can also help you prioritize measures that make the user journey frictionless, improving customer experience and your site’s performance.
Develop a roadmap and set parameters to measure success
The list of available EXO measures is endless. Aligning your strategy with your business objectives requires a considered approach to implementation. To do this, develop a roadmap that outlines your goals, priorities and milestones.
A well-structured roadmap gives your team clear direction and deadlines while guiding decision-making to ensure the greatest impact on customer experience. Everyone understands their role, guaranteeing accountability in the execution of your EXO strategy. It also helps you prioritize initiatives and allocate the necessary resources, including EXO tools.
In your roadmap, you can list the specific metrics and KPIs to measure and track your progress. Doing this allows you to evaluate your EXO measures, readjust those not delivering results, and build on particularly effective ones.
Experiment and re-challenge your past experiments
You’re unlikely to unlock the secret to EXO in your organization on the first try. Instead, you’ll need to run continuous experiments using different hypotheses to find the right combination of strategies that work for your business.
The customer experience is dynamic and your EXO strategies should be equally adaptable. Continue to review your previous experiments to see what more you can learn from them, especially in terms of customer preferences. This process enables you to identify emerging opportunities for improvement and further refine the measures with the most impact to deliver an optimal customer experience.
Customer-centric EXO
Acknowledging that your business must prioritize customer EXO is just the beginning. By understanding the customer experience definition, common EXO challenges, and practical strategies to overcome them, you have the tools to deliver a consistently superior customer experience. By integrating a customer-centric ethos with your EXO strategies, you’ll not only strengthen current customer relationships but also cultivate enduring brand loyalty.
Best Practice for Optimizing Mobile vs Desktop Experiences
For product and web teams, the prospect of mobile is both wonderful and terrifying. The wonderful: your product or website is available all the time! The terrifying: you now have to create and develop two (or three, or four) user experiences, all at once.
While your customers probably walk around with their phones all the time, they may also spend the majority of their workday on a desktop computer. They might browse your mobile website or app during sporadic free moments throughout the day, then finish their customer journey later, when they’re not limited by small screen sizes and thumb-based typing.
The bottom line? Your entire product experience needs to be seamless, and combined across all platforms and devices. When you’re building an app, chances are you’re building a desktop version for web browsers, and at least two versions for mobile: iOS and Android. Given that people might also use the app on their phone’s web browser—a different experience than on a desktop but not quite the same as a native phone app—it’s easy to wonder where to start with the design process!
Below we’ve outlined some key tips for doing just that.
Plan an Entire Digital Experience
Regardless, your designs across both desktop and mobile have two requirements right out of the gate: they must be intuitive, and they must be accessible for people with disabilities.
You’ll also want to consider the fact that designing apps with a “mobile first” mindset is now a standard, because 1) users will expect to be able to access your digital ecosystem from their phones, and 2) web apps that are optimized for mobile rank higher on Google, which can lead to more conversions.
Before you start designing your app, make sure you plan to accommodate the key differences between desktop and mobile:
Both desktop and mobile experiences are crucial for customer conversion and retention, but often in different ways and in different circumstances. Below, we’ll take a look at best practices for keeping your mobile and desktop experiences updated and healthy for your sales funnel.
Best Practice for the Mobile Digital Experience
Whether your mobile experience exists within a dedicated iOS or Android app or simply as a responsive web-based app, there are some key best practices to be aware of when building your design strategy to maximize conversions and retention.
1. Keep it accessible, always
If your website or app is used by the public, it legally must comply with accessibility standards. These include:
Text size options
Large, easy-to-use buttons and CTAs
Minimum color contrast ratios
Simple touchscreen gestures
Adjustable screen orientation
Compatibility with screen readers
Content translation ability
2. Make sure your mobile content is consistent with desktop
If your users regularly hop between their computer and phones, it’s important that they can easily and consistently find what they need. This can include information, tools, actions, products, and more. If they’re available on desktop, they should also be available on mobile!
For example, if you have a menu on your desktop app that offers users different ways to contact customer service but it’s missing on mobile, it will likely cause frustration when users are trying to get help on the go.
3. Consider your mobile users’ needs
Ask yourself: What data, tools, or functions will your users be accessing? Make everything easy to find, navigate, and use. This might start with an intuitive navigation system that lets users easily:
Make purchases
Find specific tools they love to use
Manage their account or subscription
Get help from your support team
You’ll also want to consider what your different users will be trying to do and from where. Will they be using cellular data (slow) or wi-fi (fast)? Will they be reserving certain actions for mobile vs. desktop? Will tasks that may have started on a processor-heavy desktop app later migrate to mobile (or vice versa)?
For example, a video editor might need to use a desktop app to edit terabytes’ worth of cinema-quality video before switching to mobile to share the final piece on social media. Personal workflows might vary, but it all gets down to having the right tools on hand at all times.
4. Check how your site and app perform across different devices
You’ve built your iOS app. You’ve built your Android app. Your responsive website’s parameters are set so they’ll adjust responsively for users accessing from phones and tablets.
Now comes the testing. App Store or Google Play installations should work seamlessly. Each button, form, menu, and action must work flawlessly. Load times should be fast, and there should be little to no latency between screens (though this can vary with web-based apps, depending on how they’re constructed).
For responsive sites, each element will have CSS parameters that dictate how it will appear on a phone, tablet, or desktop computer. You don’t need separate versions of your website, but each element must be tagged correctly so it renders properly on each device.
5. Make UX choices that encourage conversion and retention
Good UX (user experience) comes from good user research and robust product analytics, but it’s customer conversion and retention that will keep your app alive. If users buy items or services through your app, you’ll want to keep these top UX tips in mind:
Never hide menus and navigation options.
Make search bars easy to find.
Make product browsing simple.
Choose familiar, suitable icons for cart checkout processes.
Label all icons, buttons, and navigation items.
Make checkout funnels easy (including credit card selection/adding), or incorporate simple payment options like Apple Pay or Google Pay.
Consider adding a subscription option so users can set it once and forget it!
Don’t forget that there are product analytics tools available to analyze the particular actions your users take, including Session Replays. These help you identify which parts of your UX design are working and which parts are causing friction.
Best Practice for Desktop Optimization
Desktop apps (many of which are web-based) are also commonly used and have more screen real estate to work with. Here are five tips to optimize your desktop experience to convert (and retain) new customers:
1. Create an engaging homepage
A great UX on your homepage can make or break conversion rates. When you’ve spent time and resources optimizing SEO, you’ll want to give potential customers a good first impression with a strong design. Here’s what we recommend to maximize conversion and retention:
Keep your design simple with a single, clear CTA.
Make sure it meets accessibility standards.
Use a catchy headline and simple buzzwords to make your value proposition clear and concise.
Choose the right colors by employing and understanding color psychology.
Differentiate hyperlinked text with an accent color.
Embrace white space! Space around your text can keep people reading it.
Use well-lit, professional images and videos where they fit organically.
Again, make sure your site is responsive to serve mobile users!
2. Improve website speed
Nothing deflects a website visitor faster than a glacially slow load time. To avoid losing possible customers, you can:
Optimize your images by saving compressed versions at 72dpi.
Limit the number of assets needed to load your page correctly—this can help reduce HTTP requests, which speeds up load times.
Limit the use of external scripts.
Remove unnecessary text, white space, and comments from CSS and Javascript files.
Use browser HTTP caching—this can offer faster load times for users who frequently visit your site.
3. Develop intuitive site navigation
Site navigation—typically in the form of a top menu, side-bar menu, or organized icons—shows users what to do once they reach your site. Use descriptive labels for each item, and simplify drop-down menu structures so users won’t get overwhelmed.
4. Make it easy to search for terms
Adding a search bar to your top menu can be a great way to give users a way to search your site for any term (or action) they want. This gives them a shortcut to find exactly what they need!
5. Ready your desktop site for final steps of conversion and retention
Often, consumers are more likely to say that desktop offers a more “convenient” shopping experience than mobile, and a majority of people complete purchases on a desktop.
As such, desktop websites are still used and still valuable, particularly for final conversation and ongoing retention. Whether it’s because customers are making complex purchases or simply seeing your checkout funnel more clearly on desktop, it’s essential to make sure every step of your experience is seamless.
Once you’ve converted customers, it can also help to keep track of their preferences so you can personalize their experience going forward.
Gain Valuable Insights with Heap
This is a guest blog written by Ben Lempert, Head of Content and Web at Heap.
Heap And AB Tasty provide businesses with the ability to collect and analyze user data efficiently, leading to more informed decisions and higher conversion rates. This dynamic combination offers a comprehensive solution for optimizing web experiences and increasing revenue through data-driven strategies.
Curious how you can find out what your users are doing across both desktop and mobile? Heap offers tools to help you track, measure, and ultimately optimize every touchpoint of users’ journeys across your entire digital experience.
One of the biggest challenges for mid-market businesses is keeping your website visitors engaged. At this point, you’ve grown your brand enough to have a significant amount of traffic, but are in search of the right strategy to nudge your passive visitors into paying customers.
When you have a significant number of passive visitors, enticing them to take action is crucial to growing your commercial activity, achieving your business objectives and creating loyalty.
After working diligently to get traffic on your website, how do you engage these visitors?
In this article, we will answer that burning question with some practical strategies to ultimately improve your conversions.
What are passive users?
Passive users are visitors on your website that do not take any action.
These individuals may browse through some content on your site, but they leave before impacting your conversion rates in a positive way.
They are simply just browsing your web pages instead of filling out forms, subscribing to newsletters, engaging with CTAs, or making a purchase.
How to identify passive users
To engage passive users, you have to identify them.
Website analytics tools, such as Google Analytics, can help you identify these particular users by recognizing patterns when you’re analyzing your users’ behavior.
With analytics tools, you can see:
Which pages are more likely to attract passive visitors
The number of passive visitors on your website
Which pages attract active users
The actions taken on each page
The amount of time visitors spend on each page
Where your visitors come from
And more
Note: Many analytics tools provide more metrics than you can manage. In other words, it’s easy to get lost in the sea of data and metrics. It’s important to identify key performance indicators to measure your user behavior consistently.
This information can help you understand user behavior and recognize what motivates visitors to take action if you analyze it correctly. Once you can identify these motivators, you can begin to create a strategy to employ similar tactics on other pages for consistency in your engagement.
Identifying and understanding your digital consumers’ behavior is the first step to reaching your conversion goals.
Why you need to engage your audience
Converting passive visitors into paying customers is crucial for success. A higher conversion rate means more revenue and growth opportunities.
To recap: in order to engage your audience, you will need to understand them based on the data you collect from their behavior. This collection of information will help you develop best practices and develop guidelines for your future endeavors. Not to mention, you will also see what doesn’t work.
Mastering this first step to engaging your audience will, at the same time, help you to create a more seamless and attractive digital customer experience.
As your company increases conversions, your brand reputation will grow in parallel. A great reputation attracts new customers and creates further brand loyalty.
Now the question is, how do you engage your users in the mid-market?
How to engage visitors with widgets
Unfortunately, maximizing your digital consumer engagement won’t happen overnight. Based on your consumer research on your website, you will need to create a plan to optimize your digital customer journey.
Offering incentives such as discounts, free trials or exclusive offers is one great way to engage passive website visitors. By doing this you are providing a reason for users to take action.
How can you achieve such engagement at a mid-market level?Leveraging widgets.
With little to no-code needed, widgets are the best tools you can use for your website optimization strategy. Deploying flexible, visually appealing, and impactful components, such as widgets, is a foolproof way to increase digital consumer engagement.
Here are a few ideas and advice on how you can implement widgets to boost your engagement:
Alert and notify with a pop-in
An exit-intent pop-in is one popular widget to set up on your page that can have a real impact on retaining your visitors before they leave. By displaying important information that your visitor might have missed, you are giving them another opportunity to benefit from your message.
Le Slip Français, a French clothing manufacturer, displayed a seasonal exit pop-in with free delivery during Valentine’s Day, leading to a 22% increase in clicks.
Leverage geotargeting banners
Having multiple regions requires you to differentiate your communication. With geo-targeted banners, you can maximize your chances of a conversion by sending the right message to the right digital consumer in the right location.
This type of widget can be used in a variety of ways such as creating a customizable banner to offer discounts or services at the closest physical store to the user, which could entice them to go to your location.
Be aware of overuse
It’s important to think of the right time and place for your information. Put yourself in the shoes of your digital audience and ask yourself what information would be enticing and what would be overwhelming.
Creating space with your messages is essential to avoid burdening visitors with too many pop-ins and banners. Even if you’re offering discounts for various reasons, be sure not to go overboard.
Test what works and what doesn’t
Every audience is unique. What works for one company may not work for the next.
This is why A/B testing your new ideas is important to find out what your audience likes. Without testing, a bias based on your personal likes and dislikes can get in the way of data-driven decision-making. Experimentation is the only way to find what works for your customers without making prior assumptions.
Want to start enticing your customers with widgets and leveraging A/B testing on your website?AB Tasty is the best-in-class experience optimization platform that empowers you to create a richer digital experience – fast. From experimentation to adding widgets, this solution can help you activate and engage your audience to boost your conversions.
Benefits of engaging digital consumers with widgets
Providing your visitors with additional opportunities to engage with your website can bring a number of benefits to your business, which include:
Drive conversions
Your visitors have already communicated their interest in your products by visiting your webpage. Now they need to be convinced that your products or service will be worth it to nudge them down the funnel.
Find out what influences your digital consumers’ decision-making with different tactics:
A countdown timer creates excitement for digital consumers. Alerting visitors that there is a timely discount helps create a sense of urgency that will help them make a decision, fast.
Adding social proof to your product pages is a popular scarcity and urgency tactic used by many marketers to help draw attention to certain products. By letting visitors know that their peers are also interested in the same product, they will feel a sense of comfort knowing they aren’t alone.
As an example, NYX cosmetics leveraged AB Tasty’s social proof banner widget on their product pages to create desire. Without any coding knowledge, NYX created this test and saw a 2x increase in their transaction rate compared to the original version.
Increase basket size
Another benefit of engaging users on your website is increasing the average basket size.
By adding widgets that propose complimentary products to your consumer’s purchases, you are actively encouraging them to add more to their basket while highlighting benefits that they may receive.
Let non-subscribers know they are eligible for a discount if they upgrade or give visibility to a free shipping discount by adding a progress bar.
Decathlon, a French sporting goods retailer, implemented a progress bar using AB Tasty’s easy-to-use widgets. By offering this special “gift” of free shipping to customers who filled the progress bar, they saw a 10% increase in the transaction rate.
Build loyalty
Building loyalty is an ever-growing challenge with the growing market saturation. Post-purchase, you should focus your attention on building customer loyalty and creating new brand ambassadors.
One strategy to increase loyalty is by implementing widgets to collect information about their experience in the form of a pop-up survey. An exit pop-in is a great way to capture your customers’ attention while the transaction process is still fresh in their minds.
Unicef, an agency of the United Nations responsible for providing humanitarian and developmental aid to children worldwide, used an iframe widget to collect information about their digital consumer’s experience quickly and saw over 300 answers in a short period of time.
Engaging your digital audience
When you have fewer interactive elements, there’s nothing in place to entice visitors to stay on your website. This means ultimately ending up with more passive customers.
Meanwhile, placing easy-to-use widgets is a great way to grab your customers’ attention and give them the nudge they need to engage more with your website. Getting your digital consumers to make the switch from passive to active will eventually make a positive impact on the KPIs that matter to you most.
If you’re looking to drive conversions, increase your basket size or drive loyalty – widgets may be the perfect addition to your optimization roadmap.
Understanding your customers’ paths is no easy task. Each user has their own unique reason for visiting your site and an individual route that they take as they explore your pages.
How can you gain insights about your customers to improve your website’s usability and understand buying trends?
The answer is simple: build a customer journey map.
What is a customer journey?
A customer journey is the start-to-finish interaction customers have with your brand before reaching a specific goal.
Creating a compelling journey helps you stand out and shows customers that you care about their experience. An enjoyable customer journey promotes positive engagement, making for more satisfied customers that are more likely to return for repeat purchases.
In fact, a study from Forbes found that positive interactions lead customers to spend as much as 140% more.
Each step along the journey will provide you with valuable, real-time insights into customer behavior.
By better understanding your customers, you will be able to provide them with the best possible user experience every time they visit your online store. The best way to do this is by creating visual customer journey maps that present all this information about customers at a glance.
Visually mapping the customer journey
A customer journey map is a visual representation that helps you gain better insight into your customers’ experiences (from start to finish) from their point of view.
There are two vital elements to creating a customer journey map:
Defining your customers’ goals
Understanding how to map their nonlinear journey
By mapping out a customer’s digital journey, you are outlining every possible opportunity that you have to produce customer delight. You can then use these touchpoints to craft engagement strategies.
According to Aberdeen Group (via Internet Retailer), 89% of companies with multi-channel engagement strategies were able to retain their customers, compared to 33% of those that didn’t.
To visually map every point of interaction and follow your customer on their journey, you can use excel sheets, infographics, illustrations, or diagrams to help you better understand.
Customer journey maps also help brands with:
Retargeting goals with an inbound viewpoint
Targeting a new customer group
Forming a customer-centric mindset
All of these lead to better customer experiences, which lead to more conversions and an increase in revenue.
Choosing The Right Map
There are four different types of customer journey maps to choose from. Each map type highlights different customer behaviors as they interact with your business at different points in time. Choosing the right template is essential based on your goals.
1. Current State Template
The current state template is the most commonly used journey map that focuses on what customers currently do, their way of thinking and how they feel during interactions.
It’s great for highlighting existing pain points and works best for implementing incremental changes to customer experiences.
2. Future State Template
The future state template focuses on what customers will do, think, and feel during future encounters.
It’s useful for conveying a picture of how customers will respond to new products, services and experiences.
3. Day in the Life Template
This template is similar to the current state template because it visualizes present-day customer behaviors, thoughts and feelings. However, this template assesses how customers behave both with your organization and with peers in your area.
This type of journey map works best for spurring new initiatives by examining unfulfilled needs in the market.
4. Service Blueprint Template
When creating a service blueprint template, you typically begin with an abridged version of a current or future state journey map. Then you add a network of people, methods, procedures and technologies responsible for giving a simplified customer experience, either in the present or in the future.
Current state blueprint maps are beneficial for recognizing the source of current pain points, whereas future state blueprint maps help create an environment that will be necessary for providing a planned experience.
Steps to create a customer journey map
Creating customer journey maps may feel repetitive, but the design and application you choose will vary from map to map. Remember: customer journeys are as unique as your individual customers.
Step 1: Create Buyer Personas
Before creating a journey map, it’s important to identify a clear objective so you know who you’re making the map for and why.
Buyer personas help define customer goals, providing a deeper understanding of their needs and topics of interest. More detail makes for more realistic personas, which means you’ll need to do a fair amount of market research to acquire this data.
Start by creating a rough outline of your buyer’s persona with demographics like age, gender, occupation, education, income and geography. When you have that in place, you’ll need to get psychographic data on your customers. This kind of information may be harder to collect compared to demographic data, but it is worthwhile to understand customer preferences, needs and wants.
In short, demographics tell you who your customers are and psychographics provide insights into the why behind their behavior.
After making several customer personas, it’s time to do a “deep dive” into each to build a more accurate reflection of their experience.
Start by analyzing their first interaction with your brand and mapping out their movements from there.
What questions are they trying to answer? What is their biggest priority?
Step 3: List Customer Touchpoints
Any interaction or engagement between your brand and the customer is a touchpoint.
List all the touchpoints in the customer journey, considering everything from the website to social channels, paid advertisements, email marketing, third-party reviews or mentions.
Which touchpoints have higher engagement? Which touchpoints need to be optimized?
Step 4: Identify Customer Actions
Once you have identified all your customer touchpoints, identify common actions your customers make at each step.
By dividing the journey into individual actions, it becomes easier for you to improve each micro-engagement and move them forward along the funnel.
Think of how many steps a customer needs to reach the end of their journey. Look for opportunities to reduce or streamline that number so customers can reach their goals sooner. One way to do this is by identifying obstacles or pain points in the process and creating solutions that remove them.
This is a great time to use the personas you created. Understanding the customer will help you troubleshoot problem areas.
Anticipating what your customer will do is another important part of mapping the customer journey. Accurate predictions lead to you providing better experiences, which ultimately leads to more conversions.
Step 5: Understand Your Available Resources
Creating customer journey maps presents a picture of your entire business and highlights every resource being used to build the customer experience.
Use your plan to assess which touchpoints need more support, such as customer service. Determine whether these resources are enough to give the best customer experience possible. Additionally, you can correctly anticipate how existing or new resources will affect your sales and increase ROI.
Step 6: Analyzing The Customer Journey
An essential part of creating a customer journey map is analyzing the results.
As you assess the data, look for touchpoints that might drive customers to leave before making a purchase or areas where they may need more support. Analyzing your finished map should help you address places that aren’t meeting customers’ needs and find solutions for them.
Take the journey yourself and see if there’s something you missed or if there is still room for improvement. Doing so will provide a detailed view of the journey your customer will take.
Follow your map with each persona and examine their journeys through social media, email, and online browsing so you can get a better idea of how you can create a smoother, more value-filled experience.
Step 7: Take Business Action
Having a visualization of what the journey looks like ensures that you continuously meet customer needs at every point while giving your business a clear direction for the changes they will respond to best.
Any variations you make from then on will promote a smoother journey since they will address customer pain points.
A great way to test your variations to find out what betters serves your customers throughout their user journey is by leveraging A/B testing.
AB Tasty is a best-in-class A/B testing tool that helps you convert more customers by leveraging experimentation to create a richer digital experience – fast. This experience optimization platform embedded with AI and automation can help you achieve the perfect digital experience with ease.
Analyzing the data from your customer journey map will give you a better perspective about changes you should make to your site to reach your objective.
Once you implement your map, review and revise it regularly. This way, you will continue to streamline the journey. Use analytics and feedback from users to monitor obstacles.
The truth about customer journeys
Customer journeys are ever-changing. Journey maps help businesses stay close to their customers and continuously address their needs and pain points. They provide a visual of different customers which helps to understand the nuances of their audience and stay customer-focused.
Customer journey maps can vary widely, but all maps share the same steps. With regular updates and the proactive removal of roadblocks, your brand can stand out, provide meaningful engagement, better customer experiences and see positive business growth.
Say hello to Custom Widgets and goodbye to time-consuming back-and-forths when scaling ambitious customer experiences. With Custom Widgets, scale your best CX ideas across teams, brands and markets. AB Tasty has the largest widget library on the market, providing brands with over 25 pre-built ways to quickly engage consumers including scratch cards, NPS surveys and countdowns. But now we’re also giving you the ability to build, customize and share your own widgets! 🤩
Optimize the workflow between marketers, designers and developers
Custom Widgets are an innovation catalyst that fosters cross-team collaboration to bring ideas to life. Developers can now create highly customizable widgets following a step-by-step process. They simply code the different parts of the widgets using HTML, CSS and JavaScript and add various configuration options👩💻. This allows designers to easily tailor the widgets and ensure they meet brand guidelines 👨🎨. Marketers can then customize them for their campaign needs 🙋♀️.The new possibilities to engage with visitors are endless: wheel of fortune, carousels, lightboxes, etc. These Custom Widgets result in an optimized workflow that saves everyone time but still delivers exciting experiences. 💪
Create and scale a library of your best CX ideas
All Custom Widgets created (by developers, agencies, or AB Tasty) will be available in the widget library shared across all affiliates and accounts of a company. The library, accessible from the dashboard, is a great source of inspiration and ideationthat will speed up time to market and facilitate deployment across brands and markets ✨. The widget library will also include our existing widgets with selected use cases from AB Tasty clients to further guide you in creating the best customer journey. And, like with any other widget, marketers can easily customize the content and combine it with AB Tasty’s targeting to create powerful personalized campaigns with no coding skills and in minutes 🏃♀️.
Not sure where to start?
In our new widget library, our users can already enjoy 2 custom widgets available on the platform, a Wheel of Fortune and a gradient CTA button, that they can duplicate and modify to dive into how they work. On that same page they can click on “Create a custom widget” and follow our step-by-step process 🧐.
Why not try them now? If you’re looking for inspiration for your first Custom Widgets, check out our 30 Black Friday Tests ebook. It features successful tests from brands like Degrenne, a French cutlery and tableware retailer whose quality products are a staple in the hospitality industry. They wanted to accelerate the purchase process and provide a consistent omnichannel experience to their consumers. Using our widgets they gave their visitors the ability to see item availability in their local store 👇.
If you want to replicate this, your developers can create a Custom Widget that leverages geolocation data to create a pop-up displaying product availability in nearby stores. Your customers will be able to reserve their items and opt for in-store pickup. Once available in the widget library, other brands or countries you work with can access it, modify it and leverage it to provide their visitors with an omnichannel experience.
Once upon a time, driving digital customer experience optimization (EXO) meant having a competitive edge. You went the extra mile, you won. Nowadays, everyone is focused on EXO to the point where it’s the minimum necessary to stay in the game.
“Experience” encompasses the entire user journey across all touchpoints that a consumer encounters when interacting with your brand. Be it website, app, tablet, mobile, bot-generated or in-store, the quality of these interactions will impact your customers’ purchasing decisions and their loyalty.
Deliver solid experiences and it will shape your brand reputation and increase your conversion rates – the key is to never stop moving. Remain stagnant, and you’ll be overtaken; but if you can figure out what your customers want, find the line between what they’re looking for and what you can offer, and then evolve your interactions on an ongoing basis, you can deliver superior experiences and business success.
Here at AB Tasty we believe that optimization is the bare minimum you should be delivering. In order to stay competitive and stay ahead, the work should never stop. Establishing a continuous feedback loop through experimentation and data gathering and analysis are what it takes to maximize customer experience and keep your competitive edge.
In this article, we’ll cover:
[toc]
Why is customer experience optimization so relevant?
At the base, no matter what the product or sales channel, any business will try to satisfy their customers. Customer centricity has been around longer than we might think, but customer experience optimization really started to take flight as technology advanced and brand touchpoints and interactions diversified.
Throw in the fact that data is more readily available, collectible and collected, and suddenly the means to understand your customers better than they understand themselves is out there for the taking.
Not convinced that it really matters? Think again. PwC’s Future of CX report found that one in three consumers will walk away from a brand after just one negative experience. Furthermore, 73% of consumers nominate their experience in brand interactions as an important factor in making purchasing decisions.
Is customer experience optimization truly essential?
Think about your own experiences when shopping online. How does it feel? Which brands do you gravitate towards and which ones just don’t seem to tickle your fancy? Do they see you as an individual, a real person, or are you just another transaction to them? It only takes a moment’s pause to consider your own experiences to understand why optimizing customer experiences is not just important, but essential.
As consumers, we make decisions about where to shop, which products to buy and which ones to keep buying based on our past experience of acquiring and consuming them. What’s more: the aforementioned Future of CX report from PwC found that customers are more likely to try additional products and services from a brand they trust, and that they’re even willing to pay more, too – up to 16% more depending on the product category. It’s also less expensive to encourage repeat business (customer loyalty) than to acquire new customers, so leveraging customer experience optimization to drive long-term brand affinity and customer lifetime value will pay for itself.
The three key ingredients to supercharge your customer experience optimization
When a customer arrives on your site – whether they’re searching for products, comparing different options or just looking to learn more about your products – there are a number of steps they’ll go through to achieve their end goal. All of these add up to a path that they’ve taken through your website, and one that presents both opportunities and pitfalls when it comes to optimizing your site and meeting your customers’ needs. The more you can understand your user journey and implement improvements while removing frictions along the purchase funnel, the better your site will perform.
Gathering data about your customers’ behavior and preferences will give you the information you need to run experiments to discern the optimal setup using A/B testing. Not sure if your CTAs have the best wording? Test them! Trying to understand the best configuration for your landing page? Run an experiment! Have doubts about whether product images should be cropped or full body? We can examine that too!
Ultimately, you’re aiming to ensure that all roads lead to an increase in conversions – and driving UX optimization on an ever-changing customer pathway is necessary to keep you ahead of the game.
2. Improve your personalization efforts
Know your customers and tailor to their needs!
Tailoring a digital brand interaction to the unique needs of the person behind the screen builds customer loyalty and drives repeat business. In the experience economy, you’re selling your product plus the interaction with the brand and the purchase itself alongside it. The user experience when acquiring and consuming the product is just as important as the utility it performs. Accordingly, personalizing these digital exchanges with your consumers is key to long-term customer retention.
To better understand your customers on a personal level, building a solid data foundation allows you to best understand your users, identify their needs and deliver personalized experiences that will keep your shoppers returning again and again. After all, personalization is about getting to the root of what customers have shown you that they want and delivering against that.
As with your customer journey, responding to ever-changing desires can be challenging, so knowing your customers intimately is crucial for personalization success. Get it right and the impact is high so don’t leave any stone unturned when exploring improvement opportunities.
3. Implement server-side testing and feature management
Bring in the tech teams to expand your optimization activities!
Server-side testing is where we bring in the heavy hitters. While A/B testing can be rapidly implemented by marketing teams, server-side experimentation requires the buy-in and expertise of tech teams and developers.
Collaboration between the two groups is essential to deliver seamless customer experiences where the front-end (client-side) lures in your customers and the back-end (server-side) runs smoothly to ensure an effortless shopping experience. For instance, presenting a promotional offer (front-end) will only deliver results if the payment gateway runs glitch-free and the page loading times are fast (back-end).
Lukas Vermeer, director of experimentation at Vista, champions the value of testing both sides. “A lot of the value from experimentation…comes from two things: One is not shipping the bad stuff – a huge value point for experimentation. The other amount of value [comes from] figuring out strategically, going forward, what you should invest in.”
Lukas Vermeer, a guest speaker in the “1000 Experiments Club” podcast, champions the value of testing both sides (Source)
If your business has reached a certain level of maturity and sophistication, maximizing both client- and server-side testing will ensure that your optimization approaches are working the hardest they possibly can to deliver improved business outcomes.
How can customer experience optimization apply to different sectors?
E-commerce
Delivering digital customer experience optimization through experimentation can drive transactions, increase conversion rates and optimize user experience as you test your site in an effort to offer a smoother purchasing experience that caters to your users’ every need.
B2B
Not every website is for purchasing then and there; sometimes site visits are an initial step on a longer journey. You can drive lead generation for purchases in areas like automotive, bedroom furniture or holiday rentals by optimizing site layout, CTAs, and access to product and store information.
Travel
Offering a range of solutions, from individual products (like hotel or transport bookings) right up to comprehensive packages that take care of every step of a holiday, is a particularity of the travel industry. When bundling items together into packages, finding that pricing sweet spot is especially key. Server-side testing is particularly relevant in this field and can give you the tools to both curate your product offering and increase bookings as well.
Conclusion
When it comes to digital customer experience optimization, improving continuously is essential to your strategy; here at AB Tasty, we can’t stress that enough!
With both technology and customer attitudes evolving every second, the only way to keep the pace is by continuously adapting your company’s own optimization practices to respond to customer demands and unlock increased value and continuing loyalty.
Living and breathing such an approach means setting up your marketing, product and technical teams for smooth cross-collaboration and a shared mission and objectives. Ensuring that they’re also sharing the same experimentation and development roadmap to unlock resources and roll out improvements at the right time will keep your business on the road to success.
We teamed up with our friends at Creative CX to take a look at the impact of experimentation on Core Web Vitals. Read our guest blog from Creative CX’s CTO Nelson Sousa giving you insights into how CLS can affect your Google ranking, the pros and cons of experiments server and client side, as well as organisational and technical considerations to improve your site experience through testing, personalisation and experimentation.
What are Core Web Vitals?
Core Web Vitals (CWV) are a set of three primary metrics that affect your Google search ranking. According to StarCounter, the behemoth search engine accounts for 92% of the global market share. This change has the potential to reshape the way we look at optimising our websites. As more and more competing businesses seek to outdo one another for the top spots in search results.
One notable difference with CWV is that changes are focused on the user experience. Google wants to ensure that users receive relevant content and are directed to optimised applications. The change aims to minimise items jumping around the screen or moving from their initial position. The ability to quickly and successfully interact with an interface and ensure that the largest painted element appears on the screen in a reasonable amount of time.
What is CLS?
Let’s imagine the following scenario:
You are navigated to a website. Click on an element. It immediately moves away from its position on the page. This is a common frustration. It means you click elsewhere on a page, or on a link, which navigates you somewhere else again! Forcing you to go back and attempt to click your desired element again.
You have experienced what is known as Cumulative Layout Shift, or for short, CLS; a metric used to determine visual stability during the entire lifespan of a webpage. It is measured by score, and according to Core Web Vitals, webpages should not exceed a CLS score of 0.1
CLS within Experimentation
When working with client-side experimentation, a large percentage of A/B testing focuses on making experimentation changes on the client side (in the browser). This is a common pattern, which normally involves placing a HTML tag in your website, so that the browser can make a request to the experimentation tool’s server. Such experimentation tools have become increasingly important as Tech teams are no longer the sole entities making changes to a website.
For many, this is a great breakthrough.
It means marketing and other less technical teams access friendly user interfaces to manipulate websites without the need of a developer.It also frees up time for programmers to concentrate on other more technical aspects.
One drawback for client-side, is certain elements can be displayed to the user before the experimentation tool has had a chance to perform its changes. Once the tool finally executes and completes its changes, it may insert new elements in the same position where other elements already exist. Pushing those other elements further down the page. This downward push is an example of CLS in action.
Bear in mind that this only affects experiments above the fold. Elements initially visible on the page without the need of scrolling.
So when should you check for CLS and its impact upon the application? The answer is up for debate. Some companies begin to consider it during the design phase, while others during the User Acceptance Testing phase. No matter what your approach is, however, it should always be considered before publishing an experiment live to your customer base.
Common CLS culprits
According to Google’s article on optimising CLS, the most common causes of CLS are:
Actions waiting for a network response before updating DOM
Overall CLS Considerations
Team awareness and communication
Each variation change creates a unique CLS score. This score is a primary point in your prioritisation mechanism. It shapes the way you approach an idea. It also helps to determine whether or not a specific experiment will be carried out.
Including analysis from performance testing tools during your ideation and design phases can help you understand how your experiment will affect your CLS score. At Creative CX, we encourage weekly communication with our clients, and discuss CLS impact on a per-experiment basis.
Should we run experiments despite possible CLS impact?
Although in an ideal world you would look to keep the CLS score to 0, this isn’t always the case. Some experiment ideas may go over the threshold, but that doesn’t mean you cannot run the experiment.
If you have data-backed reasons to expect the experiment to generate an uplift in revenue or other metrics, the CLS impact can be ignored for the lifetime of the experiment. Don’t let the CLS score to deter you from generating ideas and making them come to life.
Constant monitoring of your web pages
Even after an experiment is live, it is vital to use performance testing tools and continuously monitor your pages to see if your experiments or changes cause unprecedented harmful effects. These tools will help you analyse your CLS impact and other key metrics such as First Contentful Paint and Time to Interactivity
Be aware of everyone’s role and impact
For the impact of experimentation on Web Core Vitals, you should be aware of two main things:
What is the impact of your provider?
What is the impact of modifications you make through this platform?
Experimentation platforms mainly impact two Web Vitals: Total Blocking Time and Speed Index. The way you use your platform, on the other hand, could potentially impact CLS and LCP (Largest Contentful Paint).
Vendors should do their best to minimize their technical footprint on TBT and Speed Index. There are best practices you should follow to keep your CLS and LCP values, without the vendor being held liable.
Here, we’ll cover both aspects:
Be aware of what’s downloaded when adding a tag to your site (TBT and Speed Index)
When you insert any snippet from an experimentation vendor onto your pages, you are basically making a network request to download a JavaScript file that will then execute a set of modifications on your page. This file is, by its nature, a moving piece: based on your usage – due to the number and nature of your experimentations, its size evolves.
The bigger the file, the more impact it can have on loading time. So, it’s important to always keep an eye on it. Especially as more stakeholders in your company will embrace experimentation and will want to run tests.
To limit the impact of experimenting on metrics such as Total Blocking Time and Speed Index, you should download strictly the minimum to run your experiment. Providers like AB Tasty make this possible using a modular approach.
Dynamic Imports
Using dynamic imports, the user only downloads what is necessary. For instance, if a user is visiting the website from a desktop, the file won’t include modules required for tests that affect mobile. If you have a campaign that targets only logged in users to your site, modifications won’t be included in the JavaScript file downloaded by anonymous users.
Every import also uses a caching policy based on its purpose. For instance, consent management or analytics modules can be cached for a long time. While campaign modules (the ones that hold your modifications) have a much shorter lifespan because you want updates you’re making to be reflected as soon as possible. Some modules can also be loaded asynchronously which has no impact on performance. For example, analytics modules used for tracking purposes.
To make it easy to monitor the impact on performance, AB Tasty also includes a tool, named “Performance Center”. The benefit of this is that you get a real time preview of your file size. It also provides on-going recommendations based on your account and campaign setup:
to stop campaigns that have been running for too long and that add unnecessarily weight to the file,
to update features on running campaigns, that have benefited from performance updates since their introduction (ex: widgets).
How are you loading your experimentation tool?
A common way to load an A/B testing platform is by inserting a script tag directly into your codebase, usually in the head tag of the HTML. This would normally require the help of a developer; therefore, some teams choose the route of using a tag manager as it is accessible by non-technical staff members.
This is certainly against best practice. Tag managers cannot guarantee when a specific tag will fire. Considering the tool will be making changes to your website, it is ideal for it to execute as soon as possible.
Normally it’s placed as high up the head tag of the HTML as possible. Right after any meta tags (as these provide metadata to the entire document), and before external libraries that deal with asynchronous tasks (e.g. tracking vendors such as ad networks). Even if some vendors provide asynchronous snippets to not block rendering, it’s better to load synchronously to avoid flickering issues, also called FOOC (Flash of Original Content).
Best Practice for flickering issues
Other best practice to solve this flickering issue include:
Make sure your solution uses vanilla JavaScript to render modifications. Some solutions still rely on the jQuery library for DOM manipulation, adding one additional network request. If you are already using jQuery on your site, make sure that your provider relies on your version rather than downloading a second version.
Optimize your code. For a solution to modify an element on your site, it must first select it. You could simplify this targeting process by adding unique ids or classes to the element. This avoids unnecessary processing to spot the right DOM element to update. For instance, rather than having to resolve “body > header > div > ul > li:first-child > a > span”, a quicker way would be to just resolve “span.first-link-in-header”.
Optimize the code auto generated by your provider.When playing around with any WYSIWYG editors, you may add several unnecessary JavaScript instructions. Quickly analyse the generated code and optimize it by rearranging it or removing needless parts.
Rely as much as possible on stylesheets. Adding a stylesheet class to apply a specific treatment is generally faster than adding the same treatment using a set of JavaScript instructions.
Ensure that your solution provides a cache mechanism for the script and relies on as many points of presence as possible (CDN)so the script can be loaded as quickly as possible, wherever your user is located.
Be aware of how you insert the script from your vendor. As performance optimization is getting more advanced, it’s easy to mess around with concepts such as async or defer, if you don’t fully understand them and their consequences.
Be wary of imported fonts
Unless you are using a Web Safe font, which many businesses can’t due to their branding, the browser needs to fetch a copy of the font so that it can be applied to the text on the website. This new font may be larger or smaller than the original font, causing a reflow of the elements. Using the CSS font-display property, alongside preloading your primary webfonts, can increase the change of a font meeting the first paint, and help specify how a font is displayed, potentially eliminating a layout shift.
Think carefully about the variation changes
When adding new HTML to the page, consider if you can replace an existing element with an element of similar size, thus minimising the layout shifts. Likewise, if you are inserting a brand-new element, do preliminary testing, to ensure that the shift is not exceeding the CLS threshold.
Technical CLS considerations
Always use size attributes for the width and height of your images, videos and other embedded items, such as advertisements, and iframes. We suggest using CSS aspect ratio properties for images specifically. Unlike older responsive practices, it will determine the size of the image before it is downloaded by the browser. The more common aspect ratios out there in the present day are 4:3 and 16:9. In other words, for every 4 units across, the screen is 3 units deep, and every 16 units across, the screen is 9 units deep, respectively.
Knowing one dimension makes it possible to calculate the other. If you have an element with 1000px width, your height would be 750px. This calculation is made as follows:
height = 1000 x (3 / 4)
When rendering elements to the browser, the initial layout often determines the width of a HTML element. With the aspect ratio provided, the corresponding height can be calculated and reserved. Handy tools such as Calculate Aspect Ratio can be used to do the heavy lifting math for you.
Use CSS transform property
The CSS transform property is a CSS trigger which will not trigger any geometry changes or painting. This will allow changing the element’s size without triggering any layout shifts. Animations and transitions, when done correctly with the user’s experience in mind, are a great way to guide the user from one state to another.
Move experiment to the server-side
Experimenting with many changes at once is considered against best practice. The weight of the tags used can affect the speed of the site. It may be worth moving these changes to the server-side, so that they are brought in upon initial page load. We have seen a shift in many sectors, where security in optimal, such as banking, to experiment server-side to avoid the use of tags altogether. This way, once a testing tool completes the changes, layout shift is minimised.
Working hand in hand with developers is the key to running server-side tests such as this. It requires good synchronisation between all stockholders, from marketing to product to engineering teams. Some level of experience is necessary. Moving to server-side experiments just for the sake of performance must be properly evaluated.
Server-side testing shouldn’t be confused with Tag Management server-side implementation. Some websites that implement a client-side experimentation platform through tag managers (which is a bad idea, as described previously), may be under the impressions that they can move their experimentation tag on the server-side as well and get some of tag management server-side benefits, namely reducing the number of networks request to 3rd party vendors. If this is applicable for some tracking vendors (Goggle Analytics, Facebook conversions API…), this won’t work with experiment tags that need to apply updates on DOM elements.
Summary
The above solutions are there to give you an overview of real life scenarios. Prioritise the work to be done in your tech stack. This is the key factor in improving the site experience in general. This could include moving requests to the server, using a front-end or server-side library that better meets your needs. All the way to rethinking your CDN provider and where that are available versus where most of your users are located.
One way to start is by using a free web tool such as Lighthouse and get reports about your website. This would give you the insight to begin testing elements and features that are directly or indirectly causing low scores.
For example, if you have a large banner image that is the cause of your Largest Contentful Paint appearing long after your page begins loading, you could experiment with different background images and test different designs against one another to understand which one loads the most efficiently. Repeat this process for all the CWV metrics, and if you’re feeling brave, dive into other metrics available in the Lighthouse tools.
While much thought has gone into the exact CWV levels to strive for, it does not mean Google will take you out of their search ranking as they will still prioritise overall information and relevant content over page experience. Not all companies will be able to hit these metrics, but it certainly sets standards to aim for.
Written by Nelson Sousa, Chief Technology Officer, Creative CX
Nelson is an expert in the field of experimentation and website development with over 15 years’ experience, specialising in UX driven web design, development, and optimisation.
At AB Tasty, we love to help you improve your customers’ experiences – and we are here to do the same for you on the AB Tasty platform! We’re constantly gathering feedback from our users, and next month, you’ll see us roll out our new navigation based on that feedback.
We’re doing this for a few reasons:
We want to give you the best – and that means further improving the quality of your experience on the platform. 💖
We want you to be able to find exactly what you need, when you need it – which means improving the organization of information, classifying your favorite (and new!) features in an easy-to-navigate way. 🕵️
We want you to have the most intuitive experience possible – by providing you with better guidance from the first time you log in and get you from A to B as quick as can be. 🗺
What does that mean for you?
We’ll guide you through the updates in the coming weeks, but here’s a sneak peek of what to expect:
Better visibility with a new sidebar navigation, allowing you to easily access any area of the platform with a single click – and collapse it for more workspace.
We’ve gotten rid of the hamburger menu in favor of giving you more control over where you want to go within the platform – whether it be Tests, Personalization, Audience, Analysis, or ROI – plus a login button to take you directly to Flagship, our feature management solution. 🧭
Improved access to Settings, reorganized to match our customers’ most-used options.
We’ve designed a sleeker look, consolidating settings menu for a cleaner appearance and easier navigation. 💅
New header to accompany you through every step of the workflow, from campaign creation to reporting, giving you a better bird’s eye view of a campaign’s status.
Your step-by-step buttons will remain exactly where they are, but the header will shift to make everything more easily visible to you – including an editable campaign name, status, and reporting, right alongside the tag and account info. 👀
We hope these exciting changes make a big impact on how you use AB Tasty! 💥
We know you might have questions as you go through the new navigation, and we are here to help! We also know you might have feedback – about the new design and beyond – and we invite you, as always, to share it with us on our Canny board, accessible via this link.
You may not be aware of this, but it’s likely that you’ve come across the serial position effect on more than one occasion.
A concept coined by renowned psychologist, Hermann Ebbinghaus, the serial position effect refers to how the location of an item in a sequence influences a person’s memory or recall.
The concept dictates that people usually remember items at the beginning or the end of a list or sequence with greater accuracy than those in the middle.
User experience (UX) designers leverage the serial position effect to improve their designs and create a richer, more seamless experience for consumers. This approach to digital design is present in the websites, apps or landing pages of iconic brands such as Apple, Nike or Electronic Arts (EA).
Here we’re going to explore the serial position effect in more detail, explore some notable design examples, and consider how you can use this powerful principle to improve your brand’s UX offerings.
What is the serial position effect?
When it comes to UX optimization, the order of things matter. As humans, we do indeed tend to remember the items near the start or end of a list — much like our brains respond well to storytelling.
Hermann Ebbinghaus coined the phrase based on in-depth studies on the short as well as long term memory and its impact on how we remember or perceive information. These studies were further developed by psychologists B.Murdock in 1962 and Glanzer & Cunitz in 1966.
These extensive studies resulted in the two vital serial position effect concepts: the primacy effect and the recency effect.
Primacy effect
The primacy effect is based on the discovery that an individual is likely to recall items, assets or information from the start of a list.
For instance, when someone attempts to remember something from a long list of words, they are likely to recall the terms words listed at the beginning, rather the middle.
As such, the primacy effect helps a user to remember the information they absorb first better than the information they see later on in their journey (further down a landing page, for example).
Recency effect
Essentially, the recency effect is a concept contrary to the primary effect. Rather than recalling information absorbed earlier on, the recency effect is based on the notion of people remembering the information they see last with more clarity. This model is dependent on short-term memory.
A mix of studies suggests that the recency effect is prevalent in thecourtroom. In many cases, jurors are more likely to recall, and agree with, the argument or conclusion they hear last.
In a UX design context, for instance, a potential customer will recall the last two items they saw on a personalized product recommendation carousel and purchase one of these products as a result.
The primacy and recency effect combined make up key elements of the serial position effect, which brings us onto our next point.
Applying the serial position effect to design
Now that you understand the fundamental concepts of the serial position effect, we’re going to consider how you can apply it to design — or more specifically, to user design interfaces.
Both the primacy and recency effect can have a significant impact on the design of user interfaces. Extensive lists of information put a strain on the human memory, often hindering perception and recall; and, by utilizing both ends of the serial position effect spectrum (primacy and recency), you can enhance your designs significantly.
By understanding that items or assets in the middle of a sequence are usually absorbed the least, it’s possible to leverage the serial position effect to minimize the loss of information. In doing so, it’s possible to create interface designs that are richer, more valuable, and easier to navigate.
Considering that 38% of consumers will bounce off a web page if its layout is poor or unattractive, getting your design right will prove critical to your long term success.
Applying the serial position effect to your interface design process is at its core, down to ensuring that users can navigate the items or information on your page intuitively.
If your design is digestible, fluid, and seamless, users will recall vital information with more clarity while taking desired actions like signing up to a newsletter or buying a specific product.
Here are four essential principles of applying the serial position effect to interface design:
1. Provide practical, task-relevant information
Adding and maintaining task-relevant information to your interface will not only make your design more engaging, but it will reduce the strain on users’ focus or recall.
Publishing platform Medium, for instance, has designed its user interface to simplify its interactions from a reader’s as well as a writer’s perspective.
With a host of visual tools tailored to the users’ preferred topics or interests, you gain a visual snapshot of information that offers access to relevant content and to your reading list, and allows you to create a new piece of content with swift, seamless actions.
2. Add recognizable cues
Adding dynamic cues to your user interface design minimizes cognitive strain while facilitating informational recall.
Audible notifications (e.g. pings when you receive a message) or textual cues (e.g. small informational pop-up boxes) create a real sense of recognition. Video games like ‘Need For Speed’ or ‘Broken Sword’ are excellent examples of cue-based design for user interfaces.
EA Games’ once popular ‘Plants vs Zombies’ game, for instance, utilizes a multitude of recognizable visual and audio cues to help players navigate their way through the game and remain ‘in the moment’ without pushing them to their cognitive limits.
Foley-style sounds unique to each move the player makes (planting sounds, digging sounds etc.), text-based captions that tell the player what to expect next, and visual icons at the top of the screen all work cohesively to make the user experience feel as natural as possible. You can apply similar cues to e-commerce sites to enrich your designs and make them more intuitive.
3. Reduce the level of recall required
The human attention span has its limits and, typically, can only retain five pieces of information at any one time.
If you prioritize limiting the necessity for recall, you will guide users through their journey in a way that helps them remember relevant information as and when required.
Technology colossus Apple utilizes a visual grid system with informational titles and scannable dropdown boxes to help its customers comprare models with ease and pick a product that suits their specific needs. At any one point in the interface journey, users are only presented with the information they need — details including essential specs, main comparisons, and price.
This simple yet effective design prioritizes the most valuable information, minimizing the need for recall in the process.
4. Emphasize essential information at the start and end
Playing directly into the hands of the primacy and recency effect, highlighting or placing the most essential information at the start and the end (or the top and bottom) of your interface, placing the less important items in the center.
World-renowned e-commerce leader Amazon, for example, displays digestible personalized prompts, commands, and information at the top of its homepage.
In the center of the page, you gain access to trending products and deals. At the bottom of the page, or interface, you’re presented with personalized suggestions based on your shopping history or browsing behavior:
This design technique maximizes the potential for users to recall the information that offers the most value or is likely to prompt further engagement. An effective approach that enriches the user experience while increasing the chances of regular consumer conversions.
“Design used to be the seasoning you’d sprinkle on for taste; now it’s the flour you need at the start of the recipe.”
— John Maeda, design & UX expert
Serial position effect for landing page UX
From the user interface design methods we’ve explored, it’s clear that the order, as well as the way you present information, have a significant impact on how people interact with your brand or business.
In today’s hyper-connected digital age, your UX offerings count more than ever. 88% of users are unlikely to return to a website or landing page after a poor user experience.
To enhance your landing page UX and create an experience that will increase engagement while encouraging customer loyalty, you should consider implementing the serial position effect.
To reiterate the impact the serial position effect can have on landing page UX, here’s a visualization of the serial position curve.
From a digital marketing perspective, the serial position curve clearly demonstrates that people recall information towards the start and end of an informational sequence, with items or messaging in the middle of a landing page absorbed least. It’s a steady consistent curve that can offer a practical framework for your landing pages’ UX designs.
Russian e-commerce brand, Marc Cony, uses the serial effect methodology to increase new user engagement through its primary landing page.
Marc Cony homepage highlighting discount information(Source)
Here, you can see that the landing page design is clean and minimal to simplify user navigation while highlighting its most engagement-driving messaging as soon as you visit.
As you navigate your way down the landing page, there is a clear hierarchy of information. Scroll down and you’re presented with the opportunity to personalize your shopping experience, before viewing content surrounding the brand’s blog and social media pages.
Finally, there is a clean, concise call to action (CTA) button that prompts you to sign up to the brand’s newsletter and ‘convert.’ This is an excellent example of how using serial effect principles can create a seamless user experience while guiding consumers towards a desired action — in this case, viewing sale items or becoming an email subscriber.
Online retail innovator, Thread, offers an interactive and visually-rich approach to reduce consumer recall and optimize its landing page for increased brand engagement.
Thread’s clean, grid-based design is easy to scan and it’s above the fold messaging prompts the user to take action without having to second-guess themselves.
Thread homepage visually-rich approach
This interactive approach offers personal value while offering an incentive to interact. Clicking on preferred styles requires minimal recall and, as such, keeps the information at the top of the page fresh in the mind of the consumer.
Thread website, subheadings navigation
Once you’ve selected your preferred styles, you’re directed to a new landing page. Clear subheadings help you navigate your way through the page with minimal cognitive strain, and once you reach the bottom, the ‘Next’ CTA tells you what to do.
This approach to the serial position effect helps to streamline the user experience while keeping consumers engaged in the brand at all times.
A well-crafted informational hierarchy and interactive visual approach is a testament to the power of presenting information effectively without overwhelming the user with unnecessary data. This is definitely a driving force behind the startup’s ongoing success!
Whether you’re selling goods or services, applying the serial position effect will help you improve your landing pages’ UX and increase your conversion rates.
The Digital Marketing Institute, primacy and recency effect on Homepage (Source)
Digital marketing course provider, the Digital Marketing Institute, utilizes both the primacy and recency effect to UX optimize many of its landing pages.
The DMI’s homepage, for example, includes a clearly labelled ‘Download Brochure’ button at the very top of the page. The main banner tells the user exactly what the brand does and how they will benefit from enrolling (using a second ‘Download Button’ to prompt action), thus leveraging the primacy effect to encourage conversions.
At the bottom of the landing page, the Digital Marketing Institute includes graphics showcasing its top-level clients to create a sense of brand authority that sticks in the consumers’ mind while providing clear, concise FAQs in a clean dropdown format.
This recency effect-style approach ensures that visitors can recall essential details about the courses the DMI provides while remembering the impressive clients that brand has served.
Applying the serial position effect to your landing pages will give your UX design and content concepts definitive direction, improving navigation and boosting engagement in the process.
To build on the examples we’ve explored, here are some additional tips based on the serial position effect to help you improve your landing page UX:
Place your most expensive items or services at the top of your landing page to make your mid-range items or services appear less expensive and increase your average order value (AOV).
Add an alluring image, strapline, and CTA button to your top of page banner to deliver important information in a way that minimizes cognitive strain and increases consumer conversions.
Break up the text in the middle of the page with subheadings, images, bolded or italicized font, bullet points and small chunks of text to make your UX design more navigable. Doing so will also increase your chances of leading consumers to important information further down the page.
Position valuable information and USPs towards the bottom of the page and use informational CTA buttons to tell the user what to do next.
Always ensure that your landing page design is clean, logical, and easy to navigate. If you don’t put functionality first, it’s likely that your UX offerings will be poor and your visitors will not retain any information.
How to use experimentation in design
Applying effective design and copywriting principles to your various digital touchpoints while leveraging the serial position effect to deliver valuable information to your consumers will accelerate your commercial success.
But, in an increasingly saturated digital age where the consumer has a wealth of their fingertips, how do you know if your design and serial position effect-based efforts are working as they should?
A range of factors including color, layout, design elements, and even a consumer’s cognitive bias can impact landing page browsing behavior. So, the best way to understand if your initiatives are working and experiment with design effectively is though A/B testing. With a combination of effective data and the right A/B testing platform, it’s possible to pinpoint a specific landing page or user interface’s strengths or weaknesses.
By developing two versions of the same landing page, you can drill down into specific page elements and discover which performs best.
For example, you might find that version ‘A’ of a landing page is earning more engagement above the fold due to the design or placement of a ‘Shop Now’ button. Through testing, you might also find that version ‘B’ is converting more email subscribers as a result of a particular piece of copy or messaging.
If you hone in on this wealth of comparative information, you will gain the power to experiment with every design element imaginable, taking the best-performing elements to create a fully-optimized version of a specific page or touchpoint.
A/B testing will give your design experimentation activities shape while protecting your marketing budget.
If you understand which messaging or design elements to focus on, you can get to the root of the issue and make tweaks for optimizations that are likely to offer the best possible return on investment (ROI).
Concerning the serial position effect, through A/B testing and experimentation you will be able to flatten the serial position curve to balance the information on your interfaces or landing pages.
By balancing the information elements on your interfaces or landing pages, you can make your UX designs easier to navigate while improving brand engagement. You will also gain the ability to experiment with design elements to emphasize the information or assets featured at the top or bottom of your digital touchpoints.
Essentially, if users aren’t engaging with the information at the top or bottom of a specific page, it will become clear that your serial position effect-centric efforts aren’t working. From there, you can experiment with the hierarchy of your information in addition to design elements including buttons, color combinations, imagery, copy formatting, and text boxes.
At this point, it’s worth noting that in our ever-evolving commercial landscape, experimentation never stops. What works today may not tomorrow — and to optimize your digital touchpoints for sustainable growth, constant testing and evolution is essential.
“Design creates culture. Culture shapes values. Values determine the future.” — Robert L. Peters, Graphic Designer
Final thoughts
We’ve outlined the fundamentals of the serial position effect and looked at how to apply the concept to UX and landing page design while outlining the importance of experimentation and testing.
Reflecting on our journey, what is crystal clear is that, in order to deliver the very best designs and UX offerings to your consumers, you need to reduce cognitive strain as much as possible.
The serial position effect helps us to understand human limitations in terms of both long term and short term memory, as well as the importance of ordering your information effectively.
As designers, when applying the serial position effect, it’s critical to empower the user by providing task-relevant information on the screen where possible, sharing concise prompts or cues, reducing the level of recall needed across the user journey, and highlighting the most valuable information at the start and end of a sequence where necessary.
When interacting with your digital touchpoints or interfaces, your users shouldn’t be overwhelmed with information. They should be able to navigate every aspect of your interfaces or landing pages intuitively, with little additional thought, while understanding what to do next and why they are doing it.
Your UX and design offerings should deliver relevant, valuable information to your users in a way that is completely seamless — and, by using the serial position effect to guide your decision, you will set yourself apart from the competition.