Improving real-user experience with observability

In this blog, you’ll learn about what user experience (UX), user experience optimization (UXO), and real user monitoring (RUM) are, why these are important to your business, and how observability tools like New Relic can help you improve your users' experience.

What is user experience (UX)?

Have you ever heard the term UX and wondered what someone was talking about? That term is used to describe the UX of a product or service. For example, if a user was on your website, they may attribute a slow-loading page or an error during the checkout process to a bad UX on your website. 

Imagine another scenario where a user is texting on an old mobile phone, and they have to click the number “1” button multiple times to specify different letters: one press equals “a”; two presses equal “b”; and three presses equal “c.” Now contrast that with the UX of a modern smartphone, where you have a dedicated keyboard and can press any key you want. In that example, a user would likely equate the first scenario with a bad UX and prefer to use the better product, in this case, a modern smartphone. 

UX is an important aspect of products today, and there’s a lot of behind-the-scenes work that goes into designing a successful product. Getting that perfect product that people want to use will require various UX personas like user researchers, interaction designers, visual and graphic designers, information architects, a/b testing, and performance testing.

What is user experience optimization (UXO)?

Now that we know what UX is, we can discuss user experience optimization, also called UXO. When building a product or service, you may not get it just right on your first try. If you think about the last time there was a recall on your car, that would be a good example of not getting it right the first time around for the product. You often hear in the car world, "Don’t buy the first model year of the redesign because you know there are going to be issues that need to be corrected." Often, it’s better to wait for the next model year, when improvements have been made, to fix the first design. 

Software products and service creators are not immune to this problem either and often don’t get it right the first time. When it comes to UX, you want to make sure you’re collecting data to help you make informed decisions on improving it. It’s likely that you will collect data from different sources, such as user reviews, usability tests, or analytics. Using these data-driven insights to monitor and improve your product experiences is really what UXO is all about. These insights can provide the information your UX, developer, and product teams need to eliminate guesswork about what needs to change, allowing you to focus on what matters most.

What is digital customer / real user monitoring?

When discussing user experience, we also need to mention another concept called real user monitoring (RUM). RUM records and analyzes the digital customer interactions with an application, including the time it takes for web page elements to load, whether there are any errors on the page, and how long AJAX and HTTP requests take. RUM can also help you better understand how digital customers interact with your websites, which can help you make improvements to them and provide more value to your visitors.

Since the final UX usually occurs in the browser, RUM is also occasionally referred to as browser or mobile monitoring. RUM measures client-side performance in the browser or mobile app used by users to interact with your application, as opposed to other components of application performance monitoring, which measure server-side performance (the backend).

Every interaction, whether through a website, mobile app, or IoT device, contributes to the overall impression a customer has of a company. The quality of these digital impressions is crucial, as degraded digital customer experience can result in losing customers.

Delivering a great experience requires the flawless coordination of multiple services and systems. Customers expect instant and seamless service without any delays or failures, and if these expectations aren’t met, they will seek alternatives.  It’s important to put the right tools in place to allow your teams to ensure that your systems are providing a great customer experience.

Why RUM is important

Businesses increasingly depend on digital channels for customer satisfaction and revenue. Approximately 80–90% of end-user wait time is experienced in web browsers and across the network. Therefore, businesses focused only on uptime miss huge opportunities to increase customer engagement and improve business results.

Why should companies care about real UEO?

Creating a good experience for customers is essential for any business because a poorly designed product can lead to many issues like negative reviews, cart abandonment, frustration, churn, and lost revenue. Conversely, having a good UX can increase loyalty, revenue, and user engagement.

When we think about a good UX, we usually think about companies like Costco and Amazon. Costco has a great return policy for its members, so many customers are never afraid to buy something there. It’s common for Costco customers to think, “Just buy it, and if you don’t like it, you can always bring it back.”  Amazon patented the “1-Click button” for ordering back in the day, and this was something that was unheard of at the time. It simplified the process of purchasing. Amazon also created something special with their Prime program, which drastically changed the nature of shopping online, 2-day shipping, and now 1-day and even same-day shipping, depending on the products and where you’re located. These features from these companies make their customers loyal and consistently engaged in their shopping experiences, and the customers are definitely doing their part to increase the revenue of these companies.

To provide an enjoyable UX, you don't have to be Costco or Amazon. Your organization will be able to make changes based on data rather than educated guesses if you have the appropriate technologies in place and monitor the experience your users are having. We’re fortunate to have solutions like the New Relic observability platform that are simple to set up and use. With New Relic browser monitoring, we can rapidly get RUM up and running and gain insights into the actual user experience. Once these tools are in place, teams are able to focus on the most important areas to improve, and you have the data to measure the changes over time for tracking improvements.

Slow sites create unhappy users and are generally bad for any online business. Some stats below show how important real UX is:

• 80–90% of end-user wait time is spent on the client side (for example, the web browser).
• After three seconds of waiting, up to 40% of users will abandon (Lara Hogan).
• BBC found that for each second of increased page load time, 10% of users leave the site.

Following are some of the key reasons why digital customer experience and real UX matter to organizations:

Digital shift: End consumers are digital now. You used to run a cable or satellite coax into a special box that gave you live TV. It also gave you a laggy, slow experience that you could only watch in your home. Now, you stream what you want when you want, anywhere you want. If your cable didn’t live up to your expectations, too bad. It was usually the only option in your area. If a streaming service doesn’t live up to your expectations, you drop that streaming service and switch to a new one that does. It’s not just media and entertainment either. It’s happening in every industry. This digital shift has given rise to new competition and given customers more options than ever.

Competitive differentiator: One steadfast competitive differentiator for businesses has always been their customer experience, and digital businesses are no different. Digital customer experience (DCX) is a competitive differentiator. Your applications need to be available, correct, and fast. If your applications aren’t, then customers will leave. Available, correct, and fast are only part of DCX, though.

Deep visibility: The ability to deliver a good DCX requires deep visibility into your applications across layers. Application performance monitoring (APM) is good, but it’s only part of what’s needed. Frontend monitoring is incredibly important. Frontend errors can be difficult to detect without monitoring, especially things like browser compatibility issues and JavaScript errors. Those errors have just as much of an impact on DCX as application errors. Frontend speed needs to be understood as well. User-centric performance metrics help to understand how a customer experiences an application.

Customer’s point of view (POV): Similar arguments can be made for infrastructure monitoring (for example, How can you ensure that your apps scale to meet your biggest days without infrastructure monitoring?) and synthetics monitoring (for example, running proactive synthetics tests to ensure availability, correctness, and speed of applications, APIs, etc.). The real point of it all is that businesses need to understand their applications from their customers’ POV. That requires monitoring every layer of an application: frontend, backend, and infrastructure, and synthetics testing applications across an array of demographics (for example, browser type, geography, etc.).

The challenge for developers: Today’s websites are more dynamic and complex than Web 1.0 when pages were mostly HTML and images. Developers need to create enhancements to features and pages while doing the following: eliminating JavaScript errors, ensuring third-party APIs and plug-ins don’t slow down or crash pages, updating company inventory, updating any impact from changes in web browsers or devices, troubleshooting slow networks, stay up to date with constantly changing frameworks and programming languages, etc. Developers are tasked with satisfying users, regardless of device, web browser, or network.

Developers and ops professionals must also respond to production incidents, needing to troubleshoot latency, errors, and anomalies.

Trends in the digital world that demand exceptional real UX

Direct-to-consumer relationships: Many businesses that haven’t traditionally sold direct-to-consumer (for example, M&E film studios and retailers) are now interacting with and selling to consumers digitally, with no third-party distributor. This gives companies the opportunity to build relationships directly with customers that can change their business and help redefine their brand. It is also forcing companies to build great digital experiences or perish.

Omnichannel: Consumers are engaging businesses on a variety of devices in different form factors, sizes, locations, and contexts. Delivering an aligned experience in design, function, and performance across these variables so that applications feel like one continuous experience instead of multiple discrete interactions is a goal many businesses strive for.

Widespread adoption of the cloud: Many companies today understand that to stay competitive and accelerate growth, they need the agility that only the cloud can provide and are therefore migrating certain applications and infrastructure to cloud service providers such as AWS, Azure, or Google Cloud Platform (GCP). A cloud-based infrastructure offers many benefits, including reducing on-premise technical debt, global access to modern services, and scalability. However, whether just planning, in the middle of, or already in the cloud, going through a cloud adoption journey is a constant stress for organizations large and small.

Breaking down the monolith: Organizations of all sizes are focused on modernizing their applications to allow for more frequent releases and to reduce the bottlenecks between the Dev and Ops teams. Microservices and, increasingly, serverless formats are the approaches of choice for breaking down applications into their smallest reasonable service to enable the continuous delivery/deployment of large, complex applications. Each microservice runs its own container, service, or function, and app developers can develop, manage, and scale the services independently, breaking down silos and drastically increasing the velocity and scale of software releases.

Containerize all the things: Wouldn’t it be nice if you could pack an application, with all its dependencies, into a dedicated box and run it anywhere (on-prem or GCP or AWS or a virtual machine), regardless of the software dependencies the host system has installed, or where and what the host system actually is? That’s the idea behind containerization. Containers are a commonly utilized application deployment method in modern and cloud environments because of the flexibility they provide.

Distributed tracing leveraged to identify dependencies and bottlenecks in complex environments: Architectures are becoming increasingly complex and distributed in modern environments. Containers spin up and down, and cloud resources are consumed on demand. Distributed tracing (DT) is the process of tracking and analyzing what happens to a request (transaction) across all of the services it touches in a distributed environment. With DT, IT departments can intuitively pinpoint dependencies and troubleshoot bottlenecks in these complex environments.

What’s needed in a real UX observability solution?

For the frontend, full stack, and web developers who build websites and must also respond to incidents, a real-user observability solution should provide detailed information. This information may include frontend data from modern performance metrics, JavaScript errors to help benchmark, improve page speed, customer experience, and end-to-end visibility of real user experiences through backend services to help locate and troubleshoot faster, in one connected experience. Essentially, an observability solution should provide visibility for resolving issues, and context for improving customer experience, in one easy-to-use platform. These are the three main aspects of a real user observability solution:

• Connect RUM for end-to-end visibility.
• Optimize customer experience with a widely deployed and adopted RUM solution.
• Correlate your website performance to your backend services and infrastructure. One of the key aspects of RUM is understanding and monitoring Core Web Vitals. Core Web Vitals are Google’s metrics that gauge overall user experience. They give valuable insight into how users view your business, which can influence your site’s SEO rankings. By having a score that captures user experience, you can take action on specific problems rather than guessing what your site needs. The three main Core Web Vitals are:
  • Largest contentful paint: Measures loading performance.
  • First input delay: Measures interactivity between user input and browser response.
  • Cumulative layout shift: Measures visual stability.

Key areas that affect web performance and real UX

• Web vitals were created by Google a few years ago. Some customers still use the page load event, which we also capture and group by the UI. New Relic University offers a fantastic self-paced course that will make you sound like a customer experience guru upon completion.
• JavaScript errors are all some developers ever want to know about.
• Asynchronous JavaScript and XML (AJAX) is generally used to update server-sourced content within a page without having to refresh the entire page. AJAX and single-page applications (SPAs) frequently go together, but sometimes one is used without the other. AJAX-enabled requests also are the entry point into capturing distributed traces from the frontend all the way to the backend.
• AJAX HTTP Response codes don't get a lot of attention in the UI, but maybe they should. If a call to the backend returns with a 400–451 code, it means something went wrong when making a call to the server. If it returns with a 500+ code, it means the application was unavailable or returned an error.

Why do we need a real-user observability solution?

Following are some key factors that describe why companies need real-user observability solutions:

Reliability 

A browser can assist in production incidents and high-severity issues. It provides at-a-glance diagnostics into the performance of web pages by geography, networks, internet service providers, web browser, and device type. Teams responsible for site reliability and resolving incidents can quickly determine if the problem is from backend services or if the internet is having a bad day (for example, network, ISP, etc.).

Customer experience, performance, and business outcome

IT buyers, especially in DCX-specific industries (media, e-commerce, travel, FinS), rely on RUM to understand how technology impacts customers.

Browser monitoring can help quantify how slow sites impact customer funnel engagement, end-user tolerance, and business outcomes.

What’s the value of solving the issue of bad real UX?

Improve digital business outcome: For web pages, speed correlates to revenue, abandonment, user engagement, and business outcome. Faster is better. The browser agent helps benchmark, improve, and optimize page performance, which results in more satisfied customers.

Troubleshoot faster: Adding RUM into your New Relic platform extends visibility from backend services and infrastructure, through end users who access your app on web browsers, over the network. Therefore, during incidents, devs or ops professionals have end-to-end visibility of latency, errors, and anomalies across their full stack and can more quickly troubleshoot incidents.

Ease of use: The solution should support technologies such as SPAs, be easily deployed, and get you data on page performance in minutes. Distributed tracing is easier to set up than other distributed tracing tools. New Relic customers can simply turn it on and see data in context.

How can New Relic help with elevating RUM?

New Relic RUM capabilities provide the most detailed user-centric data from any observability platform. The New Relic platform empowers dev and ops teams to benchmark and improve web and mobile performance. By extending New Relic from applications and infrastructure into websites, mobile apps, and all critical endpoints, teams can troubleshoot production incidents faster and optimize the customer experience across the web and mobile in one unified platform.

RUM is a vast space with lots of moving parts. The story starts with internal backend resources that support the applications, which have frontend elements for user interaction. However, it doesn’t end there, as you need to rely on third-party services to accomplish many different tasks within your website, including but not limited to advertisements, payments, and various APIs.

To ensure these elements are all working in harmony, you need a platform that can look at each of these areas and provide you with the context to ensure the operation runs smoothly. That’s where solutions such as the New Relic platform are vital to the health of the business.

With New Relic, you can monitor every layer of your application: the frontend with browser and mobile monitoring, the backend with APM, and the infrastructure with infrastructure monitoring. You can be proactive by running recurring, user-centric synthetic tests with New Relic synthetics. The New Relic observability platform and capabilities like log management connect this data, making it easier than ever to diagnose and resolve customer-impacting issues quickly or avoid them entirely.

New Relic browser monitoring is a revolutionary capability that allows you to track all the key areas explained earlier and connect your backend application to all of the user interactions with the UI. According to the website profiler BuiltWith, New Relic browser monitoring is deployed on over 2.78 million live websites.

With the extensive New Relic platform, it’s very simple to look at a user interaction and simply follow that interaction from the frontend all the way to the resources behind it. You can see all of the transactions that are a part of this interaction through distributed tracing and use the amazing logs in context capabilities to dig deep into the bare bones of the interaction. For example, in the screenshot below, you can follow a call from the browser application through backend services all in one trace:

On top of all these products, you can leverage New Relic alerting and make sure you and the team are informed of any abnormality or anomaly that’s occurring in your product. 

Change tracking allows you to capture changes that occur in your environment and view those change events in the UI. Users are able to drill in and see details of the change, along with the before and after scenario impact on various metrics captured out of the box. Below is an example of the change tracking UI for automatic deployment.

In summary, the primary benefit of New Relic browser monitoring is that it provides real-time data from real-user behavior with extensive details and correlation. Additionally, New Relic browser monitoring is customizable, allowing you to include custom attributes that can provide additional value to you; for example, business data or logged-in users that can later be used in analysis or custom reporting. This means that application owners or developers can quickly identify and diagnose the problems before they arise, as the product can identify anomalies in your data before they become a real issue. This product will boost user satisfaction as they will experience fewer outages and faster load time as the user will spend more time on the website and will have a smoother experience. 

RUM in the New Relic platform is not only scoped to websites, as there’s a very strong product offering that allows you to monitor your mobile applications. New Relic offers many platform-specific agents that could be installed on your mobile application and gather vital information from your user interactions with your mobile application. 

Similar to browser monitoring, you’re able to correlate backend and frontend data and avoid potential issues or resolve them in no time. You can also monitor cross-platform applications and dig deeper into the code level, as the mobile agent supports hybrid platforms. 

Some of the major advantages of the New Relic mobile app include but are not limited to Crash analytics, user interaction details, HTTP requests and errors, and version trends, and, as of today, New Relic mobile monitoring supports Android, iOS, React Native, Capacitor, Cordova, and Flutter. We’re working on releasing new platform supports in the future.

Every data point that is captured by New Relic agents or APIs can be used in a dashboard using New Relic Query Language (NRQL). This will allow further customization of the visualization that is important to your business and stakeholders.

One great example of that is a dashboard called “Customer Experience Quality Foundation” that we created for some of our customers to have an overall view of the health of their system with a focus on user interactions with their applications. Below, you can see a screenshot of this dashboard.

Customized visualization, such as the above dashboard, showcases the ability of New Relic products to provide you with extensive and detailed data regarding all aspects of your business. The color-coded segments can draw your attention to areas that require immediate action, such as the 4xx response box showing red, indicating a large number of HttpResponseCode errors for desktop applications. You can create alerts for any of this data, so your team knows where to focus their efforts when users are experiencing difficulties using the platform. We can even send those alert notifications to third-party IT service management (ITSM) apps or systems like Pager Duty and Service Now.

In conclusion, New Relic offers extensive capabilities such as browser monitoring, mobile monitoring, APM, dashboards, etc., to capture all the data that’s important to your business and correlate these data across platforms. New Relic provides you with customized visualization so you and your team can move fast with confidence. And the New Relic team that will partner with you every step of the way.

Appendix

Important terms and acronyms

Customer journey: Any series of interactions that an end consumer has with a business or application that results in a successful or unsuccessful transaction for the end consumer (for example, buying something, watching something, changing your profile info, unsubscribing, etc.). This can be strictly in-app, like a purchase customer journey for an ecommerce company or a video stream customer journey for a media company, or this can be a blend of in-app and in-person, things like ordering online and picking up in-store. Key customer journeys are customer journeys that have business impacts, ones that end in a revenue-generating transaction or a user engagement transaction (for example, streaming a video).

User-centric performance metrics: Traditional metrics like page load time (historically measured by the window.onload event) are less effective for monitoring modern sites. Metrics that identify user-centric performance can shed light on your customer experience. These metrics include first paint, first contentful paint, first interaction, first input delay, and long-running task count.

Distributed tracing: This is used to profile and monitor applications, especially those built using a microservices architecture. Distributed tracing helps pinpoint where failures occur and what causes poor performance.

Serverless: This includes any cloud service where you don’t have access to the backend server infrastructure (this includes function-as-a-service [FaaS] offerings such as AWS Lambda, Azure Functions, and Google Functions).

K8s: Abbreviation for Kubernetes, a commonly used open-source platform for managing and orchestrating containers.

Microservices: A software development technique—a variant of the service-oriented architecture (SOA) architectural style that structures an application as a collection of loosely coupled services. This allows for faster iterations in a CI/CD DevOps environment.

MTTD: Mean time to detect, which is how long it takes to detect an application outage, error, or performance degradation. Lower MTTD is frequently indicative of a good DCX.

MTTR: Mean time to recovery, which is how long it takes an application to recover from an outage, error, or performance degradation to a normal state. Lower MTTR is frequently indicative of a good DCX.